下拉菜单上的 CSS 问题答案

【问题标题】：CSS Trouble on Dropdowns下拉菜单上的 CSS 问题
【发布时间】：2012-01-02 19:04:44
【问题描述】：

u我的子页面显示在导航中父页面链接下方的水平线上。我不知道css哪里错了。你可以在这里看到我在说什么（示例页面下的链接是有问题的）：http://sitetest3.talktothedogs.com。

用于导航的 HTML（由 WP 自动生成）

<div id="nav">
<div class="menu">
<ul>
   <li class="current_page_item"><a href="http://sitetest3.talktothedogs.com/" title="Home">Home</a></li>
   <li class="page_item page-item-2"><a href="http://sitetest3.talktothedogs.com/?page_id=2">Sample Page</a>
      <ul class='children'>
         <li class="page_item page-item-4"><a href="http://sitetest3.talktothedogs.com/?page_id=4">Testing page 2</a></li>
         <li class="page_item page-item-6"><a href="http://sitetest3.talktothedogs.com/?page_id=6">Testing page 1</a></li>
      </ul>
   </li>
</ul>
</div>
</div>

我的 CSS 代码

.menu, .menu ul { margin:0; padding:0; list-style:none; height:29px; text-align:center; }
.menu a { color:#fff; display:block; padding-left:15px; padding-right:15px; padding-bottom:0px; }
.menu a:hover { color:#000; display:block; text-decoration:none; }
.menu li { float:left; margin:0; padding: 0px; }
.menu li li { float:left; margin: 0 0 0 5px; padding:0; width:130px; }
.menu li ul.submenu li { display:block; position:absolute; left:0; }
.menu li li a, .menu li li a:link, .menu li li a:visited { background:#a82652; width:150px; float:none; margin:0; padding: 4px 10px 5px 10px; color:#fff; }
.menu li li a:hover, .menu-header li li a:active { background:#000; width:150px; float: none; margin: 0; padding: 4px 10px 5px 10px; color:#fff; }
.menu li ul { position:absolute; width:10em; left:-999em; padding-top:13px; z-index:1; }
.menu li:hover ul { left:auto; display:block; }
.menu li:hover ul, #menu li.sfhover ul { left: auto; }
.menu li.current_page_item a { } 
.menu li.current_page_item a:hover{ }

任何帮助将不胜感激。提前致谢！

【问题讨论】：

你想要什么？你想让它们垂直吗？您打算如何解决这个问题？
抱歉，我希望它们是垂直的。

标签： css navigation styles drop-down-menu

【解决方案1】：

按如下方式更改您的 CSS：

.menu li a{ margin-bottom:13px;}
.menu li li { float:none; margin: 0; padding:0; width:130px; }

这是它的外观

【讨论】：

【解决方案2】：

您在 CSS 中的第一行：

.menu, .menu ul { ... }

正在将该 .menu 中的 <div class="menu"> 和 <ul> 的高度设置为相同的高度。整个菜单被限制在一个 29 像素高的容器中。

【讨论】：