CSS水平下拉菜單定位

我正嘗試使用水平下拉菜單實現水平導航菜單。我想弄清楚如何居中水平下拉文本，使它位於導航容器的中心，因此用戶不必將鼠標移動到最左邊以便到達鏈接。CSS水平下拉菜單定位

<style type="text/css"> 
#nav-container { 
    padding: 4px; 
    width: 900px; 
    height: 60px; 
    background: #CCC; 
} 
#navbar { 
    margin:0; 
    padding:0; 
} 
#navbar li { 
    padding: 6px; 
    display: inline; 
    list-style: none; 
} 
#navbar li ul { 
    display: none; 
    position: absolute; 
    margin:0; 
    padding:0; 
    width: 900px; 
} 
#navbar li:hover ul { 
    display: block; 
} 

</style> 
</head> 

<body> 
<div id="nav-container"> 
<ul id="navbar"> 
    <li><a href="#">Link</a> 
     <ul> 

      <li><a href="#">Hello</a></li> 
      <li><a href="#">World</a></li> 
     </ul> 
    </li> 
    <li><a href="#">Link</a> 
     <ul> 
      <li><a href="#">Peace</a></li> 

      <li><a href="#">Love</a></li> 
     </ul> 
    </li> 
    <li><a href="#">Link</a> 
     <ul> 
      <li><a href="#">Smiles</a></li> 
      <li><a href="#">Cries</a></li> 

     </ul> 
    </li> 
    <li><a href="#">Link</a> 
     <ul> 
      <li><a href="#">Homer</a></li> 
      <li><a href="#">Peter</a></li> 
     </ul> 

    </li> 
    <li><a href="#">Link</a> 
     <ul> 
      <li><a href="#">Giggity</a></li> 
      <li><a href="#">Fapping</a></li> 
     </ul> 
    </li> 

    <li><a href="#">Link</a> 
     <ul> 
      <li><a href="#">Napster</a></li> 
      <li><a href="#">Myspace</a></li> 
     </ul> 
    </li> 
</ul> 
</div>

這是粗略的代碼只是爲了顯示一個例子，這裏是一個live example的代碼。

謝謝

來源

2011-01-24 mrdthomas

相對絕對定位的組合應該做的伎倆。我試圖添加這兩條規則，似乎工作：

#navbar li { 
    position: relative; 
} 

#navbar li ul { 
    position: absolute; 
    left: 0; 
    top: 24px; /* must me same as the height of parent li +/- a couple of pixels */ 
}

這似乎是伎倆。

來源

2011-01-24 06:36:09

這是做的伎倆，謝謝！ – mrdthomas 2011-01-26 09:14:20

CSS水平下拉菜單定位

回答

相關問題