CSS Menu

**escapedf** · May 10, 2005 02:21

Hi everyone ::

Theres code here for a Horizontal menu -

http://www.csscreator.com/menu/multimenu.php#

Problem is, when you rollover the menu on the left to get the left dropdown
(im using IE) the right bit moves?

Is there any fix anyone knows about?

ALso - How do you make the dropdown lists transparent or better still - 50% opacity white so that you can put this menu just above an image?

Thanks!

**Paul O'B** · May 10, 2005 07:15

Hi,

Problem is, when you rollover the menu on the left to get the left dropdown
(im using IE) the right bit moves?

Well you probably should have contacted csscreator for the solution but here goes anyway

(perhaps you should send them the solution)

There is a logic error in the code as the list elements have a width and a border therefore the nested lists also have the same width and the same border. The inner element therefore pushes the parent element wide in order for it to fit inside. Other browsers ignore the overflow but Ie stretches the parent as it treats width as if it were min-width.

The solution would be to set the nested list to be the right size to fit inside the parent or more easily apply a negative 1 pixel margin to lose the extra width as follows.

Code:

#nav ul li{ border-width:1px 1px 0 0;margin-right:-1px}

For opacity you'd have to use proprietary ie filters or you could use the alpha image loaders and use transparent png's as in this example.

http://www.pmob.co.uk/temp/transparent-test.htm

**escapedf** · May 10, 2005 08:23

Thankyou..but it seems this code dont work anyways --
When i rollover i get nothing - no dropdown

Man its so hard to get a good example out there as a beginner!

Is there anything im doing wrong in this code??

Code:

 
<!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=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css"> 
#nav{list-style: none;} 
#nav ul { 
	 padding: 0;
	 margin:0;
	 list-style: none;
	 width:12em;
	 z-index:99;
	 position:relative;
	 overflow:visible; 
} 
#nav li { 
	 margin:0; 
	 position: relative; 
	 float:left; 
	 width: 12em;
	 background-color:#CCC;
	 border:solid 1px #666; 
	 display:block;
	 height:auto;
} 
#nav ul li{ border-width:1px 1px 0 0;margin-right:-1px} 
#nav ul ul li{ border-width:1px 1px 0 1px;} 
#nav ul ul li:last-child{border-bottom:1px solid #666;} 
#nav a { 
	 text-decoration:none; 
	 display:block;
	 padding: 0.1em; 
	 margin:0.2em 0 0.2em 0.1em; 
	 width:11.5em; 
	 height:1em;
} 
#nav a:hover, #nav li:hover{ 
	 background-color:#CCC; 
} 
#nav ul li:hover, #nav ul li a:hover{ 
	 background-color:#CCC; 
} 
#nav ul{ 
	 display:none; 
} 
/*all see this */
#nav ul ul{ 
	 display:none; 
	 position:absolute; 
	 margin-top:-1.8em; 
	 margin-left:12em; 
} 
/* non-IE browsers see this */ 
#nav ul li>ul, #nav ul ul li>ul{ 
	 margin-top:-1.4em; 
} 
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul, #nav li:hover ul ul ul ul ul{ 
	 display:none; 
} 
#nav li:hover ul, #nav ul li:hover ul, #nav ul ul li:hover ul, #nav ul ul ul li:hover ul, #nav ul ul ul ul li:hover ul{ 
	 display:block; 
} 
li>ul { 
	 top: auto; 
	 left: auto; 
} 
 
</style>
<script type="text/javascript" src="multimenu.js" ></script>
</head>
<body>
 <ul id="nav">
		 <li> <a href="#" >first Level menu</a>
			  <ul>
				  <li><a href="#" >second Level menu</a></li>
				  <li><a href="#" >second Level menu</a>
					 <ul>
						 <li><a href="#" >third Level menu</a></li>
					 </ul>
				  </li>
			  </ul>
		 </li>
	 </ul>

</body>
</html>

**Paul O'B** · May 10, 2005 09:26

The drop down works fine when the js is attached correctly. Have you got the path to your js file correct?

I just copied the js from the page you linked to and pasted it into the document and it worked first time. (The border of the very last list item is missing but thats because the border is set to 0 for some reason.)

**escapedf** · May 10, 2005 09:38

i think so??

Its in my code above as:

</style>
<script type="text/javascript" src="multimenu.js" ></script>
</head>

How should i do it??

Many thanks!!!

**Paul O'B** · May 10, 2005 10:36

i think so??

Put the js inside the page first and test if it works. If it does then you know you've just got the wrong path to the file.

Code:

<!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=iso-8859-1">
<title>Untitled Document</title>
<script type="text/javascript">
activateMenu = function(nav) {
	/* currentStyle restricts the Javascript to IE only */
 if (document.all && document.getElementById(nav).currentStyle) {  
		var navroot = document.getElementById(nav);
		
		/* Get all the list items within the menu */
		var lis=navroot.getElementsByTagName("LI");  
		for (i=0; i<lis.length; i++) {
		
		   /* If the LI has another menu level */
			if(lis[i].lastChild.tagName=="UL"){
			
				/* assign the function to the LI */
			  lis[i].onmouseover=function() { 
				
				   /* display the inner menu */
				   this.lastChild.style.display="block";
				}
				lis[i].onmouseout=function() {					   
				   this.lastChild.style.display="none";
				}
			}
		}
	}
}
window.onload= function(){
	/* pass the function the id of the top level UL */
	/* remove one, when only using one menu */
	activateMenu('nav'); 
	activateMenu('vertnav'); 
}

</script>
<style type="text/css"> 
#nav{list-style: none;} 
#nav ul { 
  padding: 0;
  margin:0;
  list-style: none;
  width:12em;
  z-index:99;
  position:relative;
  overflow:visible; 
} 
#nav li { 
  margin:0; 
  position: relative; 
  float:left; 
  width: 12em;
  background-color:#CCC;
  border:solid 1px #666; 
  display:block;
  height:auto;
} 
#nav ul li{ border-width:1px 1px 0 0;margin-right:-1px} 
#nav ul ul li{ border-width:1px 1px 1px 1px;} 
#nav ul ul li:last-child{border-bottom:1px solid #666;} 
#nav a { 
  text-decoration:none; 
  display:block;
  padding: 0.1em; 
  margin:0.2em 0 0.2em 0.1em; 
  width:11.5em; 
  height:1em;
} 
#nav a:hover, #nav li:hover{ 
  background-color:#CCC; 
} 
#nav ul li:hover, #nav ul li a:hover{ 
  background-color:#CCC; 
} 
#nav ul{ 
  display:none; 
} 
/*all see this */
#nav ul ul{ 
  display:none; 
  position:absolute; 
  margin-top:-1.8em; 
  margin-left:12em; 
} 
/* non-IE browsers see this */ 
#nav ul li>ul, #nav ul ul li>ul{ 
  margin-top:-1.4em; 
} 
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul, #nav li:hover ul ul ul ul ul{ 
  display:none; 
} 
#nav li:hover ul, #nav ul li:hover ul, #nav ul ul li:hover ul, #nav ul ul ul li:hover ul, #nav ul ul ul ul li:hover ul{ 
  display:block; 
} 
li>ul { 
  top: auto; 
  left: auto; 
} 
 
</style>
</head>
<body>
<ul id="nav">
  <li> <a href="#" >first Level menu</a> 
	<ul>
	  <li><a href="#">second Level menu</a></li>
	  <li><a href="#">second Level menu</a> 
		<ul>
		  <li><a href="#" >third Level menu</a></li>
		</ul>
	  </li>
	</ul>
  </li>
  <li> <a href="#" >next Level menu</a> 
	<ul>
	  <li><a href="#">next second Level menu</a></li>
	  <li><a href="#">next second Level menu</a> 
		<ul>
		  <li><a href="#">next third Level menu</a></li>
		</ul>
	  </li>
	</ul>
  </li>
</ul>
</body>
</html>

User Tag List

Thread: CSS Menu

Thread Tools

Display

CSS Menu

??

Bookmarks

Bookmarks

Posting Permissions