Hi,
I am having problems with this fiv tag. The 5px padding to the right of the “Contact Us” button seems to be transparent, I want it to have a black background. I’ve tried <div style=“background-color: #000”> in the div tag before the “ul”, but it didn’t work. This is a jquery javascript.
Here is the image:
Body Coding:
<div><ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a>
<ul>
<li><a href="#">Our Mission</a></li>
<li><a href="#">History</a></li>
<li><a href="#">Partners</a></li>
<li><a href="#">Our Sponsors</a></li>
</ul>
</li>
<li><a href="#" style="cursor:hand">Rules</a></li>
<li><a href="#" style="cursor:hand">Prizes</a></li>
<li><a href="#" style="cursor:hand">Shark Info</a>
<ul>
<li><a href="#">Shark Identification</a></li>
<li><a href="#">Tagging</a></li>
<li><a href="#">Measuring</a></li>
<li><a href="#">Blacktip Migration</a></li>
</ul>
</li>
<li><a hred="#" style="cursor:pointer">Gallery</a>
<ul>
<li><a href="#">Photo Gallery</a>
<ul>
<li><a href="#">2008</a></li>
<li><a href="#">2009</a></li>
</ul>
</li>
<li><a href="#">Video Gallery</a>
<ul>
<li><a href="#">2008</a></li>
<li><a href="#">2009</a></li>
</ul>
</li>
</ul>
</li>
<li><a hred="#" style="cursor:pointer">Media</a>
<ul>
<li><a href="#">News</a></li>
<li><a href="#">Articles</a></li>
<li><a href="#">Videos</a></li>
<li><a href="#">Photos</a></li>
<li><a href="#">Production</a></li>
</ul>
</li>
<li><a hred="#" style="cursor:pointer">Archives</a>
<ul>
<li><a href="#">Past Winners</a></li>
<li><a href="#">Past Annoucements</a></li>
</ul>
</li>
<li><a href="#">Contact Us</a></li>
</ul></div>
CSS Coding:
body{
font-size:13px;
font-family:"Times New Roman", Times, serif;
text-align:center;
font-weight:bold;
}
#nav, #nav ul{
margin:0;
padding:0;
list-style-type:none;
list-style-position:outside;
position:relative;
line-height:1.5em;
z-index:30;
}
#nav a{
display:block;
padding:0px 5px;
color:#676558;
text-decoration:none;
background-color:#000;
width:73px;
line-height:25px;
font-size:13px;
font-weight:bold;
}
#nav a:hover{
color:#09F;
font-weight:bold;
background-image:url(../graphics/navbar-shark.gif);
background-attachment:scroll;
background-repeat:no-repeat;
background-position:center;
}
#nav li{
float:left;
position:relative;
}
#nav ul {
position:absolute;
display:none;
width:110px;
top:25px;
}
#nav li ul a{
width:110px;
height:auto;
float:left;
text-align:left;
background-color:#252525;
line-height:25px;
z-index:30;
font-weight:normal;
}
#nav ul ul{
top:auto;
}
#nav li ul ul {
left:110px;
margin:0px 0 0 10px;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{
display:none;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{
display:block;
}
Any help, would be greatly appreciated!