css - CSS下拉菜单故障

我最近更改了此网页的设计，但是即使使用了内嵌块显示选项，我的下拉菜单也会垂直（而不是水平）列出“隐藏”的项目。

这是我菜单中的html代码：

<ul id="menu">
            <li id="bordered"><a href="index.html">News</a></li>
            <li id="bordered"><a href="about.html">About</a></li>
            <li id="bordered"><a href="research.html">Research</a>    </li>
            <li id="bordered"><a href="artists.html">Artists</a>
                <ul>
                    <li id="bordered"><a href="">1234 1234</a></li>
                    <li id="bordered"><a href="">1234 1234</a></li>
                </ul></li>
            <li><a href="municipalities.html">Municipalities</a>
                <ul>
                    <li id="bordered"><a href="">1234567</a></li>
                    <li id="bordered"><a href="">1234</a>    </li>
                </ul></li>
            <li>
                <form  id="searchbox" action=" " method=" ">
                <input type="text" name="search" value="" />
                <input type="submit" value="Search" />
                </form>
            </li>
        </ul>

这是CSS：

/*header navigation menu*/
/*STYLING*/
#menu{
margin-top:2px;
font-size:0.8em;
list-style:none;
}
#menu li{
padding:1% 1.5% 1% 1.5%;
display:inline-block;
text-align:center;
vertical-align:middle;
}
#menu li a{
text-align:center;
vertical-align:middle;
font-weight:bold;
}
#bordered{
border-right:1px dotted #f9f9f3;
}
/*DROPDOWN*/
#menu li ul{
visibility:hidden;
position:absolute;
margin:1% 0 0 -2px;
border-top: 1px dotted #f9f9f3;
}
#menu li ul li{
float:left;
white-space:nowrap;
}
#menu li:hover ul, #menu li:active ul{
visibility:visible;
}

帮助将不胜感激:)

最佳答案

您应该在float:left上应用#menu li而不是display:inline-block

它可以解决您的问题，并且在inline-block不会的情况下可以在IE7上运行。

还请注意您的bordered ID。您应该使用类。

演示：JSFiddle

关于css - CSS下拉菜单故障，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/17783485/