AleRef AleRef - 2 months ago 26
CSS Question

Css + jQuery dropdown submenu overflow

I have a css menu as shown in the picture:
enter image description here

When I put the mouse over "Haschildren" I obtain:
enter image description here

My question is: what shall I modify to avoid the overflow (the grey all-around the sub-voices)? I tried to modify the ul e li properties in the css, but with no results... I want to change only the strict necessary, leaving unaltered all the rest.

The HTML snippet is:



$(document).ready(function() {
$('.has-children').hover(
function() {
$(".sub-menu li").slideDown("slow");

});

$(".sub-menu").mouseleave(function() {
$('.sub-menu li').hide();
});
});

.header {
background-color: #333;
position: absolute;
width: 100%;
z-index: 3;
}
.header ul {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
background-color: #333;
}
.header li a {
display: block;
padding: 20px 20px;
color: #f2f2f2;
border-right: 1px solid #f4f4f4;
text-decoration: none;
}
.header li {
float: left;
}
.submenu ul {
background-color: #fff;
}
.sub-menu li {
clear: both;
display: none;
}
.sub-menu li a {
clear: both;
border-right: 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
<link type="text/css" rel="stylesheet" href="mystyle.css">

</head>

<body>
<header class="header">
<ul class="menu">
<li><a href="#work">Work</a>
</li>
<li><a class="has-children" href="#about">Haschildren</a>
<ul class="sub-menu">
<li><a href="#link1">Child 1</a>
</li>
<li><a href="#link2">Child 2</a>
</li>
<li><a href="#link3">Child 3</a>
</li>
</ul>
</li>
<li><a href="#careers">Careers</a>
</li>
</ul>
</header>


</body>

</html>




Answer

I commented out two lines and added background-color to .header li a:

.header {
   background-color: #333;
   /*position: absolute;*/
   width: 100%;
   z-index: 3;
}
.header ul {
   margin: 0;
   padding: 0;
   list-style: none;
   /*overflow: hidden;*/
   background-color: #333;
}
.header li a {
   display: block;
   padding: 20px 20px;
   color: #f2f2f2;
   border-right: 1px solid #f4f4f4;
   text-decoration: none;
   background-color: #333;
}
.header li {
   float: left;
}
.submenu ul {
   background-color: #fff;
}
.sub-menu li {
   clear: both;
   display: none;
}
.sub-menu li a {
   clear: both;
   border-right: 0px;
}