Question

我有一个100％宽的DIV，其中包含一个居中的导航菜单，没有别的。导航菜单是使用html列表创建的，其中包含一些下拉元素。

当您将鼠标悬停在导航菜单中的某个链接上时，该链接的背景颜色会发生变化，因此我自然不希望导航菜单和DIV容器之间有任何可见的上/下边距 - 但是，菜单正在添加5px的底部边距使设计缺乏吸引力。

这就是我遇到的麻烦。我正在尝试使用响应式设计，因此页面可以轻松地在不同的浏览器分辨率之间进行调整，因此我无法为DIV /导航栏指定精确的高度。我需要DIV /导航栏的高度自动调整，以便它可以包含分辨率较小的屏幕的导航元素。

我可以在没有下拉菜单的情况下删除边距，并且我可以在没有导航居中的情况下使其工作，但是在保持下拉菜单并使其居中时我无法删除边距。任何帮助将不胜感激。

HTML code：

<div class="navigation">
<nav>
<ul>
    <li><a href="#">One</a></li>
    <li><a href="#">Two</a>
        <ul>
            <li><a href="#">White</a></li>
            <li><a href="#">Red</a></li>
            <li><a href="#">Blue</a></li>
        </ul>
    </li>
    <li><a href="#">Four</a></li>
    <li><a href="#">Five</a></li>
</ul>
</nav>
</div>

CSS

.navigation {
width: 100%;
height:auto;
margin-left:auto;
margin-right:auto;
text-align:center;
background-color:#c0c0c0;
font-family: 'Open Sans', sans-serif;
}

nav {
text-align: center;
width:100%;
text-transform: uppercase;
font-size:1.375em;
}

nav ul ul {
display: none;
}
nav ul li:hover > ul {
    display: block;
}
nav ul {
list-style: none;
position: relative;
display: inline-table;
margin:0;
padding:0;
}
nav ul:after {
    content: ""; clear: both; display: block;
}
nav ul li {
    float:left;
}
    nav ul li:hover {
        background: #4289a9;            
    }
        nav ul li:hover a {
            color: #fff;
        }
    nav ul li a {
        display: block; padding: 10px 20px 10px 20px;
        color: #000000; text-decoration: none;
        font-weight:bold;
    }       
nav ul ul {
    background: #5f6975; border-radius: 0px; padding: 0;
    position: absolute; top: 100%;
    z-index:5000;
}
    nav ul ul li {
        float: none; 
        border-top: 1px solid #6b727c;
        border-bottom: 1px solid #575f6a; position: relative;
        z-index:5000;

    }
        nav ul ul li a {
            padding: 10px 20px 10px 20px;
            color: #fff;
            z-index:5000;

        }   
            nav ul ul li a:hover {
                background: #4b545f;
                z-index:5000;
            }

nav ul ul ul {
    position: absolute; left: 100%; top:0;
    z-index:5000;
}

Answer 1

您可以按照以下方式修复：

nav ul {
    border: 1px solid blue; /* for demo only */
    list-style: none;
    position: relative;
    display: inline-table;
    margin:0;
    padding:0;
    vertical-align: top;
}

nav ul是一个内联元素，在基线下面有一些空白区域。

使用vertical-align: top将其删除。

<强> See Demo Fiddle

无法从居中DIV内的下拉列表中删除底部边距

1 个答案: