Question

我正在开发一个在所有浏览器中工作正常的菜单，除了ie。一些事情有点奇怪并且很快完成，但除了ie之外它工作得很好。当移动到底部栏时，它会显示为无显示，然后才能到达底栏。我有li和ul两个：用display：block;悬停，但我无法弄清楚如何解决这个问题。

我把导航放在小提琴上： http://jsfiddle.net/vUxpE/22/

到目前为止我尝试过的所有东西都不起作用。我目前还不知道为什么。也许你们可以点亮它

CSS：

#nav {
    height:64px;
    width:100%;
    background:#f0f0f0;
    background: -moz-linear-gradient(top, #f0f0f0 0%, #d3d5d2 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f0f0f0), color-stop(100%, #d3d5d2));
    background: -webkit-linear-gradient(top, #f0f0f0 0%, #d3d5d2 100%);
    background: -o-linear-gradient(top, #f0f0f0 0%, #d3d5d2 100%);
    background: -ms-linear-gradient(top, #f0f0f0 0%, #d3d5d2 100%);
    background: linear-gradient(to bottom, #f0f0f0 0%, #d3d5d2 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f0f0f0', endColorstr='#d3d5d2', GradientType=0);
    border:#e2e2e2 1px solid;
    -webkit-box-shadow: 0px 5px 5px rgba(0, 0, 0, 1);
    -moz-box-shadow: 0px 5px 5px rgba(0, 0, 0, 1);
    box-shadow: 0px 5px 5px rgba(0, 0, 0, 1);
}
#nav ul {
    padding:10px;
}
#nav li {
    float:left;
}
#nav a {
    color:#4d4d4d;
    font-size:14px;
    text-decoration:none;
    margin-top:10px;
    padding:10px;
    padding-bottom:11px;
    line-height:44px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}
#nav a:hover {
    background:url(../images/navbutton.png);
    color:#fff;
}
#navtest li ul {
    display:none;
    z-index:100;
    position:absolute;
    margin:0;
    padding:20px;
    left:0;
    width:494px;
}
#navtest li:hover ul {
    display:block;
}
#navtest li ul:hover {
    display:block;
}
#navtest li ul a {
    color:#FFF;
    font-size:11px;
}
#navtest li ul a:hover {
    background:none;
    text-decoration:underline;
}
.subnav {
    background:url(../images/submenu.png) #000;
    height:64px;
    z-index:10;
}
.subnav li {
    float:left;
    margin:15px;
}
.subnav a {
    color:#fff;
    line-height:34px;
    text-decoration:none;
}
.subnav a:hover {
    text-decoration:underline;
}

HTML：

<nav id="nav">
    <ul id="navtest">
        <li> <a href="#">News</a>

                <ul>
                    <li>    <a href="#">Latest</a>

                    </li>
                    <li>    <a href="#">Archive</a>

                    </li>
                </ul>
        </li>
        <li> <a href="#">Tournaments</a>
                <ul>
                    <li>    <a href="#">DSCL</a>

                    </li>
                    <li>    <a href="#">Starcraft 2</a>

                    </li>
                    <li>    <a href="#">League of Legends</a>

                    </li>
                </ul>
        </li>
        <li> <a href="#">Media</a>

                <ul>
                    <li>    <a href="#">Photo's</a>

                    </li>
                    <li>    <a href="#">Video's</a>

                    </li>
                    <li>    <a href="#">Extra</a>

                    </li>
                </ul>
        </li>
        <li> <a href="#">Partners</a>

                <ul>
                    <li>    <a href="#">DSCL</a>

                    </li>
                    <li>    <a href="#">Knights</a>

                    </li>
                </ul>
        </li>
        <li> <a href="#">About Us</a>

        </li>
        <li> <a href="#">Contact</a>

        </li>
    </ul>
</nav>
<div class="subnav"></div>

Answer 1

嗨，请删除最后一个subnav div

并更改#navtest li ul并尝试此

#navtest li ul {
background: none repeat scroll 0 0 #000;
display: none;
left: 0;
margin: 0;
padding: 20px;
position: absolute;
top: 67px;
width: 520px;
z-index: 100;

}

移动到它时的下拉分发（导航即）（纯CSS）

1 个答案: