0

ウェブサイトのメインコンテナの幅全体をカバーするドロップダウンメニューをデザインしようとしています。メニューの最も外側のカテゴリリンクに適用したスタイルの一部は、水平メニューの「display：inline」です。

このスタイルは親要素に適用されるため、当然、すべての子要素（サブメニュー項目、この場合はドロップダウンメニュー）もこの種の表示を継承します。子供たちのliアイテムがインライン表示されないようにする方法を見つけようとしています。縦に表示したい（標準のリストスタイル）。

私はかなり長い間この問題を解決しようとしてきましたが、成功しませんでした。

私のCSS

body{font-family:helvetica; color:white;}
a{color:white; text-decoration:none;}
a:hover{background-color:darkred;}
input{background-color:#000; color:#777; border:none; padding:5px;}
#menu{background-color:#222; padding:10px 0px 10px 0px; }
#menu li{display:inline;}
.menu-category-link{font-size:15px; font-weight:bold; padding:15px 12px 15px 12px;}
.submenu{display:none; position:absolute; margin:0px; padding:0px; margin-top:8px;}
.dropdown{width:900px; border-top:3px solid darkred; position:absolute; height:200px; background-color:#111;}
.dropdown ul li {display:block;}

私のマークアップ

<div id="main-container" style="width:900px; height:1000px; background-color:#000; margin:0px auto 0px auto;">
    <ul id="menu">
        <li><a class="menu-category-link" href="#">MEN</a>
            <ul class="submenu">
                <li>
                    <div class="dropdown"> 
                        <ul>
                            <li><a href="#">T-shirts</a></li>
                            <li><a href="#">Pants</a></li>
                            <li><a href="#">Clothes</a></li>
                            <li><a href="#">Hats</a></li>
                        </ul>
                    </div>
                </li>
            </ul>
        </li>
        <li><a class="menu-category-link" href="#">WOMEN </a>
            <ul class="submenu">
                <li>
                    <div class="dropdown"> 
                        <ul>
                            <li><a href="#">Dresses</a></li>
                            <li><a href="#">Skirts</a></li>
                            <li><a href="#">Tops</a></li>
                            <li><a href="#">Denim</a></li>
                        </ul>
                    </div>
                </li>
            </ul>
        </li>
      </ul>
</div>

私のJQuery

$(document).ready(function(){
        $("#searchfield").Watermark("Search");
        $("#menu li").hover(function(){
            $(".submenu").hide();
            $(this).children(".submenu").show();
        });
        $('.dropdown').css('display', '');
    });
4

1 に答える 1

1

#menu liドロップダウンを宣言よりも具体的にする必要があります。

#menu .dropdown ul li {display:block;}
于 2012-06-18T20:28:52.243 に答える