I followed a tutorial for the submenus being hidden until hovered over…but I have another 3rd layer…so submenu should, when hovered, show another submenu….having trouble implementing that…
here is the code:
/* CSS for test site to learn css */
body {
background-color:#999999;
background-image:url('logo.png');
background-repeat:no-repeat;
background-position:50% 50%;
background-attachment:fixed;
}
#content {
margin-left:auto;
margin-right:auto;
margin-top:3%;
margin-bottom:200px;
background-color:#FFFFFF;
width:70%;
box-shadow: 0px 0px 15px 15px #CCCCCC inset;
border-radius:20px;
border:2px inset #777777;
padding:3%;
opacity:0.8;
}
#nav {
background-color:#505050;
height:30px;
box-shadow: 0px 0px 15px 10px #CCCCCC inset;
border-radius:20px;
padding:1.5%;
}
#nav ul{
margin:0px;
padding:0px;
}
#nav ul li {
margin-left:15px;
display:inline;
height:30px;
float:left;
list-style:none;
position:relative;
}
#nav li a {
color:#FFFFFF;
text-decoration:none;
}
#nav li a:hover {
text-decoration:underline;
}
#nav li ul {
margin:0px;
padding:0px;
display:none;
position:absolute;
left:0px;
top:20px;
background-color:#505050;
}
#nav li:hover ul {
display:block;
width:100px;
}
/*testing below */
#nav li ul li{
/*clear:both;*/
margin:0px;
padding:0px;
display:none;
position:absolute;
left:100px;
top:20px;
background-color:#505050;
}
#nav li ul li:hover ul {
display:block;
width:100px;
}
h4 {
color:#FFFFFF;
font-size:large;
}
and the code snippet for menus so far is this:
