Css + jQuery下拉子菜单溢出 [英] Css + jQuery dropdown submenu overflow
本文介绍了Css + jQuery下拉子菜单溢出的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个css菜单，如图所示：
I have a css menu as shown in the picture:
当我把鼠标超过Haschildren我获得：
When I put the mouse over "Haschildren" I obtain:
我的问题是：我应该修改什么来避免溢出（灰色环绕子声音）？我试图在css中修改ul e li属性，但没有结果...我想只更改严格必要的，保持不变所有其余。
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.
HTML代码段为：
$(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>
推荐答案
我注释掉了两行，并向 .header li a 添加了背景颜色：
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;
}
这篇关于Css + jQuery下拉子菜单溢出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
