Working Fiddle

Question

在我的导航栏中，我的活动按钮以及我的悬停按钮未与我的导航栏对齐。有人可以帮我弄这个吗？

以下是我测试此内容的链接：

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>

Answer 1

Working Fiddle

从导航height: 50px;标记中删除a。这是选项1.另一个选择是增加nav栏的高度。问题是，通过为锚点提供与导航栏相同的高度，它会在边距和填充之后变得太大。

您的代码如下所示：

#navi > li:hover > a, #navi li a.active{
    background-color:#009;
    line-height:29px;
    display:block;        
}

Answer 2

您需要将a:active元素的高度更改为29px，以匹配a的所有其他子#navi元素的行高，或者只删除它：

#navi > li:hover > a, #navi li a.active{
    background-color:#009;
    height:29px;
    line-height:29px;
    display:block;
}

我已经更新了你的jsfiddle：

http://jsfiddle.net/3qPbE/64/

Answer 3

工作小提琴： 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;
}

如何修复导航菜单栏

3 个答案:

Working Fiddle