Set different display rule for nested list - css

Question

(Hopefully) quick question:
I have an unordered list set to display:table and li set to display:table cell, as I want the list to take up entire width of container div regardless of how many list items there are. The problem is I want a nested drop-down list to have a block display, so the items are under each other. I've done the drop-down before by setting parent list to Block, floating left, then setting the nested list to float:none.
I've tried a few things to set the nested list from table to block, but it's not doing it for me!
And I missing something simple, or is this going to work the way I want?
Here's the HTML
<div id = "headernavcontainer">
<div id = "headernav">
<ul id = "mainnav">
<li><a class = "mainnav" href="index.html">Home</a></li>
<li><a class = "mainnav" href="#">Company</a>
<ul>
<li><a class = "subnav" href="index.html">About Us</a></li>
<li><a class = "subnav" href="#">Location</a></li>
<li><a class = "subnav" href="#">Services</a></li>
</ul>
</li>
<li><a class = "mainnav" href="#">Employment</a></li>
<li><a class = "mainnav" href="#">Gallery</a></li>
<li><a class = "mainnav" href="#">Contact Us</a></li>
</ul>
</div>
</div>
And here's the CSS:
#headernavcontainer
{
width:100%;
height:50px;
background-color:gray;
margin:0;
padding:0;
}
#headernav
{
position:relative;
margin:0 auto;
padding:0;
width:960px;
background-color:gray;
}
#mainnav
{
list-style:none;
//float:left;
width:100%;
position:relative;
margin:0 auto;
padding:0;
display:table;
font-family:Century Gothic, sans-serif;
font-weight:bold;
font-size: .8em;
}
#mainnav li
{
//float:left;
margin:0;
padding:0;
position:relative;
line-height:50px;
margin-right:0;
display:table-cell;
border-right:1px #000 solid;
}
#mainnav li:nth-child(10)
{
border-right:none;
}
#mainnav a.mainnav
{
display:block;
color:#000;
background:#333;
text-decoration:none;
text-align:center;
//vertical-align:middle;
}
#mainnav a:hover
{
color:#fff;
background:red;
}
#mainnav ul
{
display:block !important;
//overflow:hidden;
background:#fff;
list-style:none;
position:absolute;
left:-9999px;
//vertical-align:middle;
background:green;
}
#mainanv ul li
{
//float:none;
//display:block;
display:block !important;
}
#mainnav li:hover ul
{
left:0;
//display:block;
}
And here's a jfiddle to help illustrate what I'm up to! http://jsfiddle.net/cEw5k/
Thanks.

Answer 1

Jsfiddle: http://jsfiddle.net/cEw5k/1/
CSS:
#mainnav li:hover ul
{
left:0;
width:100%;
display:block;
padding-left:0;
}
#mainnav li ul li {
display:block;
}
#mainnav li ul li a {
display:block;
width:95%;
padding-left:10px;
}