メインメニュー項目の下にサブメニューを追加しようとしていますが、失敗しました。display:none
サブメニューを非表示にする、マウスがメインメニューの上にあるときに表示するなど、CSSのタグのいくつかに追加しましdisplay:block
たが、どれも機能しませんでした。間違った場所に追加したのかもしれません。
乱雑なコードを処理しないように、欠陥のあるコードをすべてクリアしました。代わりに、それを変更するための明確なコードを提供します。
マウスが親メニューの上にない限り、サブメニューは表示されません。また、サブメニューはその親メニューのすぐ下に表示されます。
前もって感謝します
CSS
<style>
.menu{
width: 100%;
background-color: #666666; }
.menu ul{
margin: 0; padding: 0;
float: left;}
.menu ul li{
display: inline;
position: relative;}
.menu ul li a{
float: left; text-decoration: none;
color: white;
padding: 10.5px 11px;
background-color: #333; }
.menu ul li a:hover, .menu ul li .current{
color: #fff;
background-color:#0b75b2;}
</style>
HTML
<div class="menu">
<ul>
<li><a href="#">HOME</a>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Home short</a></li>
<li><a href="#">Home very long</a></li>
</ul>
</li>
<li><a href="#">ADMINISTRATOR</a>
<ul>
<li><a href="#">Admin</a></li>
<li><a href="#">Admin short</a></li>
</ul>
</li>
<li><a href="#">STAFF</a>
<ul>
<li><a href="#">staff</a></li>
</ul>
</li>
<li><a href="#">LOGOUT</a></li>
</ul>
<br style="clear:left"/>
</div>