5

右に浮かぶサブメニューを作成しようとしています。ただし、レンガの壁にぶつかったため、インラインでしか浮かびません。

http://jsfiddle.net/jspring/yD9N4/

サブメニューが親リストアイテム内に表示されているだけであることがわかります (ただし、通常より少し幅が広くなっています)。誰かがそれを右に浮かせるのを手伝ってくれたら、それは素晴らしいことです!

<ul class="cl-menu">
    <li>Link 1
        <ul>
            <li><a href="#">Sub Link 1</a>
            </li>
            <li><a href="#">Sub Link 2</a>
            </li>
        </ul>
    </li>
    <li>Link 2
        <ul>
            <li><a href="#">Sub Link 1</a>
            </li>
            <li><a href="#">Sub Link 2</a>
            </li>
        </ul>
    </li>
</ul>

.cl-menu{
    list-style:none outside none;
    display:inline-table;
    position:relative;
    width:100%;
}
.cl-menu li{
    list-style:none outside none;
    border-bottom:1px solid #cccccc;
    padding:5px 1px;
    text-align:center;  

}
.cl-menu > li:hover{

    /*background-color:#303030;*/
    background-color:#66819C;
    color:#FFF;
    font-weight:bold;
    text-decoration:underline;
    opacity:1;
}

.cl-menu li ul{
    display:none;
}

.cl-menu li:hover ul{
    display:block;
    opacity:0.8;
    background-color:#FFF;
    margin-top:4px;
    font-weight:normal !important;
}

.cl-menu li ul li{
    border-bottom:1px solid #cccccc !important;
    border-top:none !important;
    border-left:none !important;
    border-right:none !important;
}

.cl-menu li ul li a{
    color:#000;
    text-decoration:none;
}

.cl-menu li ul li a:hover{
    color:#390;
    text-decoration:underline;
}

.cl-menu ul:after{
    content:"";
    clear:both;
    display:block;
}
4

1 に答える 1

3

サブメニューにはposition:absoluteプロパティを使用します。サブメニューを適切に配置するには、正しいcss プロパティを使用します。

    .cl-menu li ul
     { 
         display:none; 
         position:absolute;
         right:20%; 
     }
于 2013-06-26T10:14:06.620 に答える