Hi,
I have the following navigational menu bar. The menu has multiple
parent menu items. For the sake of the example, I only provide the first menu
item. It has about five child menu items. This is a horizontal menu bar at the
top of the ASP.Net website. What currently happens is when a user hovers over
the Parent menu item, the child menu items appear below, horizontally, of
course. And each time, the child menu items appear to the far left. So the
problem is when we get to the 5th parent menu item, going across, hover over
it, the child menu items appear below towards the far left. So it cosmetically
looks wrong but also causes the user to further navigate their mouse to get to
the child items. Anyway to position the child menu items to appear directly
below the parents and not always to the far left?
Page.aspx:<div id="container" class="top_menu"> <ul id="nav">
<li class="sub"><a href="#url"><b style="width: 100px;">Parent</b></a>
<ul style="display: none;"> <li><a
href='child1.aspx'>Child 1</a></li> <li><a
href='child2.apsx'>Child 2</a></li> <li><a
href='child3.aspx'>Child 3</a></li> <li><a
href='child4.aspx'>Child 4</a></li> <li><a
href='child5.aspx'>Child 5</a></li> </ul>
</li>
menu.css:#container {width:960px; height:20px; position:relative;}
#nav, #nav ul {padding:0; margin:0; width:960px; list-style-type:none;}
#nav li {float:left; text-align:center; }#nav li a {float:left;
text-decoration:none; font-family: Arial, Helvetica, sans-serif;
font-size:11px; color:#3d2e1c; }#nav li a b {float:left; height:30px;
line-height:28px; font-weight:bold; cursor:pointer; font-size:11px;
font-weight:bold;}#nav li.sub a b { border-bottom:solid 1px #000000;}
#nav b.hover {color:#ff0000; background:url(../Images/line_footer.jpg)
no-repeat center bottom; }#nav i.hover {color:#ff0000;}#nav em.hover
{color:#080;}#nav ul ul ul a:hover {color:#080;
background:url(../Images/line_footer.jpg) no-repeat center bottom;}
#nav ul {display:none;}#nav ul {position:absolute; left:0; top:30px;
background:none; width:auto; border-top:solid 1px #000000; height: 0px}#nav ul
li {float:left; position:relative; }#nav ul li a {display:block; padding:0 20px
0 10px; font-size:12px; line-height:25px; cursor:pointer; }#nav ul li a i
{display:block; font-style:normal; cursor:pointer;}#nav ul li a.sub {
background:url(../Images/line_footer.jpg) no-repeat center bottom;}
Thanks,Andy
*******************************************************************
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [email protected]
*******************************************************************
