下拉菜单：在主菜单下水平下拉列表

Question

below is my js fiddle for a drop down menu, however how do i make the secondary drop down lists a horizontal bar along the bottom of the menu.

http://jsfiddle.net/tcKvH/1/

css

#header {
height: 100px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
#content {
max-width:700px;
margin-left: auto;
margin-right: auto;
padding: 20px;
}

I am trying to build a menu like the one found here.

http://www.pauledmonds.com/

Answer 1

You need to declare #menu with position:relative, and remove that from li. This way second ul will expand to the width of #menu. Second, you need to make ul ul li { display: inline-block; } and last ul ul { width: 100%; left: 0 }

#menu li ul li {display: inline-block;}
#menu {
    display: inline-block;
    min-width: 600px;
    list-style:none;
    border-top: 1px solid #ccc;
    border-left: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    position: relative;
}
#menu > li:hover > ul {
    border: 1px solid #FF0000;
    display: block;
    left: 0;
    width: 100%;
}

Here is a link of a working example - Click here