Help - Search - Members - Calendar
Full Version: drop down nav bar not showing
HTMLHelp Forums > Web Authoring > Cascading Style Sheets
jgcalifornia
hi. can anyone help me figure out why the heak the dropdown is being hidden by the white content?
It was a regular nav bar before, no drop downs, and we have been trying to add a drop down to one of the tabs, and i see it, but it is underneath something.

thank you on advance!

Here is the code just for the nav bar alone:


<style type="text/css">
#navigation { margin: 0; padding: 0; clear: both; width: 625px; height: 51px; background: #808080; }
ul.nav-main,
ul.nav-main li { list-style: none; margin: 0; padding: 0; }
ul.nav-main { position: relative; z-index: 597; }
ul.nav-main li:hover > ul { visibility: visible; }
ul.nav-main li.hover,
ul.nav-main li:hover { position: relative; z-index: 599; cursor: pointer; }
ul.nav-main li { float: left; display: block; height: 51px; color: #fff;
font: 14px Times New Roman, Times, serif;
background: url(../images/separator.gif) no-repeat right center; }
ul.nav-main li a { display: block; padding: 16px 16px 0 16px; height: 35px; color: #fff;
font: 14px Times New Roman, Times, serif; text-decoration: none; }
ul.nav-main li a:hover { color: #000; }
ul.nav-main *.list { padding-right: 22px; no-repeat right top; }
ul.nav-sub { visibility: hidden; position: absolute; padding: 10px; top: 48px; left: 0; z-index: 598;
background: #808080; }
ul.nav-sub li { list-style: none; display: block; padding: 0; height: 27px; float: none; width: 100px;
border-bottom: 1px solid #5a5a5a; background: none; }
ul.nav-sub li a { list-style: none; display: block; padding: 6px 5px 6px 5px; height: 15px; float: none;
width: 145px; background: none; font: 12px Times New Roman, Times, serif; }
</style>
</head>
<body>
<ul id="navigation" class="nav-main">
<li><a href="http://www.harmonyhall.com/">HOME</a></li>
<li><a href="http://www.harmonyhall.com/">ARTISTS</a></li>
<li><a href="http://www.harmonyhall.com/">ORDER / SHIPPING</a></li>
<li class="list"><a href="http://www.harmonyhall.com/">NEWSLETTER</a>
<ul class="nav-sub">
<li><a href="http://www.harmonyhall.com.">MARCH 2012</a></li>
<li><a href="http://www.harmonyhall.com">JUNE 2011</a></li>
<li><a href="http://www.harmonyhall.com">JANUARY 2010</a></li>
</ul>
</li>
<li><a href="http://www.harmonyhall.com/">CONTACT US</a></li>
</ul>
</body>
</html>

here is the code when inserted to the html page with existing content:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Harmony Hall Art Gallery</title>
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/layout_generic.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/bio.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/artist.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/dropdown-menu.css" media="screen" />

<style type="text/css">
#main { width: inherit; height: inherit; }
.picturecontent { float: left; margin: 0 7px 7px 0; width: 300px; height: 320px; background-color: #f5f5f5; text-align: center; }
.img { border: none;}
.biobiblio { line-height: 16px; font-size: 12px; margin-bottom: 20px; padding-bottom: 3px; left: 675px; top: 148px; height: auto; position: absolute; margin-right: 20px; margin-left: 10px; }
.biobiblio .general img { float: left; border: 0; padding: 0 7px 5px 0; }
.description { clear: left; }
a.fb:link { background-color: #808080; }
a.fb:visited { background-color: #808080; }
a.fb:hover { background-color: #808080; }
a.fb:active { background-color: #808080; }
a.c6 { background-color: #ffffff; text-decoration: none; }
a.c6:hover { background-color: #ffffff; color: #00548d; text-decoration: none; }
a.c5 { background-color: #e6e6e6; text-decoration: none; }
a.c5:hover { text-decoration: none; color: #00548d; }
.style6 {font-size: 12px; }
div.c2 { text-align: center; }
div.c1 {margin-left: 2em}
/* The CSS For the DropDown NavBar Below */
#navigation2 { margin: 0; padding: 0; clear: both; width: 625px; height: 51px; background: #808080; }
ul.nav-main2,
ul.nav-main2 li { list-style: none; margin: 0; padding: 0; }
ul.nav-main2 { position: relative; z-index: 597; visibility: visible; }
ul.nav-main2 li:hover > ul { visibility: visible; }
ul.nav-main2 li.hover,
ul.nav-main2 li:hover { position: relative; z-index: 599; cursor: pointer; }
ul.nav-main2 li { float: left; display: block; height: 51px; color: #fff;
font: 14px Times New Roman, Times, serif;
background: url(../images/separator.gif) no-repeat right center; }

ul.nav-main2 li a { display: block; padding: 16px 16px 0 16px; height: 35px; color: #fff;
font: 14px Times New Roman, Times, serif; text-decoration: none; }

ul.nav-main2 li a:hover { color: #000; }
ul.nav-main2 *.list { padding-right: 22px; no-repeat right top; }
ul.nav-sub { visibility: hidden; position: absolute; padding: 10px; top: 48px; left: 0; z-index: 598;
background: #808080; }
ul.nav-sub li { list-style: none; display: block; padding: 0; height: 27px; float: none; width: 100px;
border-bottom: 1px solid #5a5a5a; background: none; }
ul.nav-sub li a { list-style: none; display: block; padding: 6px 5px 6px 5px; height: 15px; float: none;
width: 145px; background: none; font: 12px Times New Roman, Times, serif; }
</style>
</head>

<body>
<div id="header"><img alt="" src="images/hhlogo.gif" class="floatleft" /><img alt="" title="" src="../spacer.gif" border="0" height="44" width="829" /><a href="http://www.facebook.com/home.php?ref=hpskip#!/pages/Harmony-Hall-Jamaica/187792011252856" class="fb" title="" target="_blank"><img alt="" title="" src="../fb2.png" border="0" height="37" width="135" /></a>

<ul id="navigation2" class="nav-main2">
<li><a href="http://www.harmonyhall.com/">HOME</a></li>
<li class="list"><a href="http://www.harmonyhall.com/">ARTISTS</a></li>
<li><a href="http://www.harmonyhall.com/">ORDER / SHIPPING</a></li>
<li class="list"><a href="http://www.harmonyhall.com/">NEWSLETTER</a>
<ul class="nav-sub">
<li><a href="http://www.harmonyhall.com.">MARCH 2012</a></li>
<li><a href="http://www.harmonyhall.com">JUNE 2011</a></li>
<li><a href="http://www.harmonyhall.com">JANUARY 2010</a></li>
</ul>
</li>
<li><a href="http://www.harmonyhall.com/">CONTACT US</a></li>
</ul>
</div>
</div>

<div id="content">
<div id="right">
<table width="786" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td valign="top" width="366">
<p><span class="bigphoto">
<img src="images/HHfromNW.jpg" alt="Harmony Hall" height="317" width="366" /></span></p>
</td>
<td class="top" width="20"><img src="images/spacer.gif" alt="" align="bottom" height="20" width="20" /></td>
<td class="top" width="393">
<h1>HARMONY HALL</h1>
<p>Harmony Hall was acquired in 1980 by Annabella Proudlock, who, with a group of friends, spent a year restoring the mid-19th century Methodist manse to its original glory.</p>
<p>Promoting excellence in, and broadening the appreciation of Jamaican art and craft was the principal motivation for opening the gallery in the popular resort area of Ocho Rios, since when, it has received international acclaim.</p>
<p>On line, we only sell original paintings, which can enter many countries (U.S.A., the European Union, et al.) duty and tax free. If requested, we will include a certificate of authenticity and the brief biography with each shipment. Alas, the risk of shipping ceramic sculpture precludes us from offering these items for sale on the site.</p>
With over 100 artists and artisans represented, the art ranges from naive to highly sophisticated, featuring many of Jamaica</td>
</tr>
</tbody>
</table>
</div>
<div id="left">
<div class="box">

<!--PLEASE ADD IN THE EXHIBITION SCHEDULE HERE-->
<h2>EXHIBITION 2011 - 2012</h2>
<p><br/>
November 27 - 30th Anniversary Show<br/>
January 1 - 31st Intuitive Exhibition<br/>
February 5 - artist<br/>
March 4 - srtist<br/>
April 8 - artist</p>
</div>
<!--END OF EXHIBITION SCHEDULE-->
<div class="box">
<h2>GALLERY OPENING HOURS</h2>
<p><br/>
Tuesday - Sunday 10 am - 5:30 pm<br/>
Tel: +1.876.975.4222<br/>
Tel: +1.876.974.2870<br />
Fax: +1.876.974.2651<br />
E-mail: <a class="c5" href="mailto:info@harmonyhall.com">info@harmonyhall.com</a></p>
</div>
</div>
<div class="#insidebox c2, c1"><a href="toscanini.htm"><img src="images/toscanini.jpg" alt="Toscanini" width="190" height="115" /></a><br />
<a href="ordershipping.htm"><img src="images/paypal.jpg" alt="Paypal" width="188" height="66" /></a></div>
</div>
</body>
</html>



pandy
You've better post the URL to the page. With just the code you posted the nav bar isn't hidden.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2014 Invision Power Services, Inc.