SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict
    Join Date
    Feb 2009
    Location
    israel
    Posts
    218
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Can't select an itme from scrolling menu

    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>
    Attached Images Attached Images

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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.

  3. #3
    SitePoint Addict
    Join Date
    Feb 2009
    Location
    israel
    Posts
    218
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •