Can't select an itme from scrolling menu

**deotpit** · Apr 28, 2012 00:51

Hi Everyone,
My code is consisted of 2 main menu items: Menu1 and menu2. The second menu item: menu2 has a scrolling menu when hovered. The trouble is: I cannot make a selection from that scrolling menu because it is placed "far" from its' ancestor the main menu item.
I need that submenu to be placed where it is placed so i have to ask for help in telling me whether there is a
"CSS Technique" to select an item from "remote submenus".
Attached is the code + a screenshot of that page.
Thanks a lot !

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>to_sitepoint</title>
<style type="text/css">
	html, body, div, ul
	{
		margin: 0;
		padding: 0;
		border: 0;
		font-size: 100%;
		font: inherit;
		vertical-align: baseline;
	}
	#main 
	{
		position:absolute;
		width:950px; 
		height:30px;
		left:50%;
		margin-top:0px;
		margin-left:-470px;
		margin-right:auto;
		border:2px solid #8c8b4b;
		top:6%; 
	}
 	#main li
	{
		width:92px;
		height:30px;
		/*padding-top:-34%;*/
		float:left;
		list-style-type:none;
		border:2px solid red;
    }
	#main li a{text-decoration:none;}
	#main li ul li{width:400px;border:2px solid #8c8b4b; height:30px;}
	li.menu1{background-image:url('images/men1.png');}
	li.menu2{background-image:url('images/men1.png');}
	.menu2 li a{color:white; font-weight:bold;}
	li.menu2 ul 
	{
		display:none; 
	}
	li.menu2:hover ul 
	{
		list-style:none; 
		display:block; 
		font-size:110%; 
	}
	li.menu2:hover ul li {clear:left; }
		
	ul li ul.rounded-corner
	{
		border:2px solid red;
		height: 200px; width:776px; 
		background-image:url(../banner/bg_to_sitepoint.gif);
		background-repeat:no-repeat;
		margin-top:170%;
		border-bottom-right-radius:50px;
		border-bottom-left-radius:50px;
		border-top-left-radius:50px;
		border-top-right-radius:50px;
		-moz-border-radius-bottomright:50px;
		-moz-border-radius-bottomleft:50px;
		-moz-border-radius-topleft:50px;
		-moz-border-radius-topright:50px;
	}
</style>
</head>
<body>
	<ul id="main">
		<li class="menu1"><a href="#">menu item1</a></li>			
		<li class="menu2">menu item2
			<ul class="rounded-corner">
				<li><a href="#">submenu2 item1</a></li>
				<li><a href="#">submenu2 item2</a></li>
    			<li><a href="#">submenu2 item3</a></li>
			</ul> 	
     	</li>
	</ul>
</body>
</html>

**Paul O'B** · Apr 28, 2012 02:36

Hi,

The menu must stay in contact so nest a div and give that padding-top to push the ul away.

e.g.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>to_sitepoint</title>
<style type="text/css">
html, body, div, ul {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
#main {
	position:relative;
	width:950px;
	height:30px;
	margin:75px auto 0;
	border:2px solid #8c8b4b;
}
#main li {
	width:92px;
	height:30px;
	/*padding-top:-34%;*/
		float:left;
	list-style-type:none;
	border:2px solid red;
}
#main li a { text-decoration:none; }
#main li ul li {
	width:400px;
	border:2px solid #8c8b4b;
	height:30px;
}
li.menu1 { background-image:url('images/men1.png'); }
li.menu2 { background-image:url('images/men1.png'); }
.menu2 li a {
	color:white;
	font-weight:bold;
}
li.menu2 div {
	position:absolute;
	margin-left:-999em;
	padding-top:200px;
}
li.menu2 ul {
	list-style:none;
	margin:0;
	font-size:110%;
}
li.menu2:hover div { margin:0; }
li.menu2:hover ul li { clear:left; }
ul li ul.rounded-corner {
	border:2px solid red;
	height: 200px;
	width:776px;
	background-image:url(../banner/bg_to_sitepoint.gif);
	background-repeat:no-repeat;
	-webkit-border-radius:50px;
	-moz-border-radius:50px;
	border-radius:50px;
}
</style>
</head>
<body>
<ul id="main">
		<li class="menu1"><a href="#">menu item1</a></li>
		<li class="menu2">menu item2
				<div>
						<ul class="rounded-corner">
								<li><a href="#">submenu2 item1</a></li>
								<li><a href="#">submenu2 item2</a></li>
								<li><a href="#">submenu2 item3</a></li>
						</ul>
				</div>
		</li>
</ul>
</body>
</html>

It's best to avoid vertical percentages as they always refer to the width of the containing block and not the height so you get weird results when you resize the screen. Don't use display:none to hide menus but place them off left and then bring them back into view again.

Don't use the left:50% with a negative left margin to center an absolute element because that means it will slide off the screen at small screen sizes. If it needs to be absolute then wrap a parent around it and absolutely place that at left :0 width a 100% width and then just give the inner element width and auto margins. Or for for good browsers you can use left:0;right:0;margin:auto on an absolute element that has width defined and it will center.

**deotpit** · Apr 28, 2012 02:53

Thanks a lot Paul,
I'm glad you referred to more issues then I asked. Those issues were my future problems because my page is displayed differently on a desk machine and laptop.
I haven't implemented yet your instructions but i'm sure it'll make a great improvement and less future questions.
Thanks

User Tag List

Thread: Can't select an itme from scrolling menu

Thread Tools

Display

Can't select an itme from scrolling menu

Bookmarks

Bookmarks

Posting Permissions