0

Ok hey guys. So what I try to acheive is to have a menu in the topnav of my site and when hovring the mouse over to show some stuff in a list under it.

so far I'm working on local on a test html file until I get it working. so what i got so far is this menu:

<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>

and my css code:

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 }

I think the problem is that I'm having more than 1 <a> hyperlink inside the notifications <li> id like each li notification to show in 1 line, as in the format, the X button at the start to remove it then the notification itself.

4

3 回答 3

1

您的问题似乎是错误的代码格式。这是您的代码的干净且经过编辑的版本。代码“破坏”是 CSS 格式的问题。使用 inline-blocks 而不是 blocks 有助于使事物正确排列，并将背景样式转换为 the<li>而不是<a>使它看起来更好。

于 2012-09-03T14:03:36.410 回答
1

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

列表应如下所示：

<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>

你想在哪里插入什么？

于 2012-09-03T13:33:26.027 回答
0

您的问题如下：

ul li a {
    display: block;

这使您插入到列表中的每个链接都成为一个块。尝试开始浮动我从你的代码制作的这个例子中的东西，http://jsfiddle.net/xN8sc/1/

于 2012-09-03T13:50:41.307 回答