因爲位置

不能有多個下拉菜單，因爲我可以看到，這是我的代碼，我使用絕對相對位置&。雖然使用絕對意味着我不能添加多個下拉菜單，但下拉框不在同一空間中，我想不出一個解決方案。有什麼建議麼？因爲位置

function opentabs() { 
 
\t \t window.document.getElementById('about').style.display="block"; 
 
\t \t window.document.getElementById('location').style.display="block"; 
 
\t \t } 
 
\t \t function closetabs() { 
 
\t \t window.document.getElementById('about').style.display="none"; 
 
\t \t window.document.getElementById('location').style.display="none"; 
 
\t \t }

#contact { 
 
position: relative; 
 
width: 100px; 
 
height: 50px; 
 
background-color: rgb(51,51,51); 
 
color: white; \t 
 
font-family: corbel; 
 
border-color: white; 
 
border-style: solid; 
 
border-width: 2x; 
 
} 
 

 
#about { 
 
position: absolute; 
 
width: 100px; 
 
height: 50px; 
 
background-color: rgb(51,51,51); 
 
color: white; \t 
 
font-family: corbel; 
 
border-color: white; 
 
border-style: solid; 
 
border-width: 2x; 
 
display: none; 
 
} 
 
#location { 
 
position: absolute; 
 
width: 100px; 
 
height: 50px; 
 
background-color: rgb(51,51,51); 
 
color: white; \t 
 
font-family: corbel; 
 
border-color: white; 
 
border-style: solid; 
 
border-width: 2x; 
 
display: none; 
 
}

 <div id="contact"> 
 
\t \t <p onmouseover="opentabs()" onmouseout="closetabs()" style="text-align: center;">Home</p> 
 
\t \t </div> 
 
\t \t <div id="about"> 
 
\t \t <p style="text-align: center;">About</p> 
 
\t \t </div> 
 
\t \t <div id="location"> 
 
\t \t <p style="text-align: center;">Location</p> 
 
\t \t </div>

來源

2017-02-06 Nathan Curnow

這樣做的「標準」方式是讓元素必須顯示在要懸停的元素中，然後將其與簡單的css懸停規則結合使用。所以，如果你可以描述什麼可以徘徊，應該顯示什麼......你通常不希望對菜單使用絕對位置，因爲調整瀏覽器的大小可能會使你的其他部分佈局失敗，並會給你更多問題當你嘗試嵌套超過一個深度。 – Shilly

謝謝你，我會嘗試。 –

舉例我的評論：

你必須與周圍的定位有點玩，因爲你要高度+填充+邊框+餘量爲最高值在子菜單上。或者使用box-sizing: border-box，然後使用百分比值，這樣就不必計算固定的CSS值。訣竅是將相對於主菜單按鈕的子菜單相對放置。這樣，與主按鈕相比，菜單將保留在相同的位置，而不管它放置在文檔中的哪個位置。

與z-index結合時，絕對定位對於與菜單下的其他元素重疊很有用。

<html> 
<head> 
    <style> 
    .menu-btn { 
     width: 100px; 
     height: 50px; 
     background-color: rgb(51,51,51); 
     color: white; 
     display: block; 
     font-family: corbel; 
     border-color: white; 
     border-style: solid; 
     border-width: 2x; 
     text-align: center; 
    } 
    .menu-sub { 
     display: none; 
     position: relative; 
     top: 54px; 
    } 
    .menu-main:hover > .menu-sub { 
     display: block; 
    } 
    </style> 
</head> 
<body> 
<div class="menu-btn menu-main">Home 
    <div class="menu-btn menu-sub">About</div> 
    <div class="menu-btn menu-sub">Location</div> 
</div> 
</body> 
</html>

ps：只需在絕對定位的元素上設置左側和頂部屬性，即可修復自己的代碼。位置應該像70像素到Home的底部，以便About可以適合它們。

喜歡的東西

#about { 
    position: absolute; 
    top: 10px; 
} 
#location { 
    position: absolute; 
    top: 75px; 
}

可能已經足以解決重疊的問題。

來源

2017-02-06 16:37:31 Shilly

回答

相關問題