0

(display:inline) を使用して水平メニューを作成することができ、sousMenu のおかげでドロップ メニューができました。私の問題は、ホバーした要素に関係なく、すべてのサブメニューが同じ場所に表示されることです。これを回避するにはどうすればよいですか?

これまでの私のメニューコード:

<ul>            
 <li><a href="Index.html">Home</a></li>
 <li class="sousMenu">About Us
  <ul>
   <li><a href="#">Board of Directors</a></li>
   </br>
   <li><a href="#">Student Profiles</a></li>
   </br>
   <li><a href="#">Projects</a></li>
  </ul>
</li>
<li class="sousMenu">Get Involved
 <ul>
  <li><a href="#">Donations</a></li>
</br>
  <li><a href="#">Job Board</a></li>
</br>
  <li><a href="#">Join</a></li>
 </ul>
</li>
<li class="sousMenu">Resources
 <ul>
  <li><a href="#">Connections</a></li>
  </br>
  <li><a href="#">Gallery</a></li>
  </br>
  <li><a href="#">Tours</a></li>
 </ul>
</li>

CSS:

#navcontainer ul {
 /*margin: 0;*/
 margin-left: auto; 
 margin-right: auto;
 padding: 0;
 top:180;
 right:20;
 width:800px;
 list-style-type: none;
 text-align: center;
 position: absolute;
 color: #fff;
 background-color: #003300;
 padding: .2em 1em;
}

#navcontainer ul li { 
 display: inline;
 padding-left:2cm; 
}

#navcontainer ul li a { 
 text-decoration: none;
 color: #fff;
 background-color: #030;
}

#navcontainer ul li a:hover {
 color: #fff;
 background-color: #000;
}

.sousMenu:hover ul {
 display: block;
}

.sousMenu ul {
 text-align: center;
 display: none;
 list-style-type: none;
}​
4

1 に答える 1

0

手始めに、親リスト項目を に、子リスト項目を に設定してみてくださいposition: relative。目的の効果を得るために、コードにその他のわずかな変更を加えました。ulposition: absolute

CSSは次のとおりです。

* {
margin: 0;
padding: 0;
vertical-align: baseline;
}

li {
list-style-type: none;
}
ul.main li {
position: relative;
display: inline-block;
}

.main li:hover > ul {
display: block;
}

ul.sub {
position: absolute;
display: none;
top: 100%;
left: 0;
}

ul.sub li {
display: block;
}

また、HTML を少しクリーンアップしました。</ul>終了タグもありませんでした:

<ul class="main">            
    <li><a href="Index.html">Home</a></li>
    <li class="sousMenu">About Us
        <ul class="sub about">
            <li><a href="#">Board of Directors</a></li>
            <li><a href="#">Student Profiles</a></li>
            <li><a href="#">Projects</a></li>
        </ul>
    </li>
    <li class="sousMenu">Get Involved
        <ul class="sub get-involved">
            <li><a href="#">Donations</a></li>
            <li><a href="#">Job Board</a></li>
            <li><a href="#">Join</a></li>
        </ul>
    </li>
    <li class="sousMenu">Resources
        <ul class="sub resources">
            <li><a href="#">Connections</a></li>
            <li><a href="#">Gallery</a></li>
            <li><a href="#">Tours</a></li>
        </ul>
    </li>
</ul>

これがフィドルです：http://jsfiddle.net/vXhZb/2/

于 2014-04-22T14:24:38.487 に答える