Question

嗨我的下拉菜单有问题。

这是HTML代码

<div class="sticky-nav">
        <a id="mobile-nav" class="menu-nav" href="#menu-nav"></a>

        <div id="logo">
            <a id="goUp" href="index.html" title="CyberSprint"></a>
        </div>

        <nav id="menu">
            <ul id="menu-nav">
                <li><a href="about.html" class="external">About Us</a></li>
                <li><a href="solutions.html" class="external">Solutions</a>
                    <ul id="submenu-nav">
                        <li><a href="hits.html" class="external"> Healthcare ITSolutions</a></li>
                        <li><a href="gits.html" class="external">Government IT Solutions</a></li>
                    </ul>
                </li>
                <li><a href="solutions.html" class="external">Services</a>
                    <ul id="submenu-nav">
                        <li><a href="solutions.html" class="external">Risk Management</a></li>
                        <li><a href="solutions.html" class="external">Audit & Assessment</a></li>
                        <li><a href="solutions.html" class="external">Disaster Recovery & Business Continuity Planning</a></li>
                    </ul>
                </li>
                <li><a href="contact.html" class="external">Contact</a></li>
                <li> <a href="javascript:popup()" class="external">Login</a></li>       
            </ul>
        </nav>
    </div>

这是CSS代码

nav#menu {
    float: left;
    margin-left: 50px;
    margin-top: 10px;
}

nav#menu #menu-nav {
    margin: 0;
    padding: 0; 
}

nav#menu #menu-nav li {
    list-style: none;
    display: inline-block;
    margin-left: 50px;
}

nav#menu #menu-nav li:first-child {
    margin-left: 0; 
}

nav#menu #menu-nav li a {
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 300;
    line-height: 60px;
    display: block;
    text-transform: uppercase;
}

nav#menu #menu-nav li.current a,
nav#menu #menu-nav li a:hover {
    color: #23aae1;
}

nav#menu #menu-nav li ul li {
    padding: 0;
    position: absolute;
    top: 48px;
    left: 0;
    width: 150px;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    display: none;
    opacity: 0;
    visibility: hidden;
    -webkit-transiton: opacity 0.2s;
    -moz-transition: opacity 0.2s;
    -ms-transition: opacity 0.2s;
    -o-transition: opacity 0.2s;
    -transition: opacity 0.2s;
}

nav#menu #menu-nav li ul li { 
    background: #555; 
    display: block; 
    color: #fff;
    text-shadow: 0 -1px 0 #000;
}

nav#menu #menu-nav li ul li { 
    background: #666;
}

谢谢

Answer 1

你遇到的问题是什么？

您不应将相同的ID放在一个文档中。
不应显示子菜单：

ul＆gt; li> ul { display：none; }

也许这就是你要找的东西？

finduser.php

这是一个有效的例子： push

Answer 2

同样，你没有提到这里的实际问题，但这里有一些我看错的事情......

1：即使您没有在CSS中调用ID，您的HTML也会显示多个具有相同ID的元素......您不应该这样做。

2：你有

nav#menu #menu-nav li ul li { ... }

在这里列出3次。 - 只需添加第三个与第一个... - 第二个是你遇到一些问题的地方。

为你的

nav#menu #menu-nav li ul li { 
background: #555; 
display: block; 
color: #fff;
text-shadow: 0 -1px 0 #000;

}

阻止，您需要添加：在第一个li之后悬停，否则这不是为您做任何事情......

3：在你的第一个

nav#menu #menu-nav li ul li { ... }

阻止，摆脱

visibility:hidden

和

opacity:0

这里不需要它们......

进行这些更改后，我让你的代码运行得很好;虽然您需要调整嵌套列表的位置......它们一直向左...

希望这会有所帮助。

HTML / CSS下拉菜单（悬停）

2 个答案: