View Single Post
  #1 (permalink)  
Old June 12th, 2012, 08:11 PM
bnorg bnorg is offline
Authorized User
Points: 139, Level: 2
Points: 139, Level: 2 Points: 139, Level: 2 Points: 139, Level: 2
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
Join Date: Aug 2003
Location: Spokane, WA, USA.
Posts: 25
Thanks: 0
Thanked 0 Times in 0 Posts
Default 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 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="" 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="">Booklets</a></li>
                <li><a class="center_hassub" href="">WM Press</a>
                                <li><a href="">Tour</a></li>
                                <li><a href="">Newsletters</a></li>
                                <li><a href="">Footprints</a></li>
<li><a class="center_hassub" href="">Articles</a>
                                <li><a href="">Salvation</a></li>
                                <li><a href="">Growing</a></li>
                                <li><a href="">Religions</a></li>
                <li><a id="right_nosub" href="">Store</a></li>
</div><!--end #hdr-->

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

                <div id="lft" class="pick">
                                <div style="padding-left:15px">
                                                <a href="">Faith</a>
                                                <a href="">Salvation</a>
                                                <a href="">Deity</a>
                                                <a href="">Deliverance</a>
                                                <a href="">Pentecost</a>
                                                <a href="">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;

Last edited by bnorg; June 12th, 2012 at 08:50 PM.