p2p.wrox.com Forums

p2p.wrox.com Forums (http://p2p.wrox.com/)
-   BOOK: ASP.NET 3.5 Website Programming Problem Design Solution (http://p2p.wrox.com/book-asp-net-3-5-website-programming-problem-design-solution-526/)
-   -   Z-index in dropdown menu (http://p2p.wrox.com/book-asp-net-3-5-website-programming-problem-design-solution/87742-z-index-dropdown-menu.html)

bnorg June 12th, 2012 08: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.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<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;}

<div id="page">

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

                <div style="padding-top:15px">             
                                <div class="hdrtitle hdrtext">Dropdown Menu</div>
                                <div class="hdrsub">Using CSS</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>
                                <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>
<li><a class="center_hassub" href="http://www.biblebooklets.com/readbooklet.htm">Articles</a>
                                <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>
                <li><a id="right_nosub" href="http://www.biblebookletstore.com/default.aspx">Store</a></li>
</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><!--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><!--end #ftr-->

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

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

#nav      {
                list-style-type: none;
                padding: 0;
                margin: 0;
#nav li {                position: relative;
ul#nav > li            {
                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;
                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 12:30 AM.

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