Hello everyone,
I’m designing a drop down menu in html & css, and I’m running into a problem in that I’m trying to make the 2nd sublist appear when the mouse hovers over the link item. This menu is designed at each level specially so it looks how I want it to.
html lists and sublists:
<div id="personalMenuWrapper">
<div id="navMenu">
<ul>
<li><div id="textalign">health</div>
<ul>
<li><div id="subMenu1">skin care</div>
<ul>
<li><div id="subMenu2"><a href="#">under construction</a></div></li>
<li><div id="subMenu2"><a href="#">under construction</a></div></li>
</ul>
</li>
<li><div id="subMenu1">weight loss</div>
<ul>
<li><div id="subMenu2">fitness</div>
<ul>
<li><a href="#">under construction</a></li>
<li><a href="#">under construction</a></li>
</ul>
</li>
<li><div id="subMenu2">dieting</div>
<ul>
<li>under construction</li>
<li>under construction</li>
</ul>
</li>
</ul>
</ul>
</li>
</ul>
<ul>
<li><div id="textalign">insurance</div>
<ul>
<li><div id="subMenu1">health insurance</div>
<ul>
<li><div id="subMenu2"><a href="#">under construction</a></div></li>
<li><div id="subMenu2"><a href="#">under construction</a></div></li>
</ul>
</li>
<li><div id="subMenu1">auto insurance</div>
<ul>
<li><div id="subMenu2"><a href="#">under construction</a></div></li>
<li><div id="subMenu2"><a href="#">under construction</a></div></li>
</ul>
</li>
<li><div id="subMenu1">home insurance</div>
<ul>
<li><div id="subMenu2"><a href="#">under construction</a></div></li>
<li><div id="subMenu2"><a href="#">under construction</a></div></li>
</ul>
</li>
<li><div id="subMenu1">annuities</div>
<ul>
<li><div id="subMenu2"><a href="#">under construction</a></div></li>
<li><div id="subMenu2"><a href="#">under construction</a></div></li>
</ul>
</li>
</ul>
</li>
</ul>
<ul>
<li><div id="textalign">shopping</div>
<ul>
<li><div id="subMenu1">electronics</div>
<ul>
<li><div id="subMenu2"><a href="#">under construction</a></div></li>
<li><div id="subMenu2"><a href="#">under construction</a></div></li>
</ul>
</li>
<li><div id="subMenu1">fashion</div>
<ul>
<li><div id="subMenu2"><a href="#">under construction</a></div></li>
<li><div id="subMenu2"><a href="#">under construction</a></div></li>
</ul>
</li>
<li><div id="subMenu1">food & dining</div>
<ul>
<li><div id="subMenu2"><a href="#">under construction</a></div></li>
<li><div id="subMenu2"><a href="#">under construction</a></div></li>
</ul>
</li>
<li><div id="subMenu1">cars/auto</div>
<ul>
<li><div id="subMenu2"><a href="#">under construction</a></div></li>
<li><div id="subMenu2"><a href="#">under construction</a></div></li>
</ul>
</li>
</ul>
</li>
</ul>
<ul>
<li><div id="textalign">dating</div>
<ul>
<li style="width:160px;"><div id="subMenu1" style="padding-left:2px; padding-top:0px;"><a style="width:140px; text-align:left; color:#903; height:20px; width:115px; font-family:'Script MT Bold'; font-size:20px;" href="#"><b>RealMatureSingles</b></a></div></li>
<li style="width:160px;"><div id="subMenu1" style="width:160px; padding-left:0px;"><a href="#" style="font-family:'Courier New', Courier, monospace; font-size:16px;">SeniorPeopleMeet</a></div></li>
</ul>
</li>
</ul>
<ul>
<li><div id="textalign">education</div>
<ul>
<li><div id="subMenu1"><a href="#">under construction</a></div></li>
<li><div id="subMenu1"><a href="#">under construction</a></div></li>
</ul>
</li>
</ul>
</ul>
</div>
</div>
css styling:
/********************/
/*PERSONAL NAVIGATION MENU*/
/********************/
/*begin wrapper and align divs for menu*/
#textalign{
vertical-align:middle;
text-align:center;
width:100px;
height:20px;
text-shadow:1px 1px 1px #000;
padding-top:10px;
}
#personalMenuWrapper{
vertical-align:top;
padding-bottom:450px;
}
/*end wrapper and align divs*/
/*begin main list*/
#navMenu{
padding:0px;
margin:0px;
}
#navMenu ul{
list-style:none;
}
#navMenu ul li{
position:relative;
float:left;
padding-right:1px;
background:#900;
margin-left:10px;
text-align:center;
list-style:none;
border:3px solid #4F0E02;
color:#FFF;
width:100px;
height:40px;
display:table-cell;
padding-bottom:1px;
}
#navMenu ul li:hover{
background:#C00;
border:3px solid #900;
color:#F93;
text-shadow:1px 1px 1px #000;
list-style:none;
}
#navMenu ul:hover ul{
display:inline-table;
float:none;
visibility:visible;
}
/*end main list*/
/*begin first sublist*/
#subMenu1{
text-align:left;
padding-left:3px;
padding-top:3px;
vertical-align:middle;
height:15px;
width:115px;
}
#navMenu ul ul{
display:none;
}
#navMenu ul ul li{
width:125px;
height:25px;
list-style:none;
background:#CCC;
text-shadow:1px 1px 1px #000;
font-size:14px;
border:2px ridge #333;
color:#000;
text-align:left;
padding-left:3px;
position:relative;
top:14px;
left:-53px;
}
#navMenu ul ul a{
text-decoration:none;
font-size:9px;
color:#000;
text-shadow:1px 1px 1px #000;
font-family:Verdana, Geneva, sans-serif;
}
#navMenu ul ul li:hover{
background:#999;
color:#000;
text-decoration:blink;
border:2px inset #1B1B1B;
}
#navMenu ul ul:hover ul{
display:table-cell;
float:right;
visibility:visible;
}
/*end first sublist*/
/*begin second sublist*/
#subMenu2{
width:145px;
height:12px;
vertical-align:center;
text-align:left;
padding-left:1px;
font-size:10px;
}
#navMenu ul ul ul li{
width:145px;
height:20px;
list-style:none;
background:#999;
color:#000;
text-shadow:1px 1px 1px #000;
text-align:left;
padding-left:1px;
border:2px ridge #333;
position:relative;
}
#navMenu ul ul ul li:hover{
background:#666;
color:#000;
text-decoration:blink;
border:2px inset #1A1A1A;
}
#navMenu ul ul ul a{
text-decoration:none;
font-size:9px;
color:#000217;
text-shadow:1px 2px 1px #000;
font-family:Verdana, Geneva, sans-serif;
}
#navMenu ul ul ul:hover ul{
display:inline-table;
float:right;
visibility:visible;
}
/*end second sublist*/
/*begin third sublist*/
#navMenu ul ul ul ul{
visibility:hidden;
display:none;
}
/*end third sublist*/
/* Contains the Float */
.clearFloat{
clear:both;
margin:0;
padding:0;
}
/* IE7 Display Fix */
#navMenu #holder ul li {
display: inline;
}
