The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> drop down nav bar not showing
jgcalifornia
post Mar 18 2012, 09:44 AM
Post #1





Group: Members
Posts: 7
Joined: 23-April 10
Member No.: 11,721
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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Mar 18 2012, 10:57 AM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
You've better post the URL to the page. With just the code you posted the nav bar isn't hidden.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Cascading Style Sheets · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 18th April 2024 - 07:37 PM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC