如何防止带边框的重叠下拉菜单？

时间：2016-01-12 16:22:59

标签： html css html5 css3 drop-down-menu

我有一个悬停的下拉菜单，在悬停边框后，我的下拉菜单与菜单重叠。试图添加填充，但它更糟糕。你怎么能调整下拉列表的位置，知道我没有悬停时有5px边框透明，在悬停时转换为底部5px边框实体？

＆＃13;
＆＃13; 
#nav {
    background-color: #e26a63;
}
#wrap {
    padding-left: 60px;
    height: 100px;
    width: 100%;
    margin: 0 auto;
    display: table-cell; 
    vertical-align: bottom;
}
#nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    position: relative;
    min-width: 200px; 
}
#nav ul li {
    display: inline-block;
    border: 5px solid transparent;
}
#nav ul li:hover {
    background-color: #cb5f59;
    border-bottom: 5px solid #9e4a45;
}
#nav ul li a, visited {
    color: white;
    display: block;
    padding: 15px;
    text-decoration: none;
}
#nav ul li:hover ul {
    display: block;
}
#nav ul ul {
    display: none;
    position: absolute;
    background-color: #e26a63;
    border-top: 0;
    margin-left: -5px;
}
#nav ul ul li {
    display: block;
}
#nav ul ul li a:hover {
    color: white;
}
＆＃13; 
<div id="nav">
	<div id="wrap">
    	<ul>
        <li><a href="#">Home</a></li><li>
        <a href="#">Study</a></li><li>
        <a href="#">Games</a>
        	<ul>
            	<li><a href="#">Riddles</a></li><li> 
                <a href="#">Flip card game</a></li><li>  
                <a href="#">Spot the mistake</a></li><li> 
                <a href="#">Multiple choice</a></li>            	
            </ul>
          </li><li>
        <a href="#">Read</a></li><li>
        <a href="#">Contact</a></li><li>
        <a href="#">About Us</a></li>
        </ul>
    </div>
</div>
＆＃13;
＆＃13;
＆＃13;

4 个答案:

答案 0 :(得分：2)

简短回答是将margin-top: 5px;添加到#nav ul ul，其中5px与底部边框宽度的值相同。

请注意，以下一组样式在悬停时输出一个梯形形状 1 底部边框。

#nav ul li { border: 5px solid transparent; }
#nav ul li:hover { border-bottom: 5px solid #9e4a45; }

将第一行中的border更改为border-bottom，然后输出一个真正的矩形形状。

我还重新组织了CSS表格布局，使表格自动居中（我想你想要这样，但如果不是这样就很容易改变）。并删除了下拉项目中的边框样式。

<强> Jsfiddle Example 

#nav {
    background-color: #e26a63;
}
#wrap {
    display: table;
    height: 100px;
    margin: 0 auto;
}
#nav ul {
    padding: 0;
    margin: 0;
    display: table-cell; 
    vertical-align: bottom;
}
#nav ul li {
    display: inline-block;
    border-bottom: 5px solid transparent;
}
#nav ul li a {
    display: block;
    padding: 15px;
    text-decoration: none;
    color: white;
}
#nav ul ul {
    display: none;
    position: absolute;
    background-color: #e26a63;
    margin-top: 5px;
}
#nav ul ul li {
    display: block;
    min-width: 200px;
}

/* hover */
#nav ul li:hover {
    background-color: #cb5f59;
    border-bottom-color: #9e4a45;
}
#nav ul li:hover ul {
    display: block;
}
#nav ul li:hover li {
  border-bottom-width: 0;
}
<div id="nav">
	<div id="wrap">
    	<ul>
        <li><a href="#">Home</a></li><li>
        <a href="#">Study</a></li><li>
        <a href="#">Games</a>
        	<ul>
            	<li><a href="#">Riddles</a></li><li> 
                <a href="#">Flip card game</a></li><li>  
                <a href="#">Spot the mistake</a></li><li> 
                <a href="#">Multiple choice</a></li>            	
            </ul>
          </li><li>
        <a href="#">Read</a></li><li>
        <a href="#">Contact</a></li><li>
        <a href="#">About Us</a></li>
        </ul>
    </div>
</div>

此外，您还可以使用:after + background来获得相同的底部边框样式。

<强> Jsfiddle Example 

#nav {
    background-color: #e26a63;
}
#wrap {
    display: table;
    height: 100px;
    margin: 0 auto;
}
#nav ul {
    padding: 0;
    margin: 0;
    display: table-cell; 
    vertical-align: bottom;
}
#nav ul li {
    display: inline-block;
}
#nav ul li a {
    display: block;
    padding: 15px;
    text-decoration: none;
    color: white;
}
#nav ul li:after {
    content: "";
    display: block;
    height: 5px;
}
#nav ul ul {
    display: none;
    position: absolute;
    background-color: #e26a63;
    margin-top: 5px;
}
#nav ul ul li {
    display: block;
    min-width: 200px;
}

/* hover */
#nav ul li:hover {
    background-color: #cb5f59;
}
#nav ul li:hover:after {
    background: #9e4a45;
}
#nav ul li:hover ul {
    display: block;
}
#nav ul ul li:after {
    height: 0;
}
<div id="nav">
	<div id="wrap">
    	<ul>
        <li><a href="#">Home</a></li><li>
        <a href="#">Study</a></li><li>
        <a href="#">Games</a>
        	<ul>
            	<li><a href="#">Riddles</a></li><li> 
                <a href="#">Flip card game</a></li><li>  
                <a href="#">Spot the mistake</a></li><li> 
                <a href="#">Multiple choice</a></li>            	
            </ul>
          </li><li>
        <a href="#">Read</a></li><li>
        <a href="#">Contact</a></li><li>
        <a href="#">About Us</a></li>
        </ul>
    </div>
</div>

1 CSS的形状 - https://css-tricks.com/examples/ShapesOfCSS/

答案 1 :(得分：0)

由于您已将下拉列表集成到标题中，因此如果您只是将其显示，则可能会调整标题大小。

一个简单的解决方案是添加如下内容：

ul li ul{
    position: absolute;
    top: 58px;
}

通过使这个元素绝对，我们将它从标题代码“中断”。

注意：这可能不是完美的代码，但它可能会给你一个方向。

答案 2 :(得分：0)

你的ul是绝对定位的，所以它隐含在顶部：0px，

只需将其设置为5px即可补偿边框尺寸

#nav ul ul {
    top: 5px;   /* added */
}

#nav {
    background-color: #e26a63;
}
#wrap {
    padding-left: 60px;
    height: 100px;
    width: 100%;
    margin: 0 auto;
    display: table-cell; 
    vertical-align: bottom;
}
#nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    position: relative;
    min-width: 200px; 
}
#nav ul li {
    display: inline-block;
    border: 5px solid transparent;
}
#nav ul li:hover {
    background-color: #cb5f59;
    border-bottom: 5px solid #9e4a45;
}
#nav ul li a, visited {
    color: white;
    display: block;
    padding: 15px;
    text-decoration: none;
}
#nav ul li:hover ul {
    display: block;
}
#nav ul ul {
    display: none;
    position: absolute;
    background-color: #e26a63;
    border-top: 0;
    margin-left: -5px;
}
#nav ul ul li {
    display: block;
}
#nav ul ul li a:hover {
    color: white;
}
<div id="nav">
	<div id="wrap">
    	<ul>
        <li><a href="#">Home</a></li><li>
        <a href="#">Study</a></li><li>
        <a href="#">Games</a>
        	<ul>
            	<li><a href="#">Riddles</a></li><li> 
                <a href="#">Flip card game</a></li><li>  
                <a href="#">Spot the mistake</a></li><li> 
                <a href="#">Multiple choice</a></li>            	
            </ul>
          </li><li>
        <a href="#">Read</a></li><li>
        <a href="#">Contact</a></li><li>
        <a href="#">About Us</a></li>
        </ul>
    </div>
</div>

答案 3 :(得分：0)

您可以将边框更改为框阴影，并且框阴影不会从框模型

中占据 
#nav ul li:hover {
    background-color: #cb5f59;
    box-shadow: 0 -2.2px 0 #9e4a45 inset,0 0 0 #9e4a45;
}
相关问题
最新问题