Question

当你将鼠标悬停在“服务”上时，我有一个带有下拉菜单的导航栏，但是在第一个子菜单项之前似乎有一个块，我不知道如何摆脱它....

这是我的HTML：

<header>
        <div class= "header">

            <div class= "nav">
                <ul>
                    <li>
                        <a href="">Services</a>
                        <ul>
                            <a href=""><li><img class="imgcenter" src="images/Brand-Design-Circle-Blue.png" width="100px" onmouseover="this.src='images/Brand-Design-Circle-Grey.png'"
                        onmouseout="this.src='images/Brand-Design-Circle-Blue.png'" /> <br>Brand Design</li></a>
                            <a href=""><li><img class="imgcenter" src="images/Brand-Online-Circle-Blue.png" width="100px" onmouseover="this.src='images/Brand-Online-Circle-Grey.png'"
                        onmouseout="this.src='images/Brand-Online-Circle-Blue.png'" /> <br>Brand Online</li></a>
                        </ul>
                    </li>
                    <li>
                        <a href="">Portfolio</a>
                    </li>
                    <li>
                        <a href="">About Us</a>
                    </li>
                    <li>
                        <a href="">Contact Us</a>
                    </li>
                </ul>
            </div>
        </div>
    </header>

这是我的CSS：

    .header {
    position: fixed;
    display: block;
    float: left;
    width: 100%;
    height: auto;
    background-color: #666;
    z-index: 9999;
}

.nav {
    position: static;
    float: right;
    width: 700px;
    height: 50px;
    margin: 10px 5px;
}

.nav a {
    text-decoration: none;
    color: #FFFFFF;
}

.nav ul > li:first-child {
    padding-bottom: 25px;
}

.nav a:hover {
    text-decoration: none;
    color: #6db6e5;
}

.nav li {
    font-family: "eras_demi_itcregular", Arial, Helvetica;
    list-style: none;
    float: left;
    margin-right: 50px;
}

.nav li:hover a:hover {
    padding-bottom: 5px;
    border-bottom: 2px solid #6db6e5;
    color: #6db6e5;
}

.nav ul ul {
    display: none;
}

.nav ul li:hover > ul {
    display: block;
}

.nav ul {
    list-style: none;
    position: absolute;
    display: inline-block;
    margin-top: 23px;
}

.nav ul ul {
    background: #6db6e5;
}

.nav ul ul li {
    padding: 10px;
    margin-left: -1px;
    margin-right: 0;
    border-left: 1px solid #666;
}

.nav ul ul li:hover {
    background: #666;
}

jsfiddle here：http://jsfiddle.net/2mnm5/

有谁知道这可能是什么？

感谢

Answer 1

您应该删除第二个ul代码

上的填充

.nav ul ul {
    display: none;
    padding-left:0;
}

http://jsfiddle.net/2mnm5/1/

下拉菜单随机填充或边距

1 个答案: