Locate this ul under its parent li cross browser

Hi
Please view this page http://www.3marulanway.com.au/
the sub menu showing needs to be under its parent list item Questions/Answers. even if I re size the window.

I included the html code and the css code below

thx

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Default.master.cs" Inherits="MasterPage" %>
<!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 id="Head1" runat="server">
    <title></title>
    <asp:ContentPlaceHolder id="HeaderContent1" runat="server">        
    </asp:ContentPlaceHolder>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/reset/reset-min.css" />
    <link href="styles/masterStyle.css" rel="stylesheet" type="text/css" />
    <script src="jScripts/jquery-1.3.2.js" type="text/javascript"></script>
    <% if(false) { %>
    <script src="jScripts/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script>
    <% } %>    
    <script src="jScripts/master.js" type="text/javascript"></script>
</head>
<body>
<noscript><h2>Sorry, this page requires javascipt.</h2></noscript>
<div id="outer">
    <div id="topMenu">
    <ul id="menu">
        <li><a href="Default.aspx">PhD Tutoring</a></li>
        <li class="show" ><a href="specials.aspx" title="Specials offers">Free trial !</a></li>
        <li><a href="opportunity.aspx" title="employment and investors">Opportunity</a></li>
        <li>
            <a href="#">Questions/Answers</a>
            <ul class="subMenu"><span>
	            <li><a href="pink_blue_slip.aspx">Year 7-10 Mathematics</a></li>
	            <li><a href="auto_service.aspx">HSC/Prelim Standard English</a></li>
	            <li><a href="auto_repair.aspx">HSC/Prelim Advanced English</a></li>
	            <li><a href="auto_report.aspx">HSC/Prelim Maths</a></li>
	            <li><a href="auto_electrical.aspx">HSC/Prelim Maths Ext 1</a></li>
	            <li><a href="auto_air_condition.aspx">HSC Maths Ext 2</a></li>
	            <li><a href="auto_lpg.aspx">HSC/Prelim Chemistry</a></li></span>
            </ul>
        </li>
        <li><a href="login.aspx">My Account</a></li>
        <li><a href="contactUs.aspx">Contact Us</a></li>
    </ul>  <!-- end of ul#menu -->  
    </div>
    <div id="bannerBG">PhD Tutoring</div>
    <div id="brand_logo"></div>     
    <div id="mainContent">
        <div id="rightCol">
                <asp:ContentPlaceHolder ID="CPH1" runat="server"></asp:ContentPlaceHolder>
        </div>
    </div>        
</div>
</body>
</html>

<!--*****************************************...>

div#outer{text-align: left; position: relative; width: 100%; overflow: auto; top: 0px;}
div#topMenu ul{text-align:center;}
div#topMenu ul li{ display:inline;}
ul#menu{background-image: url('../images/graySlice.jpg'); width: 100%; height: 30px; z-index: 1;}
ul#menu, #bannerBG{background-repeat: repeat-x;}
ul#menu li { list-style: none;}
ul#menu a, #footer a {font-size: small; padding:10px 10px; color: White;}
ul#menu li ul.subMenu {text-align: left; position: absolute; width: 13em; z-index: 3; background-color: #666; vertical-align: bottom; }
ul#menu li a {padding-top: 5px;}
ul#menu a:hover{background-color: Black;}
ul#menu li ul li a{display: block;}

Open in new window

samjAsked:
Who is Participating?
 
remorinaCommented:
Hi sami,
Please try modifying masterStyle.css with the two css classes as attached below

Add position:relative to ul#menu li, and add left:0 to ul#menu li ul.subMenu

Cheers
ul#menu li { list-style: none;position:relative;}
ul#menu li ul.subMenu {text-align: left; position: absolute; width: 13em; z-index: 3; background-color: #666; vertical-align: bottom;left:0; }

Open in new window

0
 
samjAuthor Commented:
Thanks for that.

It is almost there. i.e. the subMenu is not under the parent. it is covering the parent. the parent needs to be shown.
0
 
remorinaCommented:
That happens in IE.
Try adding a top position to ul#menu li ul.subMenu  as below

ul#menu li ul.subMenu {text-align: left; position: absolute; width: 13em; z-index: 3; background-color: #666; vertical-align: bottom;left:0;top:28px;}

Open in new window

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.