asked on

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

ASKER CERTIFIED SOLUTION

remorina

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

samj

ASKER

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.

remorina

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