[SOLVED] css menu problem

shadiadiph · February 5, 2009

hi i have been rying to build a drop down menu but can't seem to get it working can anyone see where I am going wrong please? Got it hiding alright just can't get it to display when selected??

test.css

#mainmenu{
width: 900px;
height: 30px;
}
.nav1{
margin: 0px;
padding: 0px;
z-index: 0;
}
.nav1 li{
float:left;
position:relative;
display: block;
width: 140px;
border: 1px solid #fff;
list-style: none;
background: #336699;
font-family: verdana;
font-weight: bold;
font-size: 14px;
padding: 3px 10px 3px 10px;
}
.nav1 li a{
background: #336699;
text-decoration: none;
color: #fff;
}
.nav1 li a:hover{
background: #336699;
text-decoration: none;
color: #ff0000;
display: block;
}
.nav1 li ul.nav2{
position:absolute;
margin: 0px;
width: 140px;
padding: 0px;
list-style:none;
display: none;
top: 30px;
left: 0px;
z-index: 1;
}
.nav1 li:hover ul.nav2 { 
display: block;
}
.nav1 li ul.nav2 li{ 
width:140px;
}

html

<html>
<head>
<title>
</title>
<link rel="stylesheet" type="text/css" href="test.css" />
</head>
<body>

<div id="mainmenu">
<ul class="nav1">
<li><a href="#">MENU 1</a></li>
<ul class="nav2">
<li><a href="dd1.html">DROP DOWN 1</a></li>
<li><a href="dd2.html">DROP DOWN 2</a></li>
<li><a href="dd3.html">DROP DOWN 3</a></li>
</ul>
<li><a href="m2.html">MENU 2</a></li>
<li><a href="m3.html">MENU 3</a></li>
</ul>
</div>


</body>
</html>

shadiadiph · February 6, 2009

In order to get this work in both i.e and mozilla i have gone and got my document to validate 100% on w3c org to their validation standatds problem is i have had to add an additional set of <li> tags which is creating an unwated list element but without it doesn't work in both browers. Can anyone think of a fix for this?

here is my code it is obvious that where the list is doesnt make sense but it valitates therefore the menu works but not properly because of the additional space???

validates in html and css without the opening <ul> tag doesn't validate I am lost here.


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<title></title>
<style type="text/css">

#mainmenu{
width: auto;
height: 30px;
}
#mainmenu{
margin: 0px;
padding: 0px;
}

#mainmenu li{
float:left;
position:relative;
width: 140px;
border: 1px solid #000;
list-style: none;
background: #336699;
font-family: verdana;
font-size: 14px;
font-weight: bold;
text-align: center;
padding: 3px 10px 3px 10px;
}
#mainmenu li a{
background: #336699;
text-decoration: none;
color: #000;
}
#mainmenu li a:hover{
color: #ff0000;
}
.nav1{
width: 140px;
margin: 0px;
padding: 0px;
}
#mainmenu li ul.nav1{
display:none;
position:absolute;
list-style: none;
top: 23px;
left: 0;

}
#mainmenu li:hover ul.nav1{
display: block;
width: 140px;
}

#mainmenu li ul.nav1 li {
background: #fff;
text-decoration: none;
font-size: 11px;
}
#mainmenu li ul.nav1 li a{
background: #fff;
text-decoration: none;
font-size: 11px;
color: #000;

}
#mainmenu li ul.nav1 li a:hover{
color: #ff0000;
}

#mainmenu li ul.nav1 li ul.nav2 li{
font-size: 8px;
color: #fffab8;
}
#mainmenu li ul.nav1 li ul.nav2 li a{
color: #000;
}
#mainmenu li ul.nav1 li ul.nav2 li a:hover{
color: #ff0000;
}


#mainmenu ul.nav1 li ul.nav2{
display:none;
position:absolute;
list-style: none;
top: -1px;
left: 120px;

}
#mainmenu ul.nav1 li:hover ul.nav2{
display: block;
width: 140px;
}

</style>
</head>

<body>

<div id="mainmenu">
     
<ul>	
      <li>
	<a href="#">MENU 1</a>
	<ul class="nav1">
	<li><a href="#">DROP DOWN 1</a></li>
<li>
           <ul class="nav2">
		<li><a href="#">FLY OUT 1</a></li>
		<li><a href="#">FLY OUT 2</a></li>
            </ul>
</li>
		<li><a href="#">DROP DOWN 2</a></li>
		<li><a href="#">DROP DOWN 3</a></li>
	</ul>
</li>
<li>
	<a href="#">MENU 2</a>
	<ul class="nav1">
		<li><a href="#">DROP DOWN 1</a></li>
		<li><a href="#">DROP DOWN 2</a></li>
		<li><a href="#">DROP DOWN 3</a></li>
	</ul>
</li>
<li>
	<a href="#">MENU 3</a>
	<ul class="nav1">
		<li><a href="#">DROP DOWN 1</a></li>
		<li><a href="#">DROP DOWN 2</a></li>
		<li><a href="#">DROP DOWN 3</a></li>
	</ul>
</li>
</ul>
</div>

</body>
</html>

Sign In

[SOLVED] css menu problem

Recommended Posts

shadiadiph

Link to comment

Share on other sites

shadiadiph

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information