Not signed in (Sign In)
SkillShare - A place to discuss Web Standards and Web Design topics
Categories
Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.
- Friends
-
Hello, I was wondering if anyone could help me out with my css horizontal drop-down menu navigation. I've been working at it for two days and finally got it to align the way I wanted it to in IE7 and IE6. Only, I can't get the drop-down menu function to work the way it should in IE7 and IE6. I'm learning more and more every day on xhtml, css, and slightly javascript. Had been reading up and found that the element functions and what not are differen't for every browser so I've been trying to make it browser friendly for all as well as resolution. I fixed everything with my positioning issues, using a css hover.htc from a site to help with my horizontal drop-down menu's hover in IE7 and IE6 but the drop down only responds if you hover under the main button and it doesn't change colors like it should. Please give me some suggestions on how to fix.
here's my site to see what I mean, check it out in IE7 and 6 --> http://www.meembee.cipherninja.net
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Meembee ft. Vivi</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!--[if IE]>
<style type="text/css" media="screen">
#navbar {float:none;} /* This is required for IE to avoid positioning bug when placing content first in source. */
/* IE Menu CSS */
/* csshover.htc file version: V1.21.041022 - Available for download from: http://www.xs4all.nl/~peterned/csshover.html */
body{behavior:url(subdir/csshover.htc);
font-size:100%; /* to enable text resizing in IE */
}
#navbar ul li{float:left;width:100%;}
#navbar a{height:1%;}
</style>
<![endif]-->
<style type="text/css">
* { margin: 0px auto; padding: 0px!important; }
html { width: 100%; }
body {
width: 100%;
background: url("img/Vivi-layout-4.gif") top left no-repeat;
text-align: center;
}
#spacer {
width: 100%;
height: 610px;
margin: 0px auto;
padding: 0px!important;
text-align: left;
}
#navigation {
position: relative;
position: absolute;
top: 570px;
left: 0px;
text-align: left;
width: 100%;
height: 25px;
margin: 0px auto;
padding: 0px!important;
}
<!--sub menu rules-->
#navbar {
margin: 0px auto;
padding: 0px!important;
height: 1em;
}
#navbar li {
width: 100px;
height: 25px;
list-style: none;
float: left;
}
#navbar li a {
width: 100px;
height: 25px;
display: block;
padding-top: 12px!important;
background: #bd0006;
color: #fff;
font-size: 12px;
font-family: tahoma;
font-weight: bold;
text-decoration: none;
text-align: center;
margin-left: 8px!important;
}
#navbar li ul {
width: 10em; /* Width to help Opera out */
display: none;
background: #ffc921;
}
#navbar li:hover a {
background: #ffc921;
color: #000;
}
#navbar li:hover ul {
position: relative;
position: absolute;
display: block;
margin: 0px auto;
padding: 0px;
background: transparent;
}
#navbar li:hover li {
width: 100px;
height: 25px;
float: none;
}
#navbar li:hover li a {
background: #000;
border-bottom: 1px solid #fff;
color: #fff;
}
#navbar li li a:hover {
background: #000;
color: #fff;
}
#navbar li:hover ul, #navbar li.hover ul {
position: relative;
position: absolute;
display: block;
margin: 0px auto;
padding: 0px;
}
#navbar li:hover li, #navbar li.hover li {
width: 100px;
height: 25px;
float: none;
}
#navbar li:hover li a, #navbar li.hover li a {
width: 100px;
height: 25px;
background: #000;
border-bottom: 1px solid #fff;
color: #fff;
}
#navbar li li a:hover {
background: #2b4ad1;
color: #000;
}
<!--sub menu rules end-->
#spacer2 {
width: 552px;
height: 448px;
margin: 0px auto;
text-align: left;
float: left;
padding: 0px!important;
}
</style>
</head>
<body>
<div id="spacer"></div>
<div id="navigation">
<ul id="navbar">
<li><a href="#">HOME</a></li>
</ul>
<ul id="navbar">
<li><a href="#">ABOUT</a><ul>
<li><a href="#">SITE</a></li></ul>
</li>
</ul>
<ul id="navbar">
<li><a href="#">PORTFOLIO</a><ul>
<li><a href="#">ART</a></li>
<li><a href="#">LITERATURE</a></li>
<li><a href="#">MISCELLANEOUS</a></li></ul>
</li>
</ul>
<ul id="navbar">
<li><a href="#">CONTACT</a></li>
</ul>
<ul id="navbar">
<li><a href="#">FORUM</a></li>
</ul>
</div>
<div id="spacer2"></div>
</body>
</html> -
Hey, your link is broken. However more than likely your problem is solved by the Son of Suckerfish solution, check it out :) I have used this method successfully many times without problems, and it’s the simplest and cleanest I’ve come across.
-
Hi - I just used the same menu (Stu Nicholls - http://www.cssplay.co.uk ) and it worked in IE 6/7 and FF. Here is my modified CSS code. You can see the menu at http://www.momnpopsware.com . Ronnie
.body{
/*need to center on IE Browser */
text-align: center;
}
.container{
padding-bottom: 1em;
width: 750px;
margin: 0 auto;
text-align: left
}
.menu {
font-family: arial, sans-serif;
height:100px;
position:fixed;
font-size:14px;
z-index:100;
color: #336699;
}
.menu ul li a, .menu ul li a:visited {
display:block;
text-decoration:none;
color: #336699;
width:104px;
height:20px;
text-align:center;
color:#fff;
border:1px solid #fff;
background:#9966FF;
line-height:20px;
font-size:14px;
overflow:hidden;
font: bold;
}
.menu ul {
padding:0;
margin:0;
list-style: none;
}
.menu ul li {
float:left;
position:relative;
}
.menu ul li ul {
display: none;
}
/* specific to non IE browsers */
/*Mouse over main menu */
.menu ul li:hover a {
color:#fff;
background:#FF6347;
}
.menu ul li:hover ul {
display:block;
position:absolute;
top:21px;
left:0;
width:105px;
}
/*Second Menu with additional options */
.menu ul li:hover ul li a.hide {
background:#EEEEEE;
color:#fff;
}
/*Second Menu Mouse over with additional options */
.menu ul li:hover ul li:hover a.hide {
background:#EEEEEE;
color:#000;
}
.menu ul li:hover ul li ul {
display: none;
}
/*.menu ul li:hover ul li a {display:block; background:#ddd; color:#000;} */
.menu ul li:hover ul li a {
display:block;
background:#EEEEEE;
color:#000;
}
.menu ul li:hover ul li a:hover {
background:#6fc;
color:#000;
}
.menu ul li:hover ul li:hover ul {
display:block;
position:absolute;
left:105px;
top:0;
}
.menu ul li:hover ul li:hover ul.left {
left:-105px;
}
1 to 3 of 3