I've created a full-width CSS menu that spans the entire screen, but I'm struggling to figure out how to make the corresponding subnav items appear below their parent items.
Is it even possible to achieve this design? I haven't been able to find any resources online that show exactly what I want. However, I'm convinced that it must be achievable, right?
The number of top menu items should be flexible so that, regardless of how many there are, the menu will adapt accordingly.
Click on the link above to view the current state of my code in the JSFiddle.
HTML:
<div class="nav">
<ul id="css3menu1" class="topmenu">
<li class="link"><a href="/content/home.php">Home</a>
</li>
<li class="link"><a href="/content/products.php">Products</a>
<ul>
<li class="sublink"><a href="/content/products.php">Sub Products</a></li>
<li class="sublink"><a href="/content/switchboards_distribution_panels.php">Switchboards</a></li>
</ul>
</li>
<li class="link"><a href="/content/solutions.php">Solutions</a>
</li>
<li class="link"><a href="/content/case_studies.php">Case Studies</a>
</li>
<li class="link"><a href="/content/downloads.php">Downloads</a>
</li>
<li class="link"><a href="/content/careers.php">Careers</a>
</li>
<li class="link"><a href="/content/contact.php">Contact</a>
</li>
</ul>
</div>
CSS:
ul#css3menu1,ul#css3menu1 ul{
margin:0;
list-style:none;
padding:0;
z-index:5000;
}
ul#css3menu1 ul{
display:none;
position:absolute;
left:0;
top:100%;
padding:10px 10px 10px 10px;
margin:0px 0 0 -13px;
background-color:#fff;
}
ul#css3menu1 li:hover>ul{
display:inline-block;
}
ul#css3menu1 li:hover li{
}
ul#css3menu1 li{
display:table-cell;
/*white-space:nowrap;*/
font-size:0;
color:#000;
}
ul#css3menu1 li:hover{
z-index:1;
}
ul#css3menu1{
font-size:0;
z-index:999;
position:relative;
display:table;
table-layout:fixed;
width:100%;
zoom:1;
padding:0;
*display:inline;
}
* html ul#css3menu1 li a{
display:block;
}
ul#css3menu1>li{
margin:0;
}
ul#css3menu1 .link a:active, ul#css3menu1 .link a:focus{
outline-style:none;
}
ul#css3menu1 .link a{
display:block;
vertical-align:middle;
text-align:center;
text-decoration:none;
font-size:14px;
color:#777777;
cursor:pointer;
padding:23px 9px 24px;
font-weight:bold;
transition:all ease-in-out 0.4s;
border-right:1px solid #eef1f1 !important;
letter-spacing:0px;
}
ul#css3menu1 .link a:last-of-type{
border-right:0;
}
ul#css3menu1 .link a.selected{
background-color:#E4E8E8;
}
ul#css3menu1 .link a:hover{
background-color:#E4E8E8;
transition:all ease-in-out 0.4s;
}
ul#css3menu1 ul li{
float:none;
display:inherit;
margin:10px 0 0;
}
ul#css3menu1 ul ul{
margin-left:-10px;
}
ul#css3menu1 ul a{
text-align:left;
padding:4px;
font:14px Tahoma;
color:#FFF;
text-decoration:none;
}
ul#css3menu1 li:hover>a,ul#css3menu1 li a.pressed{
text-decoration:none;
}
ul#css3menu1 span{
display:block;
overflow:visible;
background-position:right center;
background-repeat:no-repeat;
padding-right:0px;
}
ul#css3menu1 ul li:hover>a,ul#css3menu1 ul li a.pressed{
color:#666;
text-decoration:none;
}
ul#css3menu1 li.topfirst>a{
border-width:0;
}
ul#css3menu1 li.toplast>a{
}