0

トップレベルのアイテムでうまく機能するドロップダウンメニューを作成しました。しかし、ホバーされた項目の右側に移動するために、第 2 レベルのメニュー項目にどの CSS を追加すればよいかわかりません。

ここに私のHTMLコンテンツがあります：

<ul class="menu">
<li><a href="#" >item1</a></li>
<li><a href="#">item2</a></li>
<li><a href="#">item3</a>
    <ul>
        <li><a href="#">subitem1</a></li>
        <li><a href="#">subitem2</a></li>
        <li><a href="#">subitem3</a>
            <ul>
                <li><a href="#">subsubitem1</a></li>
                <li><a href="#">subsubitem2</a></li>
            </ul>
        </li>
        <li><a href="#">subitem4</a></li>
        <li><a href="#">subitem5</a></li>

    </ul>
</li>
<li><a href="#">item4</a></li>
<li><a href="#">item5</a></li>
</ul>

そして私の実際のCSS：

.menu {
    border:none;
    border:0px;
    margin:0px;
    padding:0px;
    font: 67.5%"Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
    font-size:14px;
    font-weight:bold;
}

.menu ul {
    background:#333333;
    height:35px;
    list-style:none;
    margin:0;
    padding:0;
}

.menu li {
    float:left;
    padding:0px;
}

.menu li a {
    background:#333333 url("seperator.gif") bottom right no-repeat;
    color:#cccccc;
    display:block;
    font-weight:normal;
    line-height:35px;
    margin:0px;
    padding:0px 25px;
    text-align:center;
    text-decoration:none;
}

.menu li a:hover, .menu ul li:hover a {
    background: #2580a2 url("hover.gif") bottom center no-repeat;
    color:#FFFFFF;
    text-decoration:none;
}

.menu li ul {
    background:#333333;
    display:none;
    height:auto;
    padding:0px;
    margin:0px;
    border:0px;
    position:absolute;
    width:225px;
    z-index:200;
    /*top:1em;
    /*left:0;*/
}

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

.menu li li {
    background:url('sub_sep.gif') bottom left no-repeat;
    display:block;
    float:none;
    margin:0px;
    padding:0px;
    width:225px;
}

.menu li:hover li a {
    background:none;
}

.menu li ul a {
    display:block;
    height:35px;
    font-size:12px;
    font-style:normal;
    margin:0px;
    padding:0px 10px 0px 15px;
    text-align:left;
}

.menu li ul a:hover, .menu li ul li:hover a {
    background:#2580a2 url('hover_sub.gif') center left no-repeat;
    border:0px;
    color:#ffffff;
    text-decoration:none;
}

jsfiddle

リストメニューのサブメニューのサブメニューを作成しようとしていて、これは機能するかもしれないと言われましたが、CSS に追加する方法がわかりません。そして、CSSに入れれば、スタイルが適用されるかどうかにかかわらず、スタイルが適用されます。

[解決済み]さて、私はこれを解決することができました(そして今、幅とホバーのスタイルを設定する必要があります)。私がしたことは、以下の回答からcssをチャックし、このcssにも追加しました

.tabs .widget ul, .tabs .widget ul {
    margin: 0;
    padding: 0;
    overflow: visible;
    list-style: none;
}

何らかの理由で {overflow:hidden; に設定されていました。(wtf!) だから私はそれを変更し、今では正しくオーバーフローしているように見えました。

メニューhtmlで、私は変更しました

<ul>
    <li><a href="#" >item1</a></li>
    ....
</ul>

に

<ul class="menu_top">
    <li><a href="#" >item1</a></li>
    ....
</ul>

指定されたhtmlの1行目。あとはスタイル {width:225px; みんなの助けに感謝します!

4

1 に答える 1

0

次の CSS を使用できます。

ul.menu_top {
    float:left;
    width:70%;
    margin: 8px 100px 0 0;
    border-radius:4px;
    background-color: #c4092a;
    list-style-type: none;
    z-index:+1;
}
ul.menu_top li {
    float: left;
    position: relative;
    margin: 4px 2em 4px 4px;
    padding: 0;
}
ul.menu_top li ul {
    visibility: hidden;
    position: absolute;
    top:100%;
    left:0px;
    padding:0.5em;
    list-style-type: none;
    white-space:nowrap;
    background-color: #c4092a;
    border: 1px solid white;
    border-radius:4px;
    z-index:+1;
}
ul.menu_top li:hover > ul {
    visibility: visible;
    z-index: +2;
}
ul.menu_top li ul li {
    padding: 0;
    margin: 12px 4px;
    float:none;
    border:0;
    min-width:3em;
}
ul.menu_top li ul li ul {
    top:0;
    left:99%;
}
ul.menu_top a {
    background-color:#c4092a;
    color:white;
    text-decoration:none;
    padding:4px;
    font-size:18px
}
ul.menu_top a:hover, ul.menu_top a.haschildren.childselected, ul.menu_top a.selected {
    background-color:white;
    color:blue;
    text-decoration:none;
}
ul.menu_top li a.haschildren:after {
    content:"\00A0\00A0\25BC";
}
a {
    color:#0000aa;
    background-color:inherit;
}
body, ul, li { /* normalize for old browsers*/
    margin:0;
    padding:0;
}

それは私の古い質問から取られました。この.menu_topクラスは、ナビゲーション メニューと別の順序付けられていないリストを区別するためだけに使用されます。

JSFiddle コードと結果ページ

于 2013-08-05T23:26:45.943 に答える