メニューのホバリングの最初の問題は以下で解決されましたが、タグが流動的な幅<li>
であってもドロップリストがタグの幅を満たすようにする方法を検討しています。<li>
例えば<li><a style="padding: 0 20px;>Test</a></li>
サイトのメニュー システムの基本的なデザインを作成しましたが、再ドラフトの後、強制的な幅ではなく流動的な幅のリンクとドロップリストを作成することにしました。問題は、リンクにカーソルを合わせてドロップリストを表示すると、サブリンクが上から下ではなく横に並び、次のリンクがナビゲーション システムから除外されることです。誰かが私のコードが間違っている場所を教えてくれたら、とても助かります!
HTML:
<div id="navStore">
<ul id="nav">
<li>
<a href="#">Home</a>
<ul>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
</ul>
</li>
<li>
<a href="#">Link 2</a>
<ul>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
</ul>
</li>
</ul>
</div>
<div id="wrapper"></div>
CSS:
* {
color: RGB(0, 0, 0);
font: 14px Arial;
margin: 0;
padding: 0;
text-decoration: none;
}
ul {
list-style: none;
}
#navStore {
background: RGB(100, 100, 100);
height: 35px;
width: 100%;
}
#nav {
margin: 0 auto;
width: 980px;
}
#nav li {
display: inline-block;
}
#nav li:hover > a {
background: RGB(255, 255, 255);
color: RGB(100, 100, 100);
}
#nav li a {
background: RGB(100, 100, 100);
color: RGB(255, 255, 255);
display: inline-block;
height: 35px;
line-height: 35px;
padding: 0 20px;
}
#nav li ul {
border: 1px solid RGB(0, 0, 0);
display: none;
overflow: hidden;
}
#nav li:hover > ul {
display: block;
}
#nav li ul li {
float: left;
}
#nav li ul li a {
background: red;
float: left;
height: 20px;
line-height: 20px;
width: 100%;
}
#nav li ul li a:hover {
background: blue;
}
#wrapper {
margin: 0 auto;
width: 980px;
}