在我的导航栏中，我的活动按钮和我的悬停按钮没有与我的导航栏对齐。有人可以帮我弄这个吗？我该如何修复我的导航菜单条

这里是链接在那里我有测试此：

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>

来源

2013-04-23 DWalk

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

来源

2013-04-23 01:16:28 Arbel

感谢您的建议。它工作。但是，当我在它下面添加一个div时，它会在我的导航栏和我要放置照片旋转器的div盒之间留下一个小间隙。为什么会发生这种情况？以下是正在进行的截图的链接：https://www.dropbox.com/s/9twyb86zs43vsai/web%20screenshot.JPG – DWalk 2013-04-23 05:10:11

欢迎您。造成这种差距的原因可能有很多，代码的结构，填充，边距，定位和显示类型等等。您可以提出另一个问题并提供代码，以便我们为您提供适当的帮助。但是，如果我的答案解决了您当前的问题，请将其标记为将来参考的答案。 – Arbel 2013-04-23 06:32:27

谢谢你。我将尝试自己解决差距问题。谢谢你的帮助。 – DWalk 2013-04-23 20:34:46

Working Fiddle

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

您的代码应该是这样的：

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

来源

2013-04-23 01:11:18

你需要改变你的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/

来源

2013-04-23 01:11:51 adaam

谢谢，但我想知道如何获得活动状态和悬停状态与导航栏相同的高度？我做了导航栏50像素，但我需要悬停和活动状态是相同的大小？ – DWalk 2013-04-23 02:14:02

我该如何修复我的导航菜单条

回答

Working Fiddle

相关问题