Bloomworks
Bloomworks

Reputation: 11

Drop down menu hidden behind background image

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%;}

Upvotes: 1

Views: 4762

Answers (1)

Vitorino fernandes
Vitorino fernandes

Reputation: 15971

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

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

here is the fiddle

JS Fiddle

Upvotes: 4

Related Questions