2

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

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

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

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

JSFiddle http://jsfiddle.net/XJRHy/

HTML 代码：

<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;
}
4

1 回答 1

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删除它。

见演示小提琴

于 2013-09-20T15:29:56.027 回答