Question

我最近改变了这个网页的设计，但现在我的下拉菜单垂直列出了“隐藏”项目，而不是水平，即使我使用内联块显示选项。

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

您应该在float:left而不是#menu li

上应用display:inline-block

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

还要小心bordered个ID。你应该使用类。

演示：JSFiddle

Answer 2

尝试给#menu li ul更大的宽度：

#menu li ul{
   visibility:hidden;
   position:absolute;
   border-top: 1px dotted #f9f9f3;
   width: 10em;
}

并删除 margin:1% 0 0 -2px;

css下拉菜单故障

2 个答案: