Css html5下拉菜单未正确加载悬停

我是一个编程新手。现在我被分配了用html5和css制作网站的任务。我面临的问题是

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

3个主选项卡主页、健康、安全

在那下面我有子菜单

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

但当点击“家庭-健康”子菜单（正常工作）-安全子菜单（正常工作）

这是我在“健康”之后直接单击“火灾危险”时遇到的错误。 找不到该网址的网页：

上面显示的网址不正确。 我已将火灾隐患保存在安全火灾隐患文件夹中 不在健康-安全火灾危险文件夹中

为什么路径显示错误

 <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-->

---

您还可以尝试以下代码：

#菜单{
宽度：100%；
位置：相对位置；
背景：#ccc；
}
导航{
位置：相对位置；
}
导航ul{
保证金：0；
填充：0；
}
李国荣{
保证金：0；
填充：0；
列表样式：无；
显示：内联块；
位置：相对位置；
}
海军ulli a{
字体：粗体12px Arial，Helvetica，无衬线；
文本转换：大写；
颜色：#333；
填充：7px 10px；
显示：内联块；
文字装饰：无；
}
导航ulli：悬停>a{
文字装饰：无；
颜色：#005ba0；
}
导航ulli a.电流{
背景：#005ba0；
颜色：#fff；
}
导航ul{
最小宽度：200px；
位置：绝对位置；
最高：100%；
z指数：666；
背景：#eee；
显示：无；
}
导航李：悬停>ul{
显示：块；
}
导航ul{
左：100%；
排名：0；
}
李国宝{
显示：块；
宽度：100%；
}
导航ula{
填充：7px 10px；
显示：块；
颜色：#777；
边框底部：1px实心#ddd；
文本对齐：左对齐；
}
导航：悬停{
背景：ddd；
}
纳伏电流{
背景：dddd；
颜色：#005ba0；
}

请提供正确的链接并提出您的问题clear@AmitSingh：由于您在

a

tag中提供的

路径

导致了此错误。您必须再次提供

路径

，从该页面转到另一页面page@Amitsingh：谢谢你的建议。你能告诉我怎么做吗谢谢你的意见。现在工作很好。我现在面临的问题是我保留了所有的父html和子html文件，但我又遇到了同样的问题。找不到该网址的网页：file:///C:/Users/DELL/Desktop/drop_down/health/safety/electrical_safety.html. 为什么它读取了错误的文件夹结构。我的电气安全只是在安全文件中，而不是environment-safety-electrical\u safety.htmlc您是否可以提供代码的在线链接或文件夹结构的屏幕截图：这是相对路径问题…现在工作正常了

#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 */

}