1

横型サブメニューで横型メニューを作ろうとしています。私は何かを試しましたが、うまくいきませんでした。上記のコードは、水平方向のメインメニューを表示するはずでした。リンクのいずれかにカーソルを合わせると、リンクの色が変わり、水平方向のサブメニューが表示されます。

htmlコード：

<div id="menu">
    <ul>

        <li style="float: left; a:hover;  "><a   href="acceuil.html"    style="color : #CBCAC7 ;">ACCEUIL</a>&nbsp;&nbsp;<img src="decoupage/puce_menu.png"   height="15"/>
        <ul>
        <li style="float: left; display: none; "><a href="#">Présentation</a>  </li>
        </ul>
        </li>
        <li style="float: left; "><a href="methodologie.html" style="color   : #CBCAC7 ;" >METHODOLOGIE</a></li>&nbsp;&nbsp;<img src="decoupage/puce_menu.png"   height="15"/>
        <li style="float: left; "><a href="references.html" style="color :   #CBCAC7 ;">REFERENCES</a>&nbsp;&nbsp;<img src="decoupage/puce_menu.png" height="15"/>
        <ul>
    <li style="float: left; display: none; "><a href="#">Urbanisme</a></li>
    <li style="float: left; display: none; "><a href="#">Tours</a></li>
    <li style="float: left; display: none; "><a href="#">Bureau</a></li>
    <li style="float: left; display: none; "><a href="#">Commerce</a></li>
    <li style="float: left; display: none; "><a href="#">Logements</a></li>
    </ul>
    </li>
        <li style="float: left; "><a href="partenaires.html" style="color :       #CBCAC7 ;">PARTENAIRES</a></li>&nbsp;&nbsp;<img src="decoupage/puce_menu.png" height="15"/>
        <li style="float: left; "><a href="contact.html" style="color :          #CBCAC7 ;">CONTACT</a></li>&nbsp;&nbsp;<img src="decoupage/puce_menu.png" height="15"/>
    </ul>
</div>

CSSコード

#menu
{ position: absolute;
right: 550px;
bottom: 460px;
z-index: 2;
font-style: italic ;
font-size: large ; 
}

#menu li.hover ul { 
display: inline;}
4

2 に答える 2

2

<ul>要素を別の要素に入れようとしていますが、要素<ul>の外にあり<li>ます。許可されていません。すべてが<li>要素内にある必要があります。たとえば、要素の<table>外側にあるすべてのもの<td>はレイアウトを壊します。

最初に HTML の構造を修正してから、css スタイルについて考えることをお勧めします。

于 2012-07-18T12:38:13.877 に答える
0

js は必要ありません: 各メニュー ポイントを水平線内のシングル インとしてフロートさせることができますdiv。周囲の div の 1 つにカーソルを合わせると、その高さが最大になるため、下に 2 つ目の水平メニュー用のスペースができます。これは、 内に既に配置されています。divoverflow:hiddendiv

また、幅を最大にすると、2 番目の水平メニューを表示するのに十分な幅になります。

第 3 に、その を小さくするz-indexと、ホバーされたアクティブなメニュー項目の幅が最大になっていても、メイン メニューの他の div をホバーして選択することができます。

于 2014-02-02T12:01:10.917 に答える