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水平下拉菜单定位

回答

相关问题