As a beginner in programming, I have been tasked with creating a website using HTML5 and CSS. The main issue I am encountering is with my horizontal menu bar that has vertical sub-menus appearing on hover.
The menu consists of 3 main tabs: Home, Health, and Safety, each with their own set of sub-menus.
While all the main menus seem to be working fine, there is an error when clicking on the "Safety" submenu directly after navigating through the "Home" and "Health" submenus.
The error message reads: "No webpage was found for the web address". This is because the path mentioned for the "Fire Hazards" page is incorrect. It should be located under the "safety/firehazards" folder, not the "health/safety/firehazards" folder as indicated.
I am confused as to why the wrong path is being displayed and causing this issue.
<div id="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></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>CSS
#menu {
display:block;
position:relative;
width: 960px;
height: 50px;
background-color: #fff;
margin: 0 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: 0;
padding: 4px 0;
}
#menu li {
float: left;
position: relative;
list-style-type: none;
}
#menu li a {
display: block;
padding: 10px 45px;
}
#menu ul:after{
content:".";
height: 0;
clear: both;
visibility: hidden;
}
#menu ul ul{
position: absolute;
left: 0;
display: none;
}
#menu ul ul li {
width: 100%;
}
#menu ul ul li a{
border-right: none;
padding: 5px;
}
/* end of menu */
}