- This topic is empty.
-
AuthorPosts
-
October 1, 2008 at 1:35 pm #23341dhanediesilMember
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: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 DiesilOctober 5, 2008 at 1:54 pm #50316dhanediesilMemberChris,
I appreciate it. It was racking my brain too. But thanks once again for taking a look at it!
Peace
October 6, 2008 at 12:14 am #50304CottonMemberWhat’s up with sneakersupplier spamming all the forums. Hopefully links are set to nofollow.
October 6, 2008 at 4:45 am #50346sivaMemberGood think,I try to solve this problem
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.