Question

好吧，伙计们。所以我试图实现的是在我的网站的topnav中有一个菜单，当鼠标悬停在它下面的列表中显示一些东西时。

到目前为止，我正在测试html文件上的本地工作，直到我开始工作。所以到目前为止我得到的是这个菜单：

<ul id="menu">
<li><a href="#">Notifications</a>
    <ul>
        <li id="foot-notify-954>
            <a href="#" class="delete" onclick="deleteNotification('Delete this item?', 954);return false;">X</a><a href="http://test.com/testing">testing</a> left a comment for your <a href="http://test.com/member/174/blog/view/28/">blog</a> 22 hours ago
        </li>
        <li id="foot-notify-953>
            <a href="#" class="delete" onclick="deleteNotification('Delete this item?', 953);return false;">X</a>
            <p><a href="http://test.com/testing">testing</a> left a comment for your <a href="http://test.com/member/174/blog/view/28/">blog</a> <span>22 hours ago</span></p>
        </li>
    </ul>
</li>

和我的css代码：

ul {
    font-family: Arial, Verdana;
    font-size: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}
ul li {
    display: block;
    position: relative;
    float: left;
}
li ul { display: none }
ul li a {
    display: block;
    text-decoration: none;
    color: #ffffff;
    border-top: 1px solid #ffffff;
    padding: 5px 15px 5px 15px;
    background: #2C5463;
    margin-left: 1px;
    white-space: nowrap;
}
ul li a:hover { background: #617F8A }
li:hover ul {
    display: block;
    position: absolute;
}
li:hover li {
    float: none;
    font-size: 11px;
}
li:hover a { background: #617F8A }
li:hover li a:hover { background: #95A9B1 }

我认为问题是我在通知<a>中有超过1个<li>超链接 id就像每个li通知一样显示在1行中，就像在格式中一样，X按钮在开始时删除它然后是通知本身。

Answer 1

首先，您必须检查html语法：

列表应该看起来像this：

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li><a href='#'>Milk</a></li>
</ul>

此工具可帮助您查找错误（红色突出显示）： http://jsbin.com/emowir/1/edit

以下是您的示例：

<ul id="menu">
  <!-- type 1: NOT drop down-->
  <li><a href="">Home</a></li>

 <!--type 2: drop down-->
  <li><a href="">About Us</a>
    <ul>
      <li><a href="">The Team</a></li>
      <li><a href="">History</a></li>
      <li><a href="">Vision</a></li>
    </ul>
  </li>
</ul>

您想要插入什么内容？

Answer 2

您的问题确实似乎是错误的代码格式化。 This is a clean and edited version of your code.代码“破解”是CSS格式的问题。使用内联块而不是块有助于使事情正确排列，并将背景样式转换为<li>而不是<a>使其看起来更好。

Answer 3

您的问题如下：

ul li a {
    display: block;

这会使您在列表中插入的每个链接都成为一个块。尝试开始像我在代码http://jsfiddle.net/xN8sc/1/

中创建的示例一样

Css菜单帮助，下拉问题

3 个答案: