html - 我的下拉菜单中的梦以求的疑问

我试着做一个下拉菜单，但我有很多问题，似乎我做错了。一些困扰我梦想的主要问题是：
我应该在ULs或LIs（或两者）上使用list-style:none;？
把background-color和border放在As或LIs上更好吗？
如果在绝对浮动UL中的LIs
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

最佳答案

你的梦想可能是安全的。也就是说，你的CSS整体看起来不错。你可能想考虑使用Twitter引导来做一些你正在做的事情（很棒的下拉列表），但你当然可以自己滚动。
回答你的问题：
我应该在ULs或LIs（或两者）上使用list-style:none;？
刚刚开始。
把ul和background-color放在As或LIs上更好吗？
把它们放到border元素上。
绝对浮动UL中的LIs应该有li还是float:left;？
它们完成了完全不同的事情。向左浮动应该就足够了，但您可能需要同时执行这两项操作。
您还应该重构jQuery代码，尽管它可以工作：

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

关于html - 我的下拉菜单中的梦以求的疑问，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/8660417/