Can someone create a css dropdown menu for me

DJMK4 · 2 Mar 2006 at 14:19

Im having trouble with my menu

www.caldicot-pc-helpdesk.co.uk/fcv/index.htm

for some reason it dont like it in the newer browsers and iv spent about a month trying to figure it out with no luck..

All i want is for is for the navigation div (the div below the banner div) to contain a horizontal dropdown menu created in css that is not buggy.

If anyone is willing to give it a bash then that would be amazing, iv totally run out of idea's.

Ta

DJMK4 · 2 Mar 2006 at 14:32

css

Code:

/* CSS Document for FCV */

body {
background-image:url(Images/background.jpg);
}

div#container {
position: absolute;
background-color:#ffffff;
margin-left: 50px;
margin-top: 50px;
width: 901px;
height: 500px;
}

* html div#container { position: absolute; margin-top: 20px; }


div#banner {
position: absolute;
background-image: url(Images/banner.jpg);
height: 85px;
width: 895px;
margin-left: 2px;
margin-right: 2px;
margin-top: 2px;
margin-bottom: 2px;
border: 1px solid black
}


div#content {
height: 360px;
width: 895px;
position: absolute;
background-color:#666666;
margin-top: 113px;
margin-bottom: 2px;
margin-left: 2px;
margin-right: 2px;
border: 1px solid black;
overflow:auto;
z-index: 1;
}

div#navigation {
position: absolute;
background-image:url(Images/menu.jpg);
margin-left: 2px;
margin-right: 2px;
margin-top: 90px;
width: 895px;
height: 20px;
border:1px solid black;
z-index: 2;
}







div#footer {
position: absolute;
background-color: #666666;
height: 20px;
width: 895px;
margin-top: 476px;
margin-bottom: 2px;
margin-left: 2px;
margin-right: 2px;
border: 1px solid black;
}

div#catcontent {
height: 360px;
width: 750px;
position: absolute;
background-color:#666666;
margin-top: 113px;
margin-bottom: 2px;
margin-left: 147px;
margin-right: 2px;
border: 1px solid black;
overflow:auto;
z-index: 1;
}

div#catnav {
height: 360px;
width: 141px;
position: absolute;
margin-left: 2px;
margin-top: 113px;
margin-right: 2px;
border: 1px solid black;
background-color: #666666;
}


//*MENU CODE*//



ul#nav {
  padding: 0;
  margin: 0;
  list-style: none;
  
 

  }
  
  li {
  float: left;
  position: relative;
  width: 9em;
  border-bottom: 1px solid #000000;
border-right: 1px solid #000000;
color:#FFFFFF;
text-align: center;




  }
  
  li ul {
  display: none;
  position: absolute; 
  top: 19px;
  left: 0;
  border-top: 1px solid #000000;
border-left: 1px solid #000000;
background-image:url(Images/menu.jpg);





  
  }
  
  li > ul {
	top: auto;
	left: auto;

	}
	
li:hover ul, li.over ul{ 
display: block;

}



//*END OF MENU CODE*//


	
a {text-decoration:none;
color:#FFFFFF;
}
a:hover {
color:#FF0000;
}
	
div.catagoryleft {

width: 200px;
height:100px;
text-align: left;

border: 1px solid black;
margin-bottom: 2px;

}


div.catagoryright {
width: 200px;
height:100px;
text-align: left;
float: none;
border: 1px solid black;
margin-bottom: 2px;


}

html

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>


<head>
<script type="text/javascript" src="drop.js"></script>
<link href="style2.css" rel="stylesheet" type="text/css"></link>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></meta>
<title>First-Choice-Video.co.uk</title>
</head>




<body>


<div id="container">

<div id="banner"></div>

<div id="navigation"> 

<ul id="nav">

  <li><a href="index.htm">Home</a>
  </li>

  <li><a href="index2.htm">About Us</a>
  </li>

<li>Up and Coming
    <ul id="nav">
      <li><a href="index3.htm">Video</a></li>
      <li><a href="index4.htm">DVD</a></li>
      <li><a href="index5.htm">Games</a></li>
    </ul>
</li>

<li><a href="index6.htm">Rental Catalogue</a>
</li>

<li>Stores 
    <ul id="nav">
      <li><a href="index7.htm">Coalville</a></li>
      <li><a href="index8.htm">Redditch</a></li>
      <li><a href="index9.htm">Solihill</a></li>
	  <li><a href="index10.htm">Tamworth</a></li>
    </ul>
</li>

<li><a href="index11.htm">Contact Us</a>
</li>

</ul>
</div>

<div id="content">


</div>

<div id="footer">
</div>

</div>



</body>



</html>
[/code



javascript

[code]
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
  }
  node.onmouseout=function() {
  this.className=this.className.replace(" over", "");
   }
   }
  }
 }
}
window.onload=startList;

www.caldicot-pc-helpdesk.co.uk/fcv/index.htm

Can someone create a css dropdown menu for me

DJMK4

DJMK4

DJMK4

DJMK4