I designed a CSS menu using the following CSS Code:
#cssmenu ul { margin: 0; padding: 0; text-align: center; }
#cssmenu li { margin: 0; padding: 0;}
#cssmenu a { margin: 0; padding: 0;}
#cssmenu ul {list-style: none;}
#cssmenu a {text-decoration: none;}
#cssmenu {height: 50px; background-color: #f36f25; box-shadow: 0px 2px 3px rgba(0,0,0,.4);}
#cssmenu > ul > li {
display: inline-block;
margin-left: 15px;
position: relative;
}
#cssmenu > ul > li > a {
color: #ffffff;
font-size: 15px;
line-height: 50px;
padding: 16px 20px;
-webkit-transition: color .15s;
-moz-transition: color .15s;
-o-transition: color .15s;
transition: color .15s;
}
#cssmenu > ul > li > a:hover {color: #ffffff; background-color:#666666; }
#cssmenu > ul > li > ul {
opacity: 0;
visibility: hidden;
padding: 16px 0 20px 0;
background-color: #eeeeee;
text-align: left;
position: absolute;
top: 30px;
left: 50%;
margin-left: -90px;
width: 180px;
-webkit-transition: all .3s .1s;
-moz-transition: all .3s .1s;
-o-transition: all .3s .1s;
transition: all .3s .1s;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
-moz-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
box-shadow: 0px 1px 3px rgba(0,0,0,.4);
}
#cssmenu > ul > li:hover > ul {
opacity: 1;
top: 50px;
visibility: visible;
}
#cssmenu > ul > li > ul:before{
content: '';
display: block;
border-color: transparent transparent rgb(250,250,250) transparent;
border-style: solid;
border-width: 10px;
position: absolute;
top: -20px;
left: 50%;
margin-left: -10px;
}
#cssmenu > ul ul > li { position: relative;}
#cssmenu ul ul a{
color: #000000;
font-size: 13px;
background-color: #eeeeee;
padding: 5px 8px 7px 16px;
display: block;
-webkit-transition: background-color .1s;
-moz-transition: background-color .1s;
-o-transition: background-color .1s;
transition: background-color .1s;
}
#cssmenu ul ul a:hover {background-color: #f36f25;}
#cssmenu ul ul ul {
visibility: hidden;
opacity: 0;
position: absolute;
top: -16px;
left: 206px;
padding: 16px 0 20px 0;
background-color: #eeeeee;
text-align: left;
width: 160px;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
-moz-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
box-shadow: 0px 1px 3px rgba(0,0,0,.4);
}
#cssmenu ul ul > li:hover > ul { opacity: 1; left: 196px; visibility: visible;}
#cssmenu ul ul a:hover{
background-color: #f36f25;
color: rgb(240,240,240);
}
The issue I encountered is that when there's a slider below the navigation code, the sub menus on the navigation appear behind the images on the slider. Any suggestions on how to make them display in front of the slider images?
Check out the JS Fiddle of the menu here: http://jsfiddle.net/JLRte/