Check Screen shot. Popup menu for "parent 2" is expanding on the left side under "Parent 3" button. i want to expand it on the left side of screen under the "parent 01" button. How is it possible? Following is the html for popup menu. What CSS need to be changed? <title>Simple Drop Down Menu</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function () { $('#nav li').hover( function () { //show its submenu $('ul', this).slideDown(100); }, function () { //hide its submenu $('ul', this).slideUp(100); } ); }); </script> <style type="text/css"> body {font-family:arial; font-size:11px;} /* remove the list style */ #nav { margin:0; padding:0; list-style:none; } /* make the LI display inline */ /* it's position relative so that position absolute */ /* can be used in submenu */ #nav li { float:left; display:block; width:100px; background:#ccc; position:relative; z-index:500; margin:0 1px; } /* this is the parent menu */ #nav li a { display:block; padding:8px 5px 0 5px; font-weight:700; height:23px; text-decoration:none; color:#fff; text-align:center; color:#333; } #nav li a:hover { color:#fff; } /* you can make a different style for default selected value */ #nav a.selected { color:#f00; } /* submenu, it's hidden by default */ #nav ul { position:absolute; left:0; display:none; margin:0 0 0 -1px; padding:0; list-style:none; } #nav ul li { width:200px; float:left; border-top:1px solid #fff; } /* display block will make the link fill the whole area of LI */ #nav ul a { display:block; height:15px; padding: 8px 5px; color:#666; } #nav ul a:hover { text-decoration:underline; } /* fix ie6 small issue */ /* we should always avoid using hack like this */ /* should put it into separate file : ) */ *html #nav ul { margin:0 0 0 -2px; } </style> </head> <body> <ul id="nav"> <li><a href="#">Parent 01</a></li> <li><a href="#" class="selected">Parent 02 > </a> <ul> <li><a href="#">Item 01</a></li> <li><a href="#" class="selected">Item 02</a></li> <li><a href="#">Item 03</a></li> </ul> <div class="clear"></div> </li> <li><a href="#">Parent 03 > </a> <ul> <li><a href="#">Item 04</a></li> <li><a href="#">Item 05</a></li> <li><a href="#">Item 06</a></li> <li><a href="#">Item 07</a></li> </ul> <div class="clear"></div> </li> <li><a href="#">Parent 04</a></li> </ul> <div class="clear"></div> Code (markup):
#nav ul li { border-top: 1px solid #FFFFFF; float: left; width: 200px; } Code (markup): Change width to whatever, e.g. 100px to fit it's parents.
What a useless post from you... he asked which CSS to change. Complete code (added doctype and stuff) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!-- start: index --> <html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Simple Drop Down Menu</title> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> <script type="text/javascript"> $(document).ready(function () { $('#nav li').hover( function () { //show its submenu $('ul', this).slideDown(100); }, function () { //hide its submenu $('ul', this).slideUp(100); } ); }); </script> <style type="text/css"> body {font-family:arial; font-size:11px;} /* remove the list style */ #nav { margin:0; padding:0; list-style:none; } /* make the LI display inline */ /* it's position relative so that position absolute */ /* can be used in submenu */ #nav li { float:left; display:block; width:100px; background:#ccc; position:relative; z-index:500; margin:0 1px; } /* this is the parent menu */ #nav li a { display:block; padding:8px 5px 0 5px; font-weight:700; height:23px; text-decoration:none; color:#fff; text-align:center; color:#333; } #nav li a:hover { color:#fff; } /* you can make a different style for default selected value */ #nav a.selected { color:#f00; } /* submenu, it's hidden by default */ #nav ul { position:absolute; left:0; display:none; margin:0 0 0 -1px; padding:0; list-style:none; } #nav ul li { width:200px; float:left; border-top:1px solid #fff; } #nav ul.alignleft { left:-100px; } /* display block will make the link fill the whole area of LI */ #nav ul a { display:block; height:15px; padding: 8px 5px; color:#666; } #nav ul a:hover { text-decoration:underline; } /* fix ie6 small issue */ /* we should always avoid using hack like this */ /* should put it into separate file : ) */ *html #nav ul { margin:0 0 0 -2px; } </style> </head> <body> <ul id="nav"> <li><a href="#">Parent 01</a></li> <li><a href="#" class="selected">Parent 02 > </a> <ul class="alignleft"> <li><a href="#">Item 01</a></li> <li><a href="#" class="selected">Item 02</a></li> <li><a href="#">Item 03</a></li> </ul> <div class="clear"></div> </li> <li><a href="#">Parent 03 > </a> <ul> <li><a href="#">Item 04</a></li> <li><a href="#">Item 05</a></li> <li><a href="#">Item 06</a></li> <li><a href="#">Item 07</a></li> </ul> <div class="clear"></div> </li> <li><a href="#">Parent 04</a></li> </ul> <div class="clear"></div> </body> </html> Code (markup):
I think i am not able to convey what i need. i need same width as you are seeing in image. Popup is appearing under "Parent 02 and 03" buttons. I want to shift its position to left side so that if I mouseover the "Parent 02" poppup menu should appear under the "Parent 01 and 02". if is set width to 300 , popup get more width on right side. I need it on the left side. Don't know how? I am not good in CSS.
Thanks CSM for your kind help. It's working. Rep for you. I apologize I am not good in CSS. Just one more question. All menu is sharing same css. Why popup for "Parent 03" is appearing on right side?
add class="alignleft" to the UL for Parent 03. I did it like that so you can choose if you want it left or right.
i was lookin for something , and i didnt find it until ur website showed it up, so whoever own this site thank u , u helpd me a lot , thank you very much