Help with menu!

tushar707 · May 14, 2007

Hey guys, I finished making my menu in a sepearte html file and it looks like this:

However when I copy and paste it into my index file it starts to look like this!:

this is my code for my menu:

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

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>My Prana</title>
<style type="text/css">

body {
font-family: VladimirScrD;
font-size: 24px;
}

#nav, #nav ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
float : left;
width : 149px;
}

#nav li { /* all list items */
position : relative;
float : left;
line-height : 29px;
margin-bottom : -1px;
width: 144px;
}

#nav li ul { /* second-level lists */
position : absolute;
left: -999em;
margin-left : 144px;
margin-top : -1.20em;
}

#nav li ul ul { /* third-and-above-level lists */
left: -999em;
margin-top : -29px;
}

#nav li a {
width: 5em;
w\idth : 5em;
display : block;
color : #1463a5;
font-weight : 300;
text-decoration : none;
border : none;
background-image: url(images/button.jpg);
padding-top: 0;
padding-right: 0em;
padding-bottom: 0;
padding-left: 1em;
}

#nav li a:hover {
color : white;
background : url(images/button_rollover.jpg);
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { /* lists nested under hovered list items */
left: auto;
}

#content {
margin-left : 6em;
}
</style>

<script type="text/javascript"><!--//--><![CDATA[//><!--

sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

//--><!]]></script>

</head>
<body>
<ul id="nav">

<li><a href="#">Home</a>
</li>

<li><a href="#">Our Programs</a>

<ul>
<li><a href="#">Climbing perches</a></li>
<li><a href="#">Labyrinthfishes</a></li>
<li><a href="#">Kissing gouramis</a></li>
<li><a href="#">Pike-heads</a></li>
<li><a href="#">Giant gouramis</a></li>

</ul>
</li>

<li><a href="#">Resources</a>
<ul>
<li><a href="#">My Articles</a></li>
<li><a href="#">Newsletters</a></li>
<li><a href="#">Useful Links</a></li>

</ul>
</li>
<li><a href="#">Events</a>
<ul>
<li><a href="#">Burrowing gobies</a></li>
<li><a href="#">Dartfishes</a></li>
<li><a href="#">Eellike gobies</a></li>
<li><a href="#">Gobies</a></li>

</ul>
</li>
<li><a href="#">Testimonials</a></li>
<li><a href="#">About Me </a></li>
<li><a href="#">Contact Us </a> </li>
</ul>



<p> </p>
</body>
</html>

can someone help me where I went wrong! I really need this.

Sign In

Help with menu!

Recommended Posts

tushar707

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information