二级导航样式问题

<style>
#nav{
width:100%;
height:42px;
margin:0 auto;
}
#nav ul{
width:auto;
height:42px;
line-height:42px;
border:1px solid #5E5E5E;
position:relative;
margin:0 40px;
display:block;
}
#nav ul li{
border-right:1px solid #5E5E5E;
background:#000000;
position:relative;
float:left;
width:100px;
text-align:center;

}
#nav ul li a{
display:block;
width:100px;

}
#nav ul li ul{
display:list-item;
width:180px;
display:none;
position:relative;
background:#000000;
}
#nav ul li ul li{
height:40px;
width:100%;
border-bottom:1px solid #5E5E5E;
background:#000000;
color:#FFFFFF;
padding:0;
margin:0;
}
#nav ul li a:hover{
background:#4EE09E;
}
#nav ul li:hover ul{
display:list-item;
}
</style>
<!--为什么会绿色大背板，代码怎么改-->

<div id="nav">

<ul class="font_16">
<li style="background-color:#4EE09E; height:42px"><a href="#">HOME</a></li>

<li><a href="#">CLASSES</a>
<ul>
<li><a href="#">DROP ITEM1</a></li>
<li><a href="#">DROP ITEM2</a></li>
</ul>
</li>

<li><a href="#">PAGES</a></li>
<li><a href="#">NEWS</a></li>
<li><a href="#">GALLERY</a></li>
<li><a href="#">TRAINERS</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>

你的问题已解决，没有冲突，自己布局的问题；你把我的复制一下看看，如果不可以的话继续追问我；还有宽度width可能 不合适，你自己 调整一下；追问

ok,还要二级ul
padding:0;
margin:0;

但为什么要自适应li里的内容宽度就不成了 ，就是不固定一级li宽度。

温馨提示：答案为网友推荐，仅供参考

当前网址：https://verywind.cn/ee/verxjx3ry3v2e2yvrrx.html