0

このコードを見つけました: http://media02.hongkiat.com/responsive-web-nav/demo/index.htmlメニューはこちら: http://www.hongkiat.com/blog/responsive-web-nav/

そして私は私のメニューでそれをやろうとしています:

CSS:

<style type="text/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; }
</style>

HTML:

<ul id="trans-nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Products</a>
            <ul>
                <li><a href="#">Widgets</a></li>
                <li><a href="#">Thingamabobs</a></li>
                <li><a href="#">Doohickies</a></li>
            </ul>
        </li>
        <li><a href="#">Contact</a></li>
    </ul>

なんらかの理由でそれを機能させることができません。メニューをそのWebサイトのメニューと同じにするためにできること、またはそれが複雑すぎてメニューをドロップダウンメニューに変更できない場合（選択）画面のリサイズで

4

1 に答える 1

1

メディアクエリをcssしたい

メディア クエリは、メディア タイプと、幅、高さ、色などのメディア機能を使用してスタイル シートの範囲を制限する少なくとも 1 つの式で構成されます。CSS3 に追加されたメディア クエリを使用すると、コンテンツ自体を変更することなく、特定の範囲の出力デバイスに合わせてコンテンツの表示を調整できます。

詳細

https://developer.mozilla.org/en/docs/CSS/Media_queries

http://www.w3.org/TR/css3-mediaqueries/

于 2013-03-31T20:09:44.567 に答える