1

サブメニューに関して 2 つの問題があります。Twitter Bootstrap 3 を使用しています。このバージョンはサブメニューをサポートしていないため、使用できるようにする CSS コードを見つけました。

しかし今、私は2つの問題を抱えています:

1)。サブメニューの配置。子要素は親要素の下にありません。彼らは固定された位置を持っています。私は多くのコードを変更しましたが、うまくいきませんでした...

2)。2 つ目の問題は、サブメニューに集中できない場合があることです。この例は、'contacts' の下のデモ テンプレートの英語版で見ることができます: http://www.01kuzma.tk/en/ 最初の問題はここで見ることができます: http://www.01kuzma.tk/ru/ロシア語版のデモ テンプレートです。サブメニューのスタイルを設定するために使用しているコードは次のとおりです。

.custom div.moduletable ul.nav, html body div#page div#midlle.row div.col-md-6   div#component nav.navbar div.moduletable ul.nav{
display: block; position: static; margin-bottom: 5px; 
}

.dropdown-submenu{
    position:relative;
}

.dropdown-submenu > .dropdown-menu
{
   top:100%;
   left:80%;
   margin-top:-6px;
   margin-left:-1px;
   -webkit-border-radius:0 6px 6px 6px;
   -moz-border-radius:0 6px 6px 6px;
   border-radius:0 6px 6px 6px;
}

.dropdown-submenu:hover > .dropdown-menu{
   display:block;
}

.dropdown-submenu > a:after{
   display:block;
   content:" ";
   float:right;
   width:0;
   height:0;
   border-color:transparent;
   border-style:solid;
   border-width:5px 5px 0;
   border-top-color:#cccccc;
   margin-top:5px;
   margin-right:-10px;
}

.dropdown-submenu:hover > a:after{
border-top-color:#ffffff;
}

style0.css という名前のメインの css ファイル よろしくお願いします!

4

1 に答える 1

1

私はこれを簡単に作成しました。役立つかもしれません：

http://jsfiddle.net/RUN6S/1/

HTML :

<div class="menu">
    <ul class="list">
        <li class="item"><a href="#">Contains sub menu</a>
            <ul class="list">
                <li class="item"><a href="">Sub item</a></li>
                <li class="item"><a href="">Sub item</a></li>
            </ul>
        </li>
        <li class="item"><a href="#">Contains sub menu</a>
            <ul class="list">
                <li><a href="">Sub item</a></li>
                <li class="item">
                    <a href="">Sub item</a>
                    <ul class="list">
                        <li class="item"><a href="">Sub item</a></li>
                        <li class="item"><a href="">Sub item</a></li>
                    </ul>
                </li>
            </ul>
        </li>        
    </ul>
</div>

CSS :

.menu
{
    height: 25px;
    background-color: #111111;
}

.menu a 
{
    color : gray;
    text-decoration : none;    
}

.menu a:hover
{
    color : white;
    text-decoration : none;    
}

.list
{
    list-style-type : none;
    padding:0;
}

.item
{
    position     : relative;
    display      : inline-block;
    vertical-align : top;
    width        : 150px;   
}

.item>.list
{
    display : none;
    background-color : #222222;
}

.item:hover>.list
{
    display : block;    
}
于 2013-11-03T15:41:02.660 に答える