我的下拉菜单出现问题,第二级项目相互重叠,每个项目的宽度不同。我搜索过这个网站并尝试修复类似的问题,但是找不到任何有用的东西。我不是一个程序员,但我想把它添加到我的网站。这是我的代码:
#menu ul,
#menu li,
#menu span,
#menu a {
margin: 0;
padding: 0;
position: relative;
}
#menu ul {
list-style: none;
position: absolute;
top: 1.1em;
}
#menu
{
position: relative;
background: #171e35 url('images/menubg.gif') repeat-x top left;
height: 3.5em;
padding: 0em 1.0em 0em 1.0em;
margin-bottom: 10px;
}
#menu ul > ul > li
{
float: left;
}
#menu ul ul {
display: none;
position: absolute;
top: 36px;
left: -1px;
width: 100px;
text-align: left;
*width: 100%; /* IE7 hack*/
}
#menu li:hover ul {
display: block;
}
#menu:after,
#menu ul:after {
content: '';
display: block;
clear: both;
}
#menu ul li
{
position: relative;
display: inline;
}
#menu ul li a
{
padding: 0.5em 1.0em 0.9em 1.0em;
color: #fff;
text-decoration: none;
}
/*#menu ul li a:hover
{
text-decoration: none;
}*/
#menu ul li a.active
{
background: #171e35 url('images/menuactive.gif') repeat-x top
left;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>Menu</title>
<!-- zenlike1.0 by nodethirtythree design http://www.nodethirtythree.com -->
<meta name="keywords" content="">
<meta name="description" content="">
<link rel="stylesheet" type="text/css"
href="test.css">
</head>
<body>
<div id="menu"><!-- HINT: Set the class of any menu link below to "active" to make it appear active -->
<ul>
<li><a href="#" class="active">Home</a></li>
<li><a href="#" class="active">Department</a>
<ul>
<li><a href="#" class="active">Patrol </a></li>
<li><a href="#" class="active">Investigations</a></li>
<li><a href="#" class="active">Records </a></li>
<li><a href="#" class="active">Prosecution
</a></li>
</ul>
</li>
<li><a href="#" class="active">Forms</a></li>
<li><a href="#" class="active">Gallery</a></li>
<li><a href="#" class="active">Media</a></li>
<li><a href="#" class="active">Contact</a></li>
</ul>
</div>
<br>
</body>
</html>
&#13;
答案 0 :(得分:1)
创建了一个类submenu
并添加了display:block
。这允许我们分配width
和height
值DOM对象,并阻止菜单项重叠。在您的情况下,我将类submenu
分配给故障菜单项,以避免与先前存在的代码发生冲突。
由于你不是程序员,我冒昧地改进你的代码并删除那些没有做任何事情的行。上面的simplified
链接具有与您的代码(使用解决方案)相同的功能,但具有较少混淆的类。它可以让您更轻松地继续在您的网站上工作!
要修复您网站上的对齐方式,请将ul#menu ul
的CSS替换为:
ul#menu ul {
display: none;
position: absolute;
top: 28px;
margin-left: 70px;
width: 100px;
text-align: left;
}
要解决内容背后出现的子菜单,请将z-index:10
添加到#menu
答案 1 :(得分:1)
为子导航链接提供更多line-height
。
将此规则添加到您的样式中:
#menu ul li ul li {
line-height: 2em;
}
然后,要关闭主导航和子导航之间创建的间隙(这将阻止您将鼠标悬停在子导航链接上),请在现有的主导航规则中添加一点padding-bottom
:
在您的样式中调整此规则:
#menu ul li a
{
/* original */
/* padding: 0.5em 1.0em 0.9em 1.0em; */
/* new */
padding: 0.5em 1.0em 1.1em 1.0em;
color: #fff;
text-decoration: none;
}
上述解决方案是您问题的直接答案,可以解决您提出的问题。
但是,我建议您考虑为导航开发提供更好的整体解决方案。目前,它似乎有点脱节并且拼凑在一起。
这是一个很棒的视频教程,用于构建干净,优雅和强大的导航菜单。 https://youtu.be/k14bxM1cWoM?list=PLl1MmKpV0eieAACJx-rTMnmKYfcBOjqKN
答案 2 :(得分:0)
试试这种风格,
<style>
#menu {
position: relative;
background: #171e35 url('images/menubg.gif') repeat-x top left;
height: 3.5em;
padding: 0em 1.0em 0em 1.0em;
margin-bottom: 10px;
}
#menu ul {
margin: 0px;
padding: 0px;
list-style: none;
line-height: normal;
}
#menu li {
float: left;
margin-right: 1px;
}
#menu a {
display: block;
padding: 0px 30px;
line-height: 45px;
text-decoration: none;
color: #FFFFFF;
}
#menu li:hover {
text-decoration: none;
background: #171e35;
}
#menu .active{
background: #171e35;
}
#menu li{
position: relative;
}
#menu ul ul{
position:absolute;
left: 0;
display: none;
width: 300px;
}
#menu li li{
float:none;
}
#menu li:hover > ul{
display:block;
}
</style>
答案 3 :(得分:0)
只需在你的风格上加上这个css
#menu ul ul li a {
width:100%;
float:left
}