1

私は少し立ち往生しています。サブメニューをその下に表示できるようにする、幅 1024 ピクセルの水平ナビゲーション バーを作成しようとしています。しかし、サブメニューの幅も 1024px にし、ナビゲーション バーのすぐ下に垂直方向に並べて表示する必要があります。

li現時点ではサブメニューが表示されますが、その左側は、ホバリングしている現在の左側に固定されています。どうすればこれを修正できますか?

ありがとう！

編集: マウスオーバーすると、次のようになります: http://eventav.biz/site/example.jpg

これまでに行ったことへのリンク - http://www.eventav.biz/site/

ul.top_menu {
        position:               relative;
        margin:                 0;
        margin-bottom:          -1px;
        list-style:             none;
        display:                table;
        width:                  1024px;
        border:                 1px solid #111111;
        border-bottom:          1px solid #000000;
        border-radius:          10px 10px 0px 0px;
    }

    .top_menu li {
        display:                block;
        position:               relative;
        border-right:           1px solid #111111;
        float:                  left;
        margin:                 0px;
        display:                table-cell;
        vertical-align:         middle;
    }

    .top_menu li:first-child {
        border-left:            1px solid #111111;
    }

    .top_menu li a {
        display:                block;
        text-decoration:        none;
        color:                  #000000;
        text-shadow:            3px 3px 8px #3A3A3A;
        padding:                15px;
        height:                 30px;
        display:                table-cell;
        vertical-align:         middle;
        margin:                 0px;
    }

    #top_menu_item ul { 
        display:                none;
        margin:                 0px;
    }

    #top_menu_item:hover ul {
      display:                  block;
      position:                 fixed;
      margin:                   0;
    }

    #top_menu_item:hover li {
        width: 1024px;
        background-color: #666;
      text-align:               left;
      color:                    #FFF;
      font-size:                12px;
      margin:                   0px;
    }

<ul class="top_menu">
                        <li id="top_menu_item"><a href="#">HOME</a></li>
                        <li id="top_menu_item"><a href="#">OUR SERVICES</a>
                            <ul><li id="top_menu_item"><a href="#">test</a></li></ul>
                        </li>
                        <li id="top_menu_item"><a href="#">EXAMPLES OF OUR WORK</a>
                            <ul><li id="top_menu_item"><a href="#">test</a></li></ul>
                        </li>
                        <li id="top_menu_item"><a href="#">CONTACT US</a></li>
                    </ul>
4

2 に答える 2

2

child から固定位置を削除し、ulに置き換えposition:absoluteます。を追加してから、親からleft:0px削除します。position:relativeli

動作中のjsFiddleの例

#top_menu_item:hover ul {
    display: block;
    position: fixed; /* Change this to position:absolute; */
    left:0px; /* Add this */
}

.top_menu li {
    display: block;
    position: relative; /* Remove this */
}
于 2013-11-10T18:56:10.807 に答える