My vertical submenu is positioned correctly, but the links are overlapping on top of each other. The submenu doesn't hide when hovering over the main menu, but it does hide when hovering outside the menu. I'm unsure of what changes or additions to make in the CSS.
Check out my vertical submenu here
nav {
padding-top: 183px;
margin-left: auto;
margin-right: auto;
}
ul {
padding: 0;
margin: 0;
}
nav ul {
list-style: none;
font-weight: bold;
font-size: 20px;
margin: 5px;
width: 200px;
}
nav ul ul {
display: none;
margin: 0px;
padding: 0px;
}
nav ul li {
float: left;
}
nav ul a {
display: block;
width: 145px;
text-align: center;
text-decoration: none;
color: #fff;
border: 1px solid #004c99;
border-radius: 8px;
margin-right: auto;
margin-left: auto;
padding-top: 5px;
padding-right: 9px;
padding-bottom: 5px;
padding-left: 9px;
}
nav ul a:active {
background: rgba(255,255,255,0.4);
color: #FFF;
}
nav ul li a:hover, ul a:focus {
text-decoration: none;
background-color: #6699cc;
color: #FFFFFF;
}
nav ul a:link, nav ul a:visited {
background: rgba(255,255,255,0.2);
color: #FFFFFF;
}
nav ul li a {
display: block;
margin-top: 0px;
}
nav ul ul li {
float: none;
position: relative;
}
nav ul ul li a {
color: #fff;
margin-top: -35px;
position: relative;
margin-left: 165px;
}
nav ul ul li a:hover {
background: #6699cc;
}
nav ul ul li a:active, ul ul li a:link , ul ul li a:visited{
background-color: #3370AD;
}
nav ul li:hover {
margin-top: 0px;
}
nav ul li:hover > ul{
display: block;
position: absolute;
}
nav ul:after {
content: "";
clear: both;
display: block;
}
Any suggestions are greatly appreciated!