Drop down menu problem…Please help

[dhanediesil]

Hello All,

I’m working on a new site and I’m having problems getting the drop down menus to work. Here’s my code before I get into the problem:

HTML

Code:

• HOME
• ABOUT
  • SYNOPSIS
  • TEAM
  • CONTACT
• SCREENING
  • BOOKINGS
• JOURNAL
  • MEMORIES LOG
• MEDIA
  • PHOTOS
  • ARTICLES
  • VIDEO
  • RADIO
• PARTNERS
  • PARTNERS
  • AFFILIATES

CSS

Code:

/*RESETS & BASIC PAGE SETUP*/

*{
margin: 0;
padding: 0;
}

html{
overflow-y: scroll;
}

body{
font: 62.5% Helvetica, Arial, Verdana, Geneva, sans-serif;
background: #057eb7;
}

ul{
list-style: none inside;
}

p{
font-size: 1.2em;
line-height: 1.3em;
margin-bottom: 1.2em;
}

a{
outline: none;
color: #999999;
}

a img{
border: none;
}

/*END RESET*/

/*PAGE STRUCTURE */

div#page{
width: 960px;
margin: 0 auto;
background: #ffffff;
}

div#wrap{
margin: 0 auto;
}

/*HEADER*/

div#header{
width: 949px;
margin: 0 auto;
}

/*NAV*/

ul#nav{
width: 949px;
height: 47px;
margin: 0 auto;
}
ul#nav li{
display: inline;
}
ul#nav li a{
display: block;
height: 47px;
text-indent: -9999px;
float: left;
}
ul#nav li#nav-home a{
width: 154px;
background: url(images/nav-home.jpg) bottom center no-repeat;
}
ul#nav li#nav-about a{
width: 129px;
background: url(images/nav-about.jpg) bottom center no-repeat;
}
ul#nav li#nav-screening a{
width: 200px;
background: url(images/nav-screening.jpg) bottom center no-repeat;
}
ul#nav li#nav-journal a{
width: 153px;
background: url(images/nav-journal.jpg) bottom center no-repeat;
}
ul#nav li#nav-media a{
width: 118px;
background: url(images/nav-media.jpg) bottom center no-repeat;
}
ul#nav li#nav-partners a{
width: 195px;
background: url(images/nav-partners.jpg) bottom center no-repeat;
}
ul#nav li#nav-home a:hover{
background-position: top center;
}
ul#nav li#nav-about a:hover{
background-position: top center;
}
ul#nav li#nav-screening a:hover{
background-position: top center;
}
ul#nav li#nav-journal a:hover{
background-position: top center;
}
ul#nav li#nav-media a:hover{
background-position: top center;
}
ul#nav li#nav-partners a:hover{
background-position: top center;
}
ul#nav li ul{
display: none;
position: absolute;
}
ul#nav li:hover ul{
display: block;
border: 1px solid #057eb7;
background: #ffffff;
text-align: center;
}

/*END NAV*/

/*END HEADER*/

/*CONTENT*/

div#crest{
width: 949px;
height: 136px;
background: url(images/crest.jpg);
}

div#trailer{
width: 949px;
height: 741px;
background: url(images/trailerbg.jpg);
}
div#trailer div#movie{
width: 350px;
height: 270px;
float: right;
padding: 100px 50px 0 0;
}

div#credits{
width: 949px;
height: 316px;
}

/*END CONTENT*/

/*END STRUCTURE & STUFF*/

Here’s the problem:

My hover state is working, but the "li" in the "ul" that contains the drop down menu isn’t working. It keeps repeating the background image of the root "li" when it should be showing the drop down menu with the links. Not the same repeated image. Here’s a link where you can view it for yourself: http://www.hollywoodisle.com/test. I’ve been working on this problem for the last day and a half. Any help would be greatly appreciated.

Peace,
Dhane Diesil

[dhanediesil]

Chris,

I appreciate it. It was racking my brain too. But thanks once again for taking a look at it!

Peace

[Cotton]

What’s up with sneakersupplier spamming all the forums. Hopefully links are set to nofollow.

[siva]

Good think,I try to solve this problem

[Author]

Posts