1

I have asked everyone I know, and I've searched this site too, but no luck. Now I'm asking all of you for help. I am using HTML5 and CSS3 to make my second website. (First one was 7 years ago, looks terrible now!)

My current roadblock: I created a drop down menu on one of the tabs on my Nav Bar, but it goes behind the background image and any other content on the page. I have tried using the z-index in every possible place (with a position marking) and I haven't had any luck.

Any ideas would be greatly appreciated! Thanks.

Here's the NavBar HTML Code:

<div id="nav"> 
<ul> 
<li><a href="HomePageNew.html">Home</a></li> 
<li><a href="BioNew.html">Bio</a></li> 
<li><a href="GigScheduleNew.html">Gigs</a></li> 
<li><a href="Groups.html">Groups </a>
    <ul>
    <li><a href="#">SB Trio</a></li>
    <li><a href="#">NYGT</a></li>
    <li><a href="#">Qtto Bloomdido</a></li>
    </ul>
</li> 
<li><a href="">Publications</a></li>
<li><a href="">Repairs</a></li>
<li><a href="">Lessons</a></li>
<li><a href="">Contact</a></li>
</ul> 
</div>

Here's the CSS from the NavBar:

#nav {    position: relative;   
    top: 0;
    text-align: center;     
    background-color: #FF9933;  
    background-image: url(images/WoodAfromosia.jpg);    
    font-family: "Comic Sans MS", Arial, Helvetica, sans-serif;
    font-size: 130%;}

#nav ul {   list-style: none;   
    padding: 1; 
    margin: 0% 0% 0% 0%;}    

#nav ul li { float: center;
    display:inline-block;
    font-weight: bold; 
    text-transform: uppercase;} 
#nav { overflow: hidden; width: 100%;}

#nav ul li a {display: inline-block;    
padding: .5em; 
background-color: peachpuff;
background-image: url(images/Paperpapyrus.jpg);     
border: 2px solid #000;     
border-radius: .5em; 
margin: 3% 6% 3% 6%;    
white-space:nowrap;}  


#nav ul ul {display: none;}

#nav ul ul li {display: block;
float: left;
text-align: left;
margin: -6.5% 0% 0% -40% ;
width: 100px;} 

#nav li:hover ul { position:absolute; /* Position under correct tab */
display:block;}

#nav li:hover li {  float:none;
overflow: visible;}


#nav ul a:link { color: black;   }  
#nav ul a:visited { color: black;   }  
#nav ul a:focus {   color: blue;  
border-color: #fff; }  
#nav ul a:hover { color: darkviolet; 
border-color: #fff;   }  

#nav ul a:active {color: cyan; }    

Here's the CSS from the Background Image and Intro Image just below the NavBar:

body {  position: relative;
padding: 0;             
margin: 0;
background-color: azure;  
background-image: url(images/Paperwhitebricks.jpg);} 

a {text-decoration: none;}  

#intro {text-align: center;
margin: -1% 0% -.5% 0%;}

1 Answer 1

4

remove overflow:hidden from the #nav it will fix the issue

#nav {
    overflow:hidden /* remove */
    width: 100%;
}

here is the fiddle

JS Fiddle

1
  • 1
    OMG!!! Thank you so much!! You just saved me 3 days of staring at my code. Thank you!!! Solved.
    – Bloomworks
    Oct 11, 2014 at 16:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.