在我的导航栏中，我的事件按钮和我的悬停按钮没有与我的导航栏对齐。有人可以帮我弄这个吗？
这是我用来测试的链接:
CSS:
<style type="text/css">
.cl{clear:both;}
#navi{
background:#0082c8;
position:relative;
margin-top:0;
list-style:none;
height:50px;
}
#navi > li{
float:left;
margin:0 20px;
position:relative;
padding:14px 0;
}
#navi li a, .subnavi li a{
color:white;
text-decoration:none;
display:block;
line-height:29px;
padding:0 13px;
font-size:16px;
font-family:arial;
text-shadow: 0px 2px 2px #034e9f;
filter: dropshadow(color=#034e9f, offx=0, offy=2);
}
#navi > li:hover > a, #navi li a.active{
background-color:#009;
height:50px;
line-height:29px;
display:block;
}
.subnavi{
position:absolute;
display:none;
top:50px;
background:#0082c8;
padding:10px 0;
white-space:nowrap;
list-style:none;
}
#navi li:hover .subnavi{
display:block;
}
#navi .subnavi li{
margin:0;}
#navi .subnavi li a{
display:block;
font-size:13px;
padding:0 15px;
border-radius:0;
line-height:27px;}
#navi .subnavi li a:hover{
padding:0 15px;
border-radius:0;
border-left:0;
border-right:0;
line-height:25px;}
</style>
这是 HTML:
<body>
<ul id="navi">
<li><a href="" class="active">Home Owners</a></li>
<li><a href="">Proffesionals</a>
<ul class="subnavi">
<li><a href="">LInk 1</a></li>
<li><a href="">LInk 1</a></li>
<li><a href="">LInk 1</a></li>
<li><a href="">LInk 1</a></li>
<li><a href="">LInk 1</a></li>
</ul>
</li>
<li><a href="">Why Ventilate?</a></li>
<div class="cl"></div>
</ul>
</body>
最佳答案
工作 fiddle : http://jsfiddle.net/3qPbE/65/
更改 #navi > li 和 #navi li a 的填充，并给 #navi > li:hover > a, #navi li a.active 正确的高度。
#navi > li{
float:left;
margin:0 20px;
position:relative;
padding:0;
}
#navi li a, .subnavi li a{
color:white;
text-decoration:none;
display:block;
line-height:29px;
padding:10px 13px;
font-size:16px;
font-family:arial;
text-shadow: 0px 2px 2px #034e9f;
filter: dropshadow(color=#034e9f, offx=0, offy=2);
}
#navi > li:hover > a, #navi li a.active{
background-color:#009;
height:30px;
line-height:29px;
display:block;
}
关于html - 如何修复我的导航菜单栏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16159241/