Dropdown menu problem
I have a problem with a submenu, when I hover over a section, the width of the dropdown is larger than intended. What did I do wrong and how do I fix it? Any other suggestion related to my css code would be appreciated.
Here is my code:
* {
margin: 0;
padding: 0;
}
.main-nav ul {
margin-left: 40px;
margin-top: 40px;
list-style-type: none;
}
.main-nav>ul>li {
float: left;
}
.main-nav .active {
background-color: #0361D6;
}
.main-nav li a {
text-decoration: none;
font-size: 18px;
font-family: Verdana;
color: white;
}
.main-nav ul li {
padding: 20px 30px 20px 30px;
background-color: #066EFC;
}
.main-nav>ul>li {
border-right: 1px solid #0858C5;
}
.main-nav ul>li:last-child {
border-right: none;
}
.main-nav li {
border-bottom: 3px solid #0B418B;
}
.main-nav li:hover {
cursor: pointer;
background-color: #0361D6;
color: #C4C4C4;
}
.sub-nav ul {
display: none;
}
.sub-nav li {
border-bottom: 1px solid black;
}
.sub-nav {
padding: 0px;
float: none;
position: absolute;
top: 65px;
left: 85px;
overflow: hidden;
}
nav ul li:hover ul {
display: block;
}
<nav class="main-nav">
<ul>
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a>
<nav class="sub-nav">
<ul>
<li><a href="#">Company</a></li>
<li><a href="#">Workers</a></li>
</ul>
</nav>
</li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
+3
source to share
1 answer
I got the solution you might be looking for. See link below ...
https://jsfiddle.net/Dhruvil21_04/x40psw2c/1/
OR
Replace your 4 css selctors as below ...
/*--------Replace-------*/
.sub-nav {
padding: 0px;
float:none;
position: absolute;
top: 100%;
left: 0;
overflow: visible;
width: 100%;
}
.main-nav li:hover {
cursor:pointer;
background-color: #0361D6;
color: #C4C4C4;
position: relative;
}
/*--------Add-------*/
.main-nav ul ul > li {
padding: 20px 10px;
text-align: center;
}
.main-nav ul ul {
margin: 0;
padding: 0;
left: 0;
}
0
source to share