-1

メインメニュー項目の下にサブメニューを追加しようとしていますが、失敗しました。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>
4

1 に答える 1

1

への変更.menu ul li ul{ position: absolute;}

問題を正しく理解していれば、問題なく動作します。

それで..

.menu ul li ul{
position:absolute;
margin-top:40px;
width:150px;}

.menu ul li ul li{
display:block;}

ホバリングするまで非表示にするには、.menu ul li ul{ display:none; } .menu ul li:hover ul{display:block; }

于 2013-02-27T12:11:55.803 に答える