Question

I am trying to design a dropdown menu that covers the entire width of the main container of the website. Part of the styling that I have applied to the outtermost category links of the menu is “display:inline” for a horizontal menu.

Since, this style is applied to the parent element, natrually, all children elements (sub-menu items, in this case the dropdown menu) inherit this kind of display as well. I am trying to find a way to prevent the children li items from having an inline display. I want their display to be vertical (standard list style).

I have been trying to solve this problem for a quite a while now with no success.

My 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;}

My Markup

<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>

My JQuery

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

Answer 1

You need to make your drop-down more specific than your #menu li declaration:

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