html - 具有不继承内联显示的下拉菜单的内联样式菜单

Question

我正在尝试设计一个覆盖网站主容器整个宽度的下拉菜单。我应用于菜单最外层类别链接的部分样式是水平菜单的“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', '');
    });

Answer 1

你需要让你的下拉菜单比你的#menu li声明更具体:

#menu .dropdown ul li {display:block;}