html5 dropdown menu not loading correctly over hover

[hena]

hi friends,

 

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 health 1,health 2,safety 1 ,safety 2

 

when i am clicking all main menus are working fine.

 

But when i am hovering menu sub-menu display will come page wont load if i click any sub menu ,

 

If i am on home page and on hover am clicking on safety 1(sub menu) the page wont load:

 

Error message:"

This webpage is not found"

but if am clicking on safety and then on safety 1 it works fine.

 

without clicking on safety and just by hover clicking on safety 1 ,the page wont display.

 

How to correct this ,please help me?

<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="#">health1</a></li><li><a href="#">health2</a></li></ul></li><li><a href="safety.html">Safety</a><ul><li><a href="#">safety1</a></li><li><a href="#">safety2</a></li></ul></li></ul></div><!--end of menu--> 

#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;	margin-right: 5px;	font-weight: 700;	font-size: 14px;	color: #0093d0;	text-decoration: none;	}#menu ul :after{	content:".";    height:0px;	 display:block;	clear:both;	visibility:hidden;}#menu ul ul{		position:absolute;	left:0px;	display:none;	background-color:#fff;	}#menu ul ul li {	border:2px solid #54534a;	width:100%;}#menu ul ul li a{	border-right:none;	padding:5px 5px;	color:#0093d0;} 

I think i need a code that the sub menu will come only on the click of main menu and not by hover.

[davej]

When you hover over a link the href value of the link is normally visible at the bottom of the window in the browser. Do you see this? In the above code you have some href values set to # so obviously they won't work.

[hena]

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

this is the code that was just the structure i gave.

 

i have kept 2 folders for health and safety inside that i have kept html child files (sub menu)of the corresponding menu

 

is it something with that issue

 

why browser not understanding the path ..i don't kno

 

if i click on the first time say first time i am directly clicking to personal hygiene it will work

 

but then if am directly clicking on fire hazards(under safety) it wont work.if i click anything under my health it will work again i have to click on safety then if i click on fire hazards it will work.

 

No webpage was found for the web address:

 

http://file:///C:/Users/DELL/Desktop/a/health/safety/fire_hazards.html

 

the web add 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

Edited September 9, 2015 by hena

[hena]

When you hover over a link the href value of the link is normally visible at the bottom of the window in the browser. Do you see this? In the above code you have some href values set to # so obviously they won't work.

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

[dsonesuk]

Its because you should be using a local server such as wamp or xamp, and you are not working from what would be your root directory.When you select health folder file, the folder you are now in becomes your root so when you click hazard file it expects a folder within health of safety.On local server your root where you would work from would most likely be in your case ‘a/‘ not using server but your computer file system it is file///C:/Users/DELL/Desktop/a/

[hena]

Its because you should be using a local server such as wamp or xamp, and you are not working from what would be your root directory.When you select health folder file, the folder you are now in becomes your root so when you click hazard file it expects a folder within health of safety.On local server your root where you would work from would most likely be in your case ‘a/‘ not using server but your computer file system it isfile///C:/Users/DELL/Desktop/a/

@dsonesuk: sorry ,as i am fresher on programming how can i rectify the issue.as u said its taking computer file system

[dsonesuk]

Like i said you need to install a web server, wamp or xamp, or the only other option is to use base tag directly after <head> tag to define your root url so your relative paths will work from this set url location and not the location of current folder your page is located.

<head><base href="file///C:/Users/DELL/Desktop/a/">

NOTE: you would have to remove/adjust this if using local web server or uploading to hosts web server.

Edited September 9, 2015 by dsonesuk

[davej]

The problem is that the relative paths have to be correct from the active file. If you have a file named personal_hygiene.html inside a folder C:/Users/DELL/Desktop/a/health then the relative path inside that file to reach the index.html file in the folder Desktop/a needs to be...

<li><a href="../index1.html">Home</a></li>

...and to reach the safety sub-folder (C:/Users/DELL/Desktop/a/safety) from the health sub-folder you need...

<li><a href="../safety/fire_hazards.html">Fire Hazards</a></li>

[hena]

 

The problem is that the relative paths have to be correct from the active file. If you have a file named personal_hygiene.html inside a folder C:/Users/DELL/Desktop/a/health then the relative path inside that file to reach the index.html file in the folder Desktop/a needs to be...

<li><a href="../index1.html">Home</a></li>

...and to reach the safety sub-folder (C:/Users/DELL/Desktop/a/safety) from the health sub-folder you need...

<li><a href="../safety/fire_hazards.html">Fire Hazards</a></li>

thanks ton for your helpppppp

[dsonesuk]

With davej method the menu links will be different in every page depending where the page you are in, with mine you set what is the root url which is the main cause of you problem, and your current code will work as it should and be consistently the same in ALL pages, all you have to do is add base tag with root url to all pages, it will fix relative paths for links to css, js and images in one go.