在創建CSS

Question

一個垂直的「滴」下拉菜單標題可能實際上並不正確描述的問題。我想爲我的網站創建一個菜單，該菜單是左側的垂直菜單，當您將鼠標懸停在帶有子選項的選項上時，這些子選項會彈出到側面（此時並不重要）。我遇到的問題是，當他們彈出時，他們推下所有其他選項，並且我看到這個導航欄並不好看。如果有人能幫助我解決這個問題，那麼即使它們沒有重疊，我也不會將其他所有東西都排除在外，這將不勝感激。

我使用的HTML。

<ul id="nav"> 

<li><a href="#">Work</a></li> 
    <li><a href="#">Imaging</a> 
    <ul> 
     <li><a href="#">Photoshop</a> 
      <ul> 
       <li><a href="">Link</a></li> 
       <li><a href="">Link</a></li> 
      </ul> 
     </li> 
     <li><a href="#">Illustrator</a></li> 
    </ul> 
</li> 
<li><a href="#">Home</a></li> 

我使用的CSS。

ul { 
list-style-type:none; 
margin:0; 
padding:0; 
} 

a { 
display:block; 
width:60px; 
} 

#nav ul { 
    display: none; 
} 

#nav li:hover > ul { 
    display: block; 
    position: relative; 
    float: left; 
} 

如果有人能幫助我，請提前致謝。

Answer 1

那是因爲你的文件是有一條線的所有元素，並會始終顯示他們一個接一個！

所以，我對你的建議是隻使用

position: absolute; 

這種方式，您可以對齊在文檔中的元素，而無需interefering當前文檔的風格和元素排列！

更多：https://developer.mozilla.org/en-US/docs/Web/CSS/position

Answer 2

我會定位您的李絕對裏面的UL認證。

position:absolute; 

當您這樣做時，元素將懸停在li-parent上方。當您嘗試一些正負邊距時，您可以將懸停元素放在其父項旁邊。 它會是這樣的：

#nav li:hover > ul { 
display: block; 
position: absolute; 
float: left; 
margin-left:60px; 
}