6 replies [Last post]
Poco
Offline
Regular
Last seen: 15 years 13 weeks ago
Timezone: GMT+1
Joined: 2004-05-20
Posts: 20
Points: 0

Hello everybody,

Please help me. I'd like to make a menu with some submenus (see the code) but I simply can't get it work.
The first problem - how to move the links (also the submenus with the orange bg) to the left side of the grey box? There should not be an indent which they keep from <li> element. The submenu items may have a little indent but not this much. The orange area should cover the whole "line" in which the submenu is, so there shouldn't be visible the grey color on the right and left of the orange area.
Second problem - how the he|| can I make this work in IE??? Stare
Thanks a lot for any advice or idea!

Poco

(the borders aren't necessary, they were only for my help)

#menu {
	width:150px;
	background-color:#CCCCCC;
	border-right:thin dashed;
	border-right-color:#666666;
	text-align:left;	
	}

#menu ul li {
	display:block;
	list-style-type: none;
	border:thin solid black;
	
	}

ul#submenu  li {
	visibility:hidden;
	display:none;
	}
	
#menu ul li:hover ul#submenu li {
	visibility: visible;
	display:block;	
	background-color:#FF9900;
	list-style-type: none;
	}

#submenu li {
	}

a {
	color:#000000;
	}
	
a:visited {
	color:#000000;
	}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
	<div id="menu">
		<ul> 
			<li><a href="#">Menu1</a>
				<ul id="submenu">
					<li><a href="#">SubA</a></li>
					<li><a href="#">SubB</a></li>
					<li><a href="#">SubC</a></li>
				</ul>
			</li>
			<li><a href="#">Menu2</a></li>
			<li><a href="#">Menu3</a></li>
		</ul>
	</div>
</body>
</html>

Poco
Offline
Regular
Last seen: 15 years 13 weeks ago
Timezone: GMT+1
Joined: 2004-05-20
Posts: 20
Points: 0

&lt;li&gt; menu problem

The first dumb problem solved. Laughing out loud There was no

ul {
margin-left:0;
}

But still - anybody has an idea how to make it work in IE? The submenu doesn't show in it. It works fine in Mozila and Opera.
Thx

karinne
karinne's picture
Offline
Enthusiast
Aylmer, QC, Canada
Last seen: 12 years 8 weeks ago
Aylmer, QC, Canada
Timezone: GMT-5
Joined: 2004-01-14
Posts: 291
Points: 0

&lt;li&gt; menu problem

unfortunately, you'll need a bit of javascript to get it to work in all browsers. i suggest you have a look at http://www.alistapart.com/articles/dropdowns/ and get the javascript... it's only 10-15 lines.

Poco
Offline
Regular
Last seen: 15 years 13 weeks ago
Timezone: GMT+1
Joined: 2004-05-20
Posts: 20
Points: 0

&lt;li&gt; menu problem

Thanks a lot, karinne! I will try it as soon as possible. By the way, once I saw a drop-down and there was used a *.htc file to simulate it for IE. I just do not know how to make such a file and in which program. Smile Anyone knows?

Poco
Offline
Regular
Last seen: 15 years 13 weeks ago
Timezone: GMT+1
Joined: 2004-05-20
Posts: 20
Points: 0

&lt;li&gt; menu problem

Oki, so the page did help, thank you. But I still have a quite big problem, I simply can't make it work fine in IE (as usually... Oups it works fine in Opera, Mozilla and Firefox) The menu works fine if I move the mouse over it from the left side only. If I move it from right, it doesn't interact till I reach the link "Menu1". Then if I move it straight down (from link "Menu1" to link "subA") the menu simply jumps back. The only way how to target the submenu's links is to move the mouse from the left side over Menu1, go down on the left side next to the links of submenu and then move it to one of the submenu's links. Here is the code of HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" language="javascript1.4">
startList = function() {
	if (document.all&&document.getElementById) {
		navRoot2 = document.getElementById("submenu");//moje
		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", "");
				}
			}
		}		
		for (i=0; i<navRoot2.childNodes.length; i++) {
			nodex = navRoot2.childNodes[i];
			if (nodex.nodeName=="LI") {
				nodex.onmouseover=function() {
					this.className+=" over";
				}
	  			nodex.onmouseout=function() {
	  				this.className=this.className.replace(" over", "");
				}
			}
		}
	}
}
window.onload=startList;
</script>

</head>

<body>
	<div id="mainpage">
		<div id="menu">
			<ul id="nav"> 
				<li><a href="#">Nendeto</a>
					<ul id="submenu">
						<li><a href="#">SubA</a></li>
						<li><a href="#">SubB</a></li>
						<li><a href="#">SubC</a></li>
					</ul>
				</li>
				<li><a href="#">Menu2</a></li>
				<li><a href="#">Menu3</a></li>
			</ul>
		</div>
	</div>
</body>
</html>

and the CSS:
body {
	background: #CCCCCC url('pics/backline.jpg') fixed;
	margin:0;
	padding:0;
	font-family:Arial, Helvetica, sans-serif;
	}
	
#menu {
	width:150px;
	height:500px;
	background-color:#CCCCCC;
	border-right:1px dashed;
	border-right-color:#666666;
	text-align:left;
	}

ul li {
	display:block;
	list-style-type: none;
	border-top:1px solid #666666;	
	text-indent:15px;
	}

ul#submenu  li {
	visibility:hidden;
	display:none;
	}
	
#menu ul li:hover ul#submenu li, #menu ul li.over ul#submenu li {
	visibility: visible;
	display:list-item;	
	background-color:FF9900;
	list-style-type:circle;
	list-style-position:inside;
	border-top:1px solid;
	border-top-color:#666666;
	padding: 1px 30px 1px 15px;	
	}
	
li:hover ul#submenu li:hover, li.over ul#submenu li.over {
	background: #FF9900;
	}
	
ul {
	margin:0;
	padding:0;
	}

a {
	color:#000000;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-weight:bold;
	font-size:14px;
	text-decoration:none;
	}
	
a:visited {
	color:#000000;
	}
		
#mainpage {
	position:absolute;
	top: 70px;
	left: 2%;
	right: 2%;
	width:95.6%;
	background-color: #ffffff;
}

Please help me, cos I am really desperate about this. Sad I will really appreciate any ideas! Thank you.

Poco

Poco
Offline
Regular
Last seen: 15 years 13 weeks ago
Timezone: GMT+1
Joined: 2004-05-20
Posts: 20
Points: 0

&lt;li&gt; menu problem

In case somebody would be interested, here is how I made it work:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" language="javascript1.4">
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", "");
				}
			}
		}		
		for (z=0; z<2; z++) {
			secondlevel = document.getElementById("submenu"+z);
			for (i=0; i<secondlevel.childNodes.length; i++) {
				node = secondlevel.childNodes[i];
				if (node.nodeName=="LI") {
					node.onmouseover=function() {
						this.className+=" over";
					}
					node.onmouseout=function() {
						this.className=this.className.replace(" over", "");
					}
				}
			}
		}			
	}
}
window.onload=startList;
</script>

</head>

<body>
	<div id="mainpage">
		<div id="menu">
			<ul id="nav"> 
				<li><a href="#">Menu1</a>
					<ul id="submenu0">
						<li><a href="#">SubA</a></li>
						<li><a href="#">SubB</a></li>
						<li><a href="#">SubC</a></li>
					</ul>
				</li>
				<li><a href="#">Menu2</a>
					<ul id="submenu1">
						<li><a href="#">SubA</a></li>
						<li><a href="#">SubB</a></li>
						<li><a href="#">SubC</a></li>
					</ul>
				</li>
				<li><a href="#">Menu3</a></li>
			</ul>
		</div>
	</div>
</body>
</html>

body {
	background: #CCCCCC url('pics/backline.jpg') fixed;
	margin:0;
	padding:0;
	font-family:Arial, Helvetica, sans-serif;
	}
	
#menu {
	width:150px;
	height:500px;
	background-color:#CCCCCC;
	border-right:1px dashed;
	border-right-color:#666666;
	text-align:left;
	}

ul li {
	display:block;
	border-top:1px solid #666666;	
	text-indent:15px;
	width:9.4em;
	}

/******** Level 1 menu settings ***********/	
ul li:hover, ul li.over {
	display:block;
	border-top:1px solid #666666;	
	text-indent:15px;
	width:9.4em;
	background-color:#FFFFFF;
	}
/*****************************************/


/******sets the submenu visible after rolling over level 1 menu links********/
#menu ul li:hover ul#submenu0 li, #menu ul li.over ul#submenu0 li {
	visibility: visible;
	display:block;
	border-top:1px solid;
	border-top-color:#666666;
	padding: 1px 0px 1px 0px;	
	width:9.4em;
	}
/*************************************/
	
	
	
/************ SUBMENU ***************/
ul#submenu0 li {
	visibility:hidden;
	display:none;
	background-color:#777777;
	}
/*************************************/



/************ SUBMENU:HOVER *************/
ul#submenu0 li:hover, ul#submenu0 li.over {
	background: #FF9900;
	visibility:visible;
	display:block;
	width:auto;
	}
/****************************************/
	
ul {
	margin:0;
	padding:0;
	}

a {
	color:#000000;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-weight:bold;
	font-size:14px;
	text-decoration:none;
	}
	
a:visited {
	color:#000000;
	}
	
/* ---------- divs ---------- */	
#mainpage {
	position:absolute;
	top: 70px;
	left: 2%;
	right: 2%;
	width:95.6%;
	background-color: #ffffff;
	}
	
	
/****************************************************/
/*                 SKUSKA                           */
/****************************************************/
/******sets the submenu visible after rolling over level 1 menu links********/
#menu ul li:hover ul#submenu1 li, #menu ul li.over ul#submenu1 li {
	visibility: visible;
	display:block;
	border-top:1px solid;
	border-top-color:#666666;
	padding: 1px 0px 1px 0px;	
	width:9.4em;
	}
/*************************************/
	
	
	
/************ SUBMENU ***************/
ul#submenu1 li {
	visibility:hidden;
	display:none;
	background-color:#777777;
	}
/*************************************/



/************ SUBMENU:HOVER *************/
ul#submenu1 li:hover, ul#submenu1 li.over {
	background: #FF9900;
	visibility:visible;
	display:block;
	width:auto;
	}
/****************************************/

Suzy
Suzy's picture
Offline
Regular
Last seen: 11 years 17 weeks ago
Joined: 2003-05-30
Posts: 48
Points: 0

&lt;li&gt; menu problem

Poco wrote:
By the way, once I saw a drop-down and there was used a *.htc file to simulate it for IE. I just do not know how to make such a file and in which program. Smile Anyone knows?

try whatever:hover which is a simple .htc for IE hovers only

or a more complex IE patch for many things CSS it maybe worth taking a look at: Dean Edwards - IE7

ca

Suzy