Question

我试着做一个下拉菜单，但我有很多问题，而且我似乎做错了。一些扰乱我梦想的主要问题是：

我应该在UL或LI（或两者）上使用list-style:none;吗？
将background-color和border放在As或LI上会更好吗？
绝对浮动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或LI上会更好吗？

将它们放在li元素上。

绝对浮动UL内的LI是否应 float:left; 或 position:relative;？

这些完成了完全不同的事情。向左浮动应该足够了，但你可能想要两者兼顾。

你应该重构你的jQuery代码，尽管它有效：

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

用我的下拉菜单来解读令人不安的疑惑

1 个答案: