Question

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

内联样式菜单，其下拉菜单不会继承内联显示

1 个答案: