Observing my CSS menu in the provided image: https://i.sstatic.net/cJMge.jpg
Upon hovering over "Haschildren," I notice: https://i.sstatic.net/gJ5M8.jpg
The concern arises regarding the overflow issue (grey area around sub-voices). Despite tweaking the ul and li properties in the CSS, the desired results are not achieved. I aim to make minimal modifications while preserving the integrity of the rest of the design.
Here is a snippet of the HTML code:
$(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>