html - 如何修复我的导航菜单栏

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>

score 0 · Accepted Answer

工作小提琴

height: 50px;从导航a标签中删除。那是选项 1。另一个选项是增加nav酒吧的高度。问题在于，通过将锚点设置为与导航栏相同的高度，它会在边距和填充之后变得太大。

您的代码如下所示：

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

score 0 · Accepted Answer

您需要将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/

score 0 · Accepted Answer

工作小提琴：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 - 如何修复我的导航菜单栏

3 回答 3

工作小提琴

Related

Reference