html - 对我的下拉菜单的迷梦疑惑

Question

我尝试做一个下拉菜单，但我有很多问题，看来我做错了。困扰我梦想的一些主要问题是:

• 我应该在 UL 或 LI(或两者)上使用 list-style:none; 吗？
• 将 background-color 和 border 放在 As 或 LIs 上哪个更好？
• 如果在绝对 float UL 内的 LI 有 float:left; 还是 position:relative;?

我正在使用的代码似乎可以工作，但我最担心的是我写了不必要的代码甚至是错误的代码。

请帮忙。

我使用的 CSS:

*{
padding:0;
margin:0;
}

#menu{
margin:0 auto;
width:800px;
background:#999;
border:1px solid #777;
}

#menu ul{
list-style:none;
border-right:1px solid #aeaeae;
/*Not sure about this V*/
position:relative;
float:left;
}

#menu li ul{
font-weight:normal;
display:none;
position:absolute;
border:1px solid #777;
width:200px;
/*Not sure about this V*/
float:none;
margin-left:-2px;
}

#menu li{
display:block;
position:relative;
float:left;
background:#999;
border-right:1px solid #777;
border-left:1px solid #aeaeae;
}

#menu li li{
float:none;
background:#eaeaea;
border:0;
border-top:1px solid #666;
}

#menu li:hover{
background:#a6a6a6;
}

#menu li li:hover{
background:#f5f5f5;
}

#menu a{
display:block;
text-decoration:none;
color:#fff;
padding:5px 15px;
}

#menu li ul a{
color:#333;
}

#menu a:hover{
color:#fff;
}

#menu li ul a:hover{
color:red;
}

#menu li li:first-child{
border-top:0;
}

.clear{
clear:both;
font-size:0;
line-height:0;
}

HTML 结构是:

<div id="menu">
    <ul>
        <li><a href="">Home</a></li>
        <li><a href="">About Us</a></li>
        <li><a href="">Products</a>
        <li><a href="">Drop Down</a>
            <ul>
            <li><a href="">DD Item</a></li>
            <li><a href="">Another One</a></li>
            <li><a href="">Last DD Item</a></li>
            </ul><div class="clear"></div>
        </li>
    </ul><div class="clear"></div>
</div>

我正在使用 JQuery显示/隐藏菜单:

$('#menu ul li').hover(function(){$('ul',this).slideDown(100);},
function(){$('ul',this).slideUp(100);});

我使用的代码经过强烈修改，但取自here

Answer 1

您的梦想可能是安全的。也就是说，您的 CSS 总体上看起来相当不错。您可能想考虑将 Twitter Bootstrap 用于您正在做的一些事情(很棒的下拉菜单)，但您当然可以自己动手。

回答您的问题:

---

我应该在 UL 或 LI(或两者)上使用 list-style:none; 吗？

就在 ul 上。

---

将 background-color 和 border 放在As还是LIs上更好？

将它们放在 li 元素上。

---

绝对 float UL 内的 LI 是否应该 float:left; 或 position:relative;?

这些完成完全不同的事情。向左浮动应该就足够了，但您可能希望同时执行这两项操作。

---

你还应该重构你的 jQuery 代码，尽管它确实有效:

$("#menu ul li").hover(
  function () {
    $(this).children("ul").slideDown(100);
  },
  function () {
    $(this).children("ul").slideUp(100);
  }
);