1

最近、この Web ページのデザインを変更しましたが、インライン ブロック表示オプションを使用しているにもかかわらず、ドロップダウン メニューに「非表示」の項目が水平ではなく垂直に表示されるようになりました。

これは私のメニューの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

の代わりにfloat:leftonを適用する必要があります。#menu lidisplay:inline-block

それはあなたの問題を修正し、そうでinline-blockない場合でもIE7で動作します。

borderedまた、 IDにも注意してください。クラスを使用する必要があります。

デモ：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 に答える