css下拉菜单故障

Question

我最近更改了此网页的设计，但现在我的下拉菜单列出了垂直而不是水平的“隐藏”元素，即使我使用了内嵌 block 显示选项也是如此。

这是我菜单中的 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;
}

帮助将不胜感激:)

Answer 1

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

它解决了您的问题，并且可以在 IE7 上运行，而 inline-block 则不能。

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

演示:JSFiddle