css で作成したドロップダウン メニューがあり、現時点では 5 つの li が表示されています。li の 1 つにカーソルを合わせると、それが強調表示され、ドロップ ダウン効果が発生し、次の ul がその下に表示されます。したがって、基本的には最初のオプション セットから選択することができ、最初のオプション セットにカーソルを合わせると、2 番目のオプション セットが表示されます。私がやりたいのは、2 番目のオプション セットにカーソルを合わせると 3 番目のオプション セットが表示され、この 3 番目のオプション セットが 2 番目のオプションの右側に表示されるようにすることです。
私がやりたいことへのリンク: http://cssmenumaker.com/menu/opera-drop-down-menu
これが私のhtmlです。li の説明は最終的なものではないことに注意してください。後でリンクの内容を変更します。
<li><a href="#">Home</a>
<ul class="subforums">
<li><a href="#">Elite's</a></li>
<li><a href="#">Newbs</a></li>
<li><a href="#">Subscribers</a></li>
</ul>
</li>
<li><a href="#">Samples</a>
<ul class="subsites">
<li><a href="#">Architecture</a></li>
<li><a href="#">Furniture</a></li>
</ul>
</li>
<li><a href="#">Workshop</a>
<ul class="subcontactus">
<li><a href="#">By Phone</a></li>
<li><a href="#">By e-mail</a></li>
<li><a href="#">By Text</a></li>
</ul>
</li>
<li><a href="#">About</a>
<ul class="subabout">
<li><a href="#">The Team</a></li>
<li><a href="#">Our Story</a></li>
<li><a href="#">Our Goal</a></li>
</ul>
</li>
<li><a href="#">Contact Us</a>
<ul class="subsignup">
<li><a href="#">Find Out More</a></li>
<li><a href="#">Costs</a></li>
<li><a href="#">Paying Methods</a></li>
</ul>
</li>
</ul>
` 注: 投稿したばかりのすべての html の前に ul 開始タグがありますが、何らかの理由でここに置くことができません。
そしてCSS：
navmenu は、ドロップダウン メニュー全体の開始 ul の ID です。 `#navmenu, #navmenu ul{ list-style-type: none; }
#navmenu li{
width: 125px;
text-align: center;
position: relative;
float: left;
margin-right: 4px;
}
#navmenu a{
text-decoration: none;
display: block;
width: 125px;
height: 25px;
line-height: 25px;
background-color: #00cff0;
border: 1px solid #ccc;
border-radius: 5px;
color: white;
}
#navmenu li:hover > a{
background-color: #00d3f5;
}
#navmenu li:hover a:hover{
font-size: 105%;
}
#navmenu ul{
display: block;
position:absolute;
top: 26px;
left: 0;
visibility: hidden;
margin: 0;
padding: 0;
}
#navmenu li:hover ul{
visibility: visible;
}
#navmenu{
margin: auto;
width: 700px;
}`#navmenu, #navmenu ul{
list-style-type: none;
}
#navmenu li{
width: 125px;
text-align: center;
position: relative;
float: left;
margin-right: 4px;
}
#navmenu a{
text-decoration: none;
display: block;
width: 125px;
height: 25px;
line-height: 25px;
background-color: #00cff0;
border: 1px solid #ccc;
border-radius: 5px;
color: white;
}
#navmenu li:hover > a{
background-color: #00d3f5;
}
#navmenu li:hover a:hover{
font-size: 105%;
}
#navmenu ul{
display: block;
position:absolute;
top: 26px;
left: 0;
visibility: hidden;
margin: 0;
padding: 0;
}
#navmenu li:hover ul{
visibility: visible;
}
#navmenu{
margin: auto;
width: 700px;
}
これを理解して、私を助けてくれることを願っています。読んでくれてありがとう。:)