html5下拉菜单在悬停时无法正确加载

Question

我是programming.Now的初学者，我的任务是用html5和css.The创建一个网站，我面临的问题是

我有一个水平菜单栏与垂直子菜单将来悬停。

3家庭、健康、安全的主要标签

在下面我有子菜单

当我点击时，所有主菜单都能正常工作，。

但是，当单击“家庭健康-健康”子菜单(它工作得很好)时，-safety子菜单(它不能正常工作)

这是我收到的错误，当我点击火灾危险后，直接健康。未找到网址：hazards.html的网页。

上面显示的网址不正确。我把火灾危险放在安全-火险文件夹中，而不是在健康-安全-火险文件夹中。

为什么这条路是错误的？

 <div id="menu"> <!--starts of menu-->
  <ul >
   <li><a href="index1.html" class="current">Home</a></li>
   <li><a href="health.html">Health</a>
    <ul>
     <li><a href="health/personal_hygiene.html">Personal Hygiene</a>`enter   </li>
     <li><a href="health/food_hygiene.html">Food Hygeiene</a></li>

    </ul>
   </li>
   <li><a href="safety.html">Safety</a>
    <ul>
     <li><a href="safety/fire_hazards.html">Fire Hazards</a></li>
     <li><a href="safety/cooking_gas.html">Cooking Gas</a></li>
    </ul>
   </li>
  </ul>
 </div><!--end of menu-->

CSS

#menu {
    display:block;
    position:relative;
    width: 960px;
    height: 50px;
    background-color: #fff;
    margin: 0px auto;
    border:1px solid #000;
 }
 #menu ul li a:hover{
    color:#c1d82f;
}
#menu ul .current {
    color: #b13932;
}
#menu li:hover ul{
    display:block;
}
#menu ul {
    margin: 0px;
    padding: 4px 0px;
}
#menu  li {
   float:left;
   position:relative;
   list-style-type:none;
}
#menu  li a {
    display: block;
    padding:10px 45px;
}
#menu ul :after{
    content:".";
    height:0px;
    clear:both;
    visibility:hidden;
}
#menu ul ul{
    position:absolute;
    left:0px;
    display:none;
}
#menu ul ul li {
    width:100%;
}
#menu ul ul li a{
    border-right:none;
    padding:5px 5px;

}

 /* end of menu */

}

Answer 1

您还可以尝试以下代码：

​

#menu {
	width:100%;
	position:relative;
	background:#ccc;
}
nav {
	position:relative;
}
nav ul {
	margin:0;
	padding:0;
}
nav ul li {
	margin:0;
	padding:0;
	list-style:none;
	display:inline-block;
	position:relative;
}
nav ul li a {
	font:bold 12px Arial, Helvetica, sans-serif;
	text-transform:uppercase;
	color:#333;
	padding:7px 10px;
	display:inline-block;
	text-decoration:none;
}
nav ul li:hover > a {
	text-decoration:none;
	color:#005ba0;
}
nav ul li a.current {
	background:#005ba0;
	color:#fff;
}
nav ul ul {
	min-width:200px;
	position:absolute;
	top:100%;
	z-index:666;
	background:#eee;
	display:none;
}
nav li:hover > ul {
	display:block;
}
nav ul ul ul {
	left:100%;
	top:0;
}
nav ul ul li {
	display:block;
	width:100%;
}
nav ul ul a {
	padding:7px 10px;
	display:block;
	color:#777;
	border-bottom:1px solid #ddd;
	text-align:left;
}
nav ul ul a:hover {
	background:#ddd;
}
nav ul ul a.current {
	background:#dddd;
	color:#005ba0;
}

<div id="menu">
	<nav>
		<ul>
			<li><a href="index1.html" class="current">Home</a></li>
			<li><a href="health.html">Health</a>
				<ul>
					<li><a href="health/personal_hygiene.html">Personal Hygiene`enter</a></li>
					<li><a href="health/food_hygiene.html">Food Hygeiene</a></li>
				</ul>
			</li>
			<li><a href="safety.html">Safety</a>
				<ul>
					<li><a href="safety/fire_hazards.html">Fire Hazards</a></li>
					<li><a href="safety/cooking_gas.html">Cooking Gas</a></li>
				</ul>
			</li>
		</ul>
	</nav>
</div>

​