html5 dropdown menu not loading correctly over hover [closed] - css

Question

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
I am a beginner in programming.Now i am assigned with the task of making a site with html5 and css.The issue what i am facing is
I have a horizontal menu bar with vertical sub menu will come on hover.
3 main tabs home ,health,safety
under that i have sub menus
when i am clicking all main menus are working fine.
But when clicking home -health-health sub menu(it works fine) -safety sub menu(it wont work fine)
this is error i am getting when i click fire hazards directly after health.
No webpage was found for the web address:
http://file:///C:/Users/DELL/Desktop/a/health/safety/fire_hazards.html
the web address shown above is incorrect.
i have kept fire hazards in safety-firehazards folder
and not in health -safety-firehazards folder
why is the path is showing wrong
<div id="menu"> <!--starts of menu-->
<ul >
<li>Home</li>
<li>Health
<ul>
<li>Personal Hygiene`enter </li>
<li>Food Hygeiene</li>
</ul>
</li>
<li>Safety
<ul>
<li>Fire Hazards</li>
<li>Cooking Gas</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

You can try this code also:
#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>Home</li>
<li>Health
<ul>
<li>Personal Hygiene`enter</li>
<li>Food Hygeiene</li>
</ul>
</li>
<li>Safety
<ul>
<li>Fire Hazards</li>
<li>Cooking Gas</li>
</ul>
</li>
</ul>
</nav>
</div>