p2p.wrox.com Forums

p2p.wrox.com Forums (http://p2p.wrox.com/index.php)
-   BOOK: ASP.NET 3.5 Website Programming Problem Design Solution (http://p2p.wrox.com/forumdisplay.php?f=526)
-   -   Z-index in dropdown menu (http://p2p.wrox.com/showthread.php?t=87742)

bnorg June 12th, 2012 07:11 PM

Z-index in dropdown menu
 
The instruction behind this dropdown menu exercise is from HTML5 by Matthew David. I had to modify it from a vertical to horizontal menu and fix up the code somewhat. The IE9 browser displays it as hoped but older IE versions and FireFox do not. I can’t seem to find a way around what the latter browsers do so have to conclude that they don’t handle the Z-Index attribute as well as the former browser. What people have to say about FireFox is that it should work with Z-Index properly so I’m probably not implementing it the right way. The demo is at www.biblebookletstore.com/dropdown.htm. Will appreciate anything that would make FireFox cooperate. The Web page and CSS are below.
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" xml:lang="en" lang="en">
<head>
<title>Dropdown Menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Refresh" content="3600" />
<link href="css/main.css" rel="stylesheet" type="text/css" />
<link href="css/fourcolA.css" rel="stylesheet" type="text/css" />
<link href="css/fourcolorA.css" rel="stylesheet" type="text/css" />
<link href="css/downmenu.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#page  {
                max-width: 1600px;
                background: url(img/lftbg_demo.gif) repeat-y 19% 0;}
.hdrbkgd              {background: #FFCB2D url(img/nav_bg.gif) bottom left repeat-x;}
.hdrtext              {font-family:broadway;}
#midlft div,#midrgt div,#rgt div {
                padding: 6px 12px;
}
#menu  {position:relative;  z-index:30;}
#hdr  { position:relative;  z-index: 20;}
#wrap  { position:relative;  z-index: 10;}
</style>
</head>

<body>
<div id="page">

<div id="hdr" class="hdrbkgd group">
                <div id="hdrlogo">                         
                                <img src="img/applelogo.jpg" />
                </div>

                <div style="padding-top:15px">             
                                <div class="hdrtitle hdrtext">Dropdown Menu</div>
                                <div class="hdrsub">Using CSS</div>
                </div>

                <div id="menu" class="group">
                <ul id="nav">
                <li><a id="left_nosub" href="http://www.biblebooklets.com/index.htm">Booklets</a></li>
                <li><a class="center_hassub" href="http://www.wmpress.org">WM Press</a>
                                <ul>
                                <li><a href="http://www.biblebooklets.com/wmpress.htm">Tour</a></li>
                                <li><a href="http://www.biblebooklets.com/newsletter.htm">Newsletters</a></li>
                                <li><a href="http://www.wmpress.org/Footprints.pdf">Footprints</a></li>
                                </ul>
                </li>
<li><a class="center_hassub" href="http://www.biblebooklets.com/readbooklet.htm">Articles</a>
                                <ul>
                                <li><a href="http://www.biblebooklets.com/bookbasics.htm">Salvation</a></li>
                                <li><a href="http://www.growingchristians.org/dfgc/index.html">Growing</a></li>
                                <li><a href="http://www.gatebreakers.com/articles.php">Religions</a></li>
                                </ul>
                </li>
                <li><a id="right_nosub" href="http://www.biblebookletstore.com/default.aspx">Store</a></li>
                </ul>
    </div>
</div><!--end #hdr-->

<div id="wrap" class="group">

                <div id="lft" class="pick">
                                <div style="padding-left:15px">
                                                <a href="http://www.biblebooklets.com/faith.htm">Faith</a>
                                                <a href="http://www.biblebooklets.com/salvation.htm">Salvation</a>
                                                <a href="http://www.biblebooklets.com/character.htm">Deity</a>
                                                <a href="http://www.biblebooklets.com/deliverance.htm">Deliverance</a>
                                                <a href="http://www.biblebooklets.com/pentecost.htm">Pentecost</a>
                                                <a href="http://www.biblebooklets.com/evangelize.htm">Evangelize</a>
                                </div>
                </div><!--end #lft-->

                <div id="midlft">
                                <div>Vestibulum risus. Nullam adipiscing. Etiam fringilla neque id erat. Sed varius</div>               
                </div><!--end #midlft-->

                <div id="midrgt">
                                <div>Phasellus suscipit tristique lorem. Proin dolor massa, eleifend at, mollis</div>
                </div><!--end #midrgt-->

                <div id="rgt">
                                <div><strong>Cras ut justo eu arcu</strong> varius viverra in a enim. Nulla</div>
                </div><!--end #rgt-->
</div><!--end #wrap-->

<div id="ftr">
                <div>footer</div>
</div><!--end #ftr-->

</div><!--end #page-->
</body>
</html>

#menu {
                clear: left;
                width: 50%;
                margin: 0 auto;
                padding-top: 10px;
                font-size: 11px;
}
#menu ul ul        {
                position: absolute;
                top: 0;
                left: 100%;
                display:none;
}             
#menu ul li:hover ul
                {display:block;}

#nav      {
                list-style-type: none;
                padding: 0;
                margin: 0;
                overflow:hidden;
}
#nav li {                position: relative;
}
ul#nav > li            {
                float:left;
                width: auto;     
}
#nav li a                {
                font-size: 90%;
                text-decoration: none;
}
ul#nav > li > a {
                background-image: url(../img/center.png);
                display: block;
                color: #fff;
                font-weight: bold;
                width: 81px;
                height: 42px;
                text-align: center;
                border-bottom: 0;         
                line-height: 48px;
                padding-left: 1px;
                }
ul#nav > li:hover > ul {
                background-image: url(../img/dropdown.png);
                background-repeat: no-repeat;
                background-position: bottom left;
                position:absolute;
                top:42px;
                left:0;
          z-index:40;
                width:152px;
                margin: 0 0 0 3px;
                padding: 0;
                color: #fff;
}
#nav li:hover ul li a {
                background-image: none;
                display: block;
                width: 142px;
                height: 28px;
                margin: 0;
                padding: 0 0 0 11px;
                text-align: left;
                color: #000;
                line-height: 26px;
                font-weight: normal;
}
#nav li:hover a.center_hassub {
                background-image: url(../img/center_hassub.png);
                color: #000;
}
#nav #left_nosub, #nav #left_hassub    {
                background-image: url(../img/left.png);
                color: #fff;
                padding-left: 1px;
                margin-right: -1px;
}
#nav li:hover #left_nosub            {
                background-image: url(../img/left_nosub.png);
                color: #000;
}
#nav li:hover #left_hassub          {
                background-image: url(../img/left_hassub.png);
                color: #000;
}
#nav #right_nosub, #nav #right_hassub {
                background-image: url(../img/right.png);
                color: #fff;
}
#nav li:hover #right_nosub {
                background-image: url(../img/right_nosub.png);
                color: #000;
}
#nav li:hover #right_hassub {
                background-image: url(../img/right_hassub.png);
                color: #000;
}
#nav li:hover ul li a:hover            {
                background-image: url(../img/sub_hover.png);
                color: #000;
}



All times are GMT -4. The time now is 08:03 PM.

Powered by vBulletin®
Copyright ©2000 - 2019, Jelsoft Enterprises Ltd.
© 2013 John Wiley & Sons, Inc.