0

ウェブサイトのナビゲーション メニューがあります。

ここにHTMLがあります

<ul id="trans-nav">
    <li><a href="#">About Us</a>
        <ul>
        <li><a href="/contact">Contact Us</a></li>
        <li><a href="/login">Login</a></li>
        </ul>
    </li>
</ul>

ご覧のとおり、リンクの下にドロップダウン (サブメニュー) がありますが、サブ メニューはメニューの下のページ コンテンツの下に表示されています。

サブメニューをページコンテンツの後ろではなく上に表示するにはどうすればよいですか?

CSSは次のとおりです。

#trans-nav {list-style-type: none; height: 40px; padding: 0; margin: 0; }
#trans-nav { list-style-type: none; height: 40px; padding: 0; margin: 0; }
#trans-nav li { float: left; position: relative; padding: 0; line-height: 40px; }
#trans-nav li:hover { background-position: 0 -40px; }
#trans-nav li a { display: block; padding: 0 15px; color: #666666; text-decoration: none; }
#trans-nav li a:hover { background-color:#F36F25; color: #eeeeee; }
#trans-nav li ul { opacity: 0; position: absolute; left: 0; width: 8em; background: #EEEEEE; list-style-type: none; padding: 0; margin: 0; }
#trans-nav li:hover ul { opacity: 1; }
#trans-nav li ul li { float: none; position: static; height: 0; line-height: 0; background: none; }
#trans-nav li:hover ul li { height: 30px; line-height: 30px; }
#trans-nav li ul li a { background: #EEEEEE; }
#trans-nav li ul li a:hover { background: #666666; color:#EEEEEE; }

#trans-nav li { -webkit-transition: all 0.2s; }
#trans-nav li a { -webkit-transition: all 0.5s; }
#trans-nav li ul { -webkit-transition: all 1s; }
#trans-nav li ul li { -webkit-transition: height 0.5s; }

またフィドル: http://jsfiddle.net/charliejsford/SAXmG/

4

2 に答える 2

0

を定義していないようz-indexです。これがないと、ページの後半に表示される要素が上に表示されます。

これを修正するにはposition:relative、リストのスタイルに追加することをお勧めします。その後、z-index:1000または他の適切な番号を追加することもできます。

于 2013-03-31T21:54:00.093 に答える