Hi all,
I made a multi-level menu with a modified A List Apart. It works fine will Firefox and Safari. But when I tested it on IE the drop-down menu moved to the right...
Here is the web site
http://filipinobible.99k.org
And here is the CSS:
******************************************************************************************
@charset "UTF-8";
* {
margin:0;
padding:0;
}
p {
padding:10px 0 10px 0;
font-family:Geneva, Arial, Helvetica, sans-serif;
}
Body {
background-image:url(asset/images/Web-Layout_05.gif);
background-repeat:repeat-x;
}
#container {
margin:0 auto;
padding:0;
width:717px;
background-color:white;
border-left-style: outset;
border-left-color: #a4a3a3;
border-left-width:5px;
border-right-style: inset;
border-right-color: #a4a3a3;
border-right-width:5px;
}
#rightedge {
overflow:auto;
}
#header {
background-image:url(asset/images/Header.jpg);
width:717px;
height:117px;
}
#flash {
background-color:blue;
width:717px;
height:163px;
}
#navbar {
background-color:#b6b3b3;
width:717px;
height:1em;
padding:.5em 0;
}
#navbar a {
color:black;
text-decoration:none;
font-size:90%;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight:bold;
}
#nav, #nav ul {
padding:0;
margin: 0;
list-style: none;
line-height: 1;
text-align:center;
}
#nav a {
display: block;
width: 100%;
}
#nav li { /* all list items */
position:relative;
float: left;
width: 20%; /* width needed or else Opera goes nuts */
}
#nav li ul { /* second-level lists */
position: absolute;
background: #b6b3b3;
width:8.5em;
left: -999%; /* using left instead of display to hide menus because display: none isn't read by screen readers */
}
#nav li ul li {
width:100%
}
#nav li:hover ul, #nav li.sfhover ul { /* lists nested under hovered list items */
left: 0;
}
#announcement {
float:right;
width:202px;
}
#announcement h2 {
padding-top:20px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:smaller;
text-align:center;
text-decoration:underline;
}
#content {
padding:25px;
}
h1 {
margin-bottom:20px;
}
#footer {
background-color:#b6b3b3;
position:relative;
width: 717px;
clear: both;
text-align:center;
font-size:.8em;
}
.copyright {
color:#4D4D4D;
}
#footer a {
color:black;
text-decoration:none;
}
#footer a:hover {
text-decoration:underline;
}
******************************************************************************************
Thank you all!
Vincent
Add position: relative
Add position: relative to
#nav li {
position: relative;
float: left;
width: 10em; /* width needed or else Opera goes nuts */
}
and change auto to 0 here:
#nav li:hover ul, #nav li.sfhover ul { left: 0 }
Thanks goodness!! It fixed
Thanks goodness!!
It fixed it just like magic.
But would you mind telling me why those value affect how IE looks? Since I am new for CSS.
Thank again anyways!!
Very appreciate your help :thumbsup:
Vincent
position: relative sets a
position: relative sets a new positioning context on the parent element so that the dropdowns take their starting point from the parent <li>. Couldn't tell you why left: 0 works for IE7 but not left: auto.
Thank you!
Thank you!