1

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

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

非常感谢您的帮助:)

4

2 回答 2

0

您应该应用 a float:lefton#menu li而不是 adisplay:inline-block

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

还要小心你的bordered身份证。你应该使用类。

演示：JSFiddle

于 2013-07-22T09:10:56.893 回答
0

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

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

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

于 2013-07-22T09:12:57.690 回答