I've reached out to all my contacts and combed through various resources, but I'm still stuck. Seeking assistance from the community now! I'm working on my second website using HTML5 and CSS3 (my first attempt was 7 years ago, and it's pretty cringeworthy now!)
The current hurdle I'm facing: I've created a dropdown menu on one of the tabs in my Nav Bar, but it keeps getting hidden behind the background image and other content on the page. I've experimented with z-index positioning to no avail.
Any suggestions or insights would be highly appreciated! Thank you in advance.
Below is 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 code for 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 code for the Background Image and Intro Image located 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%;}