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;
}
Z-index in dropdown menu
