Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › CSS › Need a code check for IE7 drop down.

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • April 17, 2011 at 7:01 pm #32393
    grovesk
    Member

    Hi – I was hoping someone could look at my code and let me know which classes need the position:relative and position:absolute to get this to work in IE. I have been doing some reading and experimenting but just can’t get the right combination.

    Right now, the second level appears in the wrong position in IE7. It’s appearing in the top level instead of dropping down.

    Here’s the HTML

    Here’s my Site Nav CSS

    /*MAIN NAV*/
    

    
/*TOP LEVEL*/
    
ul#menu {
    
font-family: 'DistrictLight' Arial, Verdana, sans-serif;
    
font-size: 12px;
    
margin: 0;
    
padding: 0;
    
list-style: none;
    
}
    

    
ul#menu li a {
    
color:#CC092F;
    
margin-right:30px;
    
text-decoration:none;
    
margin-left:4px;
    
}
    

    
ul#menu .selected {
    
color: #8B745A;
    
border-top-width: medium;
    
border-top-style: solid;
    
border-top-color: #CC092F;
    
text-decoration: none;
    
}
    

    
/*TOP LEVEL HOVER*/
    

    
#menu a:hover {
    
color: #8B745A;
    
border-top-width: medium;
    
border-top-style: solid;
    
border-top-color: #CC092F;
    
text-decoration: none;
    
}
    

    
ul#menu li {
    
display: block;
    
position: relative;
    
float: left;
    
visibility: visible;
    
padding-left:4px;
    
border-top-width: medium;
    
border-top-style: solid;
    
border-top-color: #FFF;
    
}
    

    
/*SECOND LEVEL*/
    

    
ul#menu li ul {
    
display: none;
    
padding:0px;
    
border-top-style: none;
    
position: absolute;
    
}
    

    
ul#menu li:hover ul {
    
display: block;
    
position: absolute;
    
border-top-style: none;
    
}
    

    
ul#menu li ul li a {
    
display: block;
    
text-decoration: none;
    
color: #CC092F;
    
white-space: nowrap;
    
padding: 5px 8px 5px 4px;
    
margin:0px 20px 0px 0px;
    
border-top-style: none;
    
}
    

    
ul#menu li ul li {
    
padding-left:0px;
    
margin:0px;
    
border-top-style: none;
    
}
    

    
ul#menu li:hover ul li a {
    
color: #CC092F;
    
background-color: #333;
    
border-top-style: none;
    
}
    

    

    
/*SECOND LEVEL HOVER*/
    

    
ul#menu li:hover ul li a:hover {
    
color: #FFFFFF;
    
background-color: #CC092F;
    
display: block;
    
text-decoration: none;
    
white-space: nowrap;
    
padding: 5px 8px 5px 4px;
    
margin-left:0px;
    
margin-right:20px;
    
border-top-style: none;
    
}
    

    

    
/*sub menu*/
    

    
#submenu {
    
font-size:11px;
    
font-style: italic;
    
font-family: Georgia, "Times New Roman", Times, serif;
    
padding-left: 0px;
    
}
    

    
#submenu li {
    
list-style:none;
    
padding-top: 4px;
    
padding-bottom:4px;
    
padding-right: 4px;
    
}
    

    
#submenu li a {
    
background-image: url(../images/red_arrow.png);
    
background-repeat: no-repeat;
    
background-position: left center;
    
text-decoration:none;
    
padding-left: 15px;
    
padding-top: 4px;
    
padding-bottom:4px;
    
padding-right: 4px;
    
}
    

    
#submenu a:hover {
    
text-decoration:none;
    
color: #FFFFFF;
    
background-color: #CC092F;
    
}
    

    
ul#submenu .selected a {
    
color: #8B745A;
    
text-decoration: none;
    
}
    

    
/*CAROUSEL THUMBS*/
    

    
div#carousel .current a:link {
    
border: medium solid #0066FF;
    
}

    Hoping someone can provide the magic bullet.

    Thanks, Karen

    April 18, 2011 at 12:36 am #50533
    jamygolden
    Member
    ul#menu li:hover ul {
    
display: block;
    
position: absolute;
    
border-top-style: none;
    
}

    You should tell IE7 where to position it.

    ul#menu li:hover ul {
    
display: block;
    
position: absolute;
    
border-top-style: none;
    
left: 0;
    
top: 0;
    
}
  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.