I'm trying to make a sub menu appear below my main menu that is the same width as the main menu, which has a fixed width. I want the sub menu to adjust its width based on the number of links it contains. Is this even possible? Here's the code I have so far:
CSS
#nav a{
width: 115px;
height: 15px;
text-decoration:none;
display:block;
font-size:12px;
font-family: Arial, Verdana, Helvetica, sans-serif;
text-align:center;
color:#666666;
border: 1px solid green;
float: right;
padding: 10px 5px 5px 5px;
z-index: 2000;
}
#nav a li{
width: 115px;
height: 15px;
}
#nav:last-child {
border-right: 1px solid #999999;
}
#nav a:active, #nav a:hover, #nav a:focus {
background: #999 ;
}
#nav li {
display:block;
float:left;
}
#nav li:last-child {
border-right: 1px solid #999999;
}
#nav li ul {
display: table;
height: 30px;
position: absolute;
left: -9999px;
}
#nav li:hover ul {
left: 0;
top: 30px;
}
#nav li li {
display: table-cell;
}
#nav li li a{
text-decoration:none;
display:block;
font-size:9px;
font-family: Arial, Verdana, Helvetica, sans-serif;
text-align:center;
border-left: 1px solid #999999;
color:#666666;
z-index: 10000;
padding: 5px 5px 10px 5px;
}
HTML
<ul id="nav">
<li><a href="#">LINK1</a></li>
<li><a href="#">LINK2</a>
<ul>
<li><a href="#">LINK3 <br> MORE TEXT</a></li>
<li><a href="#">LINK4</a></li>
<li><a href="#">LINK5</a></li>
<li><a href="#">LINK6</a></li>
</ul></li>
<li><a href="#">LINK7</a></li>
<li><a href="#">LINK8</a>
<ul>
<li><a href="#">LINK9 <br> MORE TEXT</a></li>
<li><a href="#">LINK10</a></li>
<li><a href="#">LINK11</a></li>
<li><a href="#">LINK12</a></li>
<li><a href="#">LINK13</a></li>
</ul></li>
</ul>
Thank you for your help!