0

サイトをスクレイピングしてコンテンツを取り込むプロジェクトに取り組んでいるため、div または lis の構造を制御できません。

私が直面している問題は、メニューのドロップダウンが親メニュー項目と左揃えになっていないことです。この問題の解決に役立つ css/jquery を探しています。フィドルへのリンクは次のとおりです: http://jsfiddle.net/9gQCH/3/

CSS & HTML

    #item1, #item2 {        
       background-color:#efefef;           
       display:inline;
       font-size:14px;
       margin-right:3px; 
       padding:5px; 
    }

    .Submenu {
        display: none;
        padding: 4px; 
        margin-top:18px;
        background-repeat:no-repeat;
    }  

    .Menu li:hover .Submenu{
        background-color:orange;
        display:inline;
        color: black;
        padding: 3px 5px;
        position:absolute;
    }



    <div class="Menu">
    <li id="item2">
        High level Item 1
        <div class="Submenu">
            <div>
                   Nested Item 1         
            </div> 
            <div>
                   Nested Item 2       
            </div>         
        </div>
    </li>  

    <li id="item2">
        High level Item 2
        <div class="Submenu">
            <div>
                   Nested Item 3         
            </div> 
            <div>
                   Nested Item 4       
            </div>         
        </div>
    </li> 
    </div>
4

2 に答える 2

1

http://jsfiddle.net/9gQCH/7/

JQuery の使用

$(".Submenu").each(function(){
    $(this).css("left",$(this).parent().offset().left);
});​
于 2012-11-16T21:32:47.577 に答える
0

これには jQuery は必要ありません。これを CSS に追加するだけです。

.Menu li { position: relative; }

更新 (クラスleft: 0;に追加):.Submenu

.Menu li:hover .Submenu{
    background-color:orange;
    display:inline;
    color: black;
    padding: 3px 5px;
    position:absolute;

    left:0; // <------
}

top(必要に応じてプロパティを追加することもできます)

フィドル: http://jsfiddle.net/kboucher/gbhtC/

于 2012-11-16T21:08:34.163 に答える