Question

我是编程的初学者。现在，我被分配了使用html5和css制作网站的任务。我面临的问题是

我有一个水平菜单栏，垂直子菜单会悬停。

3个主要标签，健康，安全

下我有子菜单

当我点击所有主菜单都正常。

但是当点击home -health-health子菜单（它工作正常）-safety子菜单（它不能正常工作）

这是我在健康后直接点击火灾危险时得到的错误。找不到网址的网页： http://file:///C:/Users/DELL/Desktop/a/health/safety/fire_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>

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

1 个答案: