Wrox Programmer Forums
|
BOOK: ASP.NET 3.5 Website Programming Problem Design Solution
This is the forum to discuss the Wrox book ASP.NET 3.5 Website Programming Problem Design Solution by Chris Love; ISBN: 978-0-470-18758-6
Welcome to the p2p.wrox.com Forums.

You are currently viewing the BOOK: ASP.NET 3.5 Website Programming Problem Design Solution section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
 
Old June 12th, 2012, 07:11 PM
Authorized User
 
Join Date: Aug 2003
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 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;
}

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





Similar Threads
Thread Thread Starter Forum Replies Last Post
Dropdown menu calone Dreamweaver (all versions) 2 November 27th, 2010 07:53 PM
Clearing the Dregs from a Dropdown menu rit01 ASP.NET 2.0 Basics 1 September 11th, 2006 06:26 AM
Urgent help in dropdown menu vigneshb4u BOOK: Professional JavaScript for Web Developers ISBN: 978-0-7645-7908-0 0 January 10th, 2006 06:29 PM
Javascript Dynamic dropdown Menu itHighway Javascript How-To 0 July 24th, 2005 10:53 PM
dropdown menu population with ONCHANGE YoungLuke JSP Basics 1 September 25th, 2003 02:46 PM





Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.