Question

我有一个仅用html和css编码的水平菜单，这个菜单有子菜单，有些子菜单有自己的子菜单。

仅适用于第一级子菜单，但是当我为任何单个子菜单插入一些子菜单时，它们仍会显示。但我无法点击它们，它们随着我的光标移动而消失。可在此处找到演示：http://example.bojroninad.net/pages/menu_demo1.html

然而，我有时能够看到这个菜单的一些稳定行为，但大部分时间它们在我到达它们之前就消失了。这是我的HTML代码（原谅我的结构化代码不好）：

`<html>
<link rel="stylesheet" href="menu1_css.css" media="screen" type="text/css">

<div id="menu1">


<ul> 
<li><a href="#">Home</a></li> 
<li><a href="#">About</a> 
<ul> 
<li><a href="#">History</a></li> 
<li><a href="#">Team</a></li> 
<li><a href="#">Offices</a></li> 
</ul> 
</li> 
<li><a href="#">Services</a> 
<ul> 
<li><a href="#">Web Design        </a></li> 
<li><a href="#">Internet Marketing</a></li> 
<li><a href="#">Hosting           </a></li> 
<li><a href="#">Domain Names      </a>
<ul>
<li><a href="#">.ORG</a></li>
<li><a href="#">.COM</a></li>
<li><a href="#">.NET</a></li>
</ul>
</li>
<li><a href="#">Broadband         </a></li> 
</ul> 
</li>
<li><a href="#">Contact Us</a> 
<ul> 
<li><a href="#">United Kingdom</a></li> 
<li><a href="#">France        </a></li> 
<li><a href="#">USA    &nbsp; </a></li> 
<li><a href="#">Australia     </a></li> 
</ul> 
</li> 
</ul>
</div>
</html>`

我的css代码在这里：

#menu1 {
background-color:#ccc;
width:100%;
height:30px;
}

#menu1 ul{
padding:0px;
margin:0px;
}


#menu1 ul li
{
list-style:none;
display:inline;
margin-left:10px;
float:left;
height:30px;
position:relative;
} 

#menu1 ul li a{
text-decoration:none;
font-weight:bold;
font-family:Bitstream Cyberbit,Garamond, Minion Web, ITC Stone Serif, MS Georgia;
color:green;
}

#menu1 li a:hover{
text-decoration:underline;
}

#menu1 li ul {
display:none;
margin:0px;
padding:0px;
position:absolute;
left:0px;
top:20px;
width:120px;
background-color:#999;
}

#menu1 li:hover ul{
display:block;
width:160px;
}

#menu1 li li {
display:list-item;
list-style:none;
}

/* second level sub menu */

#menu1 li li ul {
padding:0px;
margin-left:150px;
background-color:white;
top:0px;
position:relative;
}



#menu1 li li li{
display:none;
list-style:none;
position:absolute;
width:120px;
background-color:red;

}

#menu1 li  li:hover li{
display:block;
width:100px;
position:relative;
margin-left:0px; 
float:left;
height:30px;
}

#menu1 ul li li li a{
text-decoration:none;
font-weight:bold;
font-family:Bitstream Cyberbit,Garamond, Minion Web, ITC Stone Serif, MS Georgia;
color:yellow;
}

#menu1 li li li a:hover{
text-decoration:underline;
}

Answer 1

问题是你的第二级和第三级列表元素也向左浮动，使它们比菜单本身小。

您可以通过设置：

来解决此问题

#menu1 li li {
  float: none;         /* line 50 */
}
#menu1 li li ul {
  position: absolute;  /* line 57, is now relative, to avoid growth of li li */
}

css子菜单在我点击之前就消失了，需要帮助来识别bug

1 个答案: