|
CSS - Hover Not Working On Dropdown Menu
Hi,
I am trying to make a dropdown menu by using only CSS and no Javascript. Here is my HTML Code:
<ul id="nav">
<li>
<a href="/family-flowers.html"><span>Family Flowers</span></a>
<ul>
<li>
<a href="/family-flowers/anniversary-flowers.html"><span>Anniversary Flowers</span></a>
</li>
<li>
<a href="/family-flowers/birthday-flowers.html"><span>Birthday Flowers</span></a>
</li>
<li>
<a href="/family-flowers/christmas-bouquets.html"><span>Christmas Bouquets</span></a>
</li>
<li>
<a href="/family-flowers/new-baby.html"><span>New baby</span></a>
</li>
</ul></li>
<li class="level item-2 nav-congratulation">
<a href="/congratulation.html"><span>Congratulation</span></a>
</li>
<li class="level item-3 nav-corporate">
<a href="/corporate.html"><span>Corporate</span></a>
</li>
<li class="level item-4 nav-get-well">
<a href="/get-well.html"><span>Get Well</span></a>
</li>
<li class="level item-5 nav-love">
<a href="/love.html"><span>Love Bouquets</span></a>
</li>
<li class="level item-6 nav-mixed">
<a href="/mixed.html"><span>Mixed</span></a>
</li>
<li class="level item-7 nav-monthly">
<a href="/monthly.html"><span>Monthly</span></a>
</li>
<li class="level item-8 nav-funeral">
<a href="/funeral.html"><span>Funeral</span></a>
</li>
<li class="level item-9 nav-window">
<a href="/window.html"><span>Window plants</span></a>
</li>
</ul>
and this is my CSS Code:
#nav { list-style:none; margin:0; padding:0; width:150px; }
#nav li ul {
position: absolute;
left: 149px;
top: 0;
display: none;
}
#nav li a {
display: block;
text-decoration: none;
color: #777;
background: #fff;
padding: 5px;
border: 1px solid #ccc;
border-bottom: 0;
}
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; }
* html ul li a { height: 1%; }
/* End */
#nav li:hover ul { display: block; }
everything is fine, only on my hovering, the sub UL is not displaying even i made it to display as BLOCK on hover. can anybody help with this please? thank you very much [edit] in fact it is working in FF but not in IE [/edit] Similar TutorialsGreetings, I sure would appreciate some help integrating a css dropdown menu into a site. If you visit www.mts-diesel.com in FF, the drop down works find, If you open it in IE9 the dropdown does not work, BUT if you open this page www.mts-diesel.com/menu.html in IE9 the dropdown works. This leads me to think that it might be some type of z-index issue perhaps but I cant put my finger on it. Thanks for any help. Tom Built a dropdown menu (which I use on all my websites fine) and for some reason it's not working at all in IE (Using 8.0.7600), I've literally no idea why. Here's the CSS for the navigation: Code:
#subnav {
display: block;
margin: 25px 0 0 0;
padding:0 0 0 0;
width: 196px;
}
#subnav ul {
width: 196px;
margin: 0;
padding: 0;
list-style: none;
font: 11px "Verdana", "Arial", "Helvetica", "sans-serif";
}
#subnav ul ul {
margin: 0;
padding: 0;
list-style: none;
}
#subnav ul li {
float: left;
width: 196px;
display: block;
height: auto;
margin: 0;
padding: 0;
font-weight: bold;
}
#subnav ul li a {
color: #017490;
display: block;
width: 100%;
height: auto;
padding: 10px 0 10px 23px;
text-decoration: none;
text-shadow: 0px 1px 1px #fff;
}
#subnav ul li li {
padding: 0;
margin: 0px 0 0 0;
}
#subnav ul li li a {
padding: 10px 0 10px 5px;
line-height: normal;
text-shadow: 0px 1px 1px #000;
}
#subnav ul a.first-level {
background: #047691 url(../images/arrow.gif) top right no-repeat;
}
#subnav ul a.sub-level {
background: #047691 url(../images/arrow.gif) 200px 6px no-repeat;
}
#subnav ul li a:hover, #subnav ul li a:active, #subnav ul li:hover a, #subnav ul li.sfhover a {
/*color: #c7bb98;*/
text-decoration: none;
background: url(../images/nav-bg-over.jpg) 0 2px no-repeat;
}
#subnav ul ul li:hover, #subnav ul ul li.sfhover {
color: #FFF;
}
#subnav ul li li:hover a, #subnav ul li li.sfhover a, #subnav ul li li:hover li:hover a, #subnav ul li li.sfhover li.sfhover a, #subnav ul li li:hover li:hover li:hover a, #subnav ul li li.sfhover li.sfhover li.sfhover a {
color: #FFF
}
/* This line cancels the highlight effect for all sub-level buttons */
body.nav-1 #subnav ul li#subnav ul-1 li a, body.nav-1 #subnav ul li#subnav ul-1 li li a, #subnav ul li li a, #subnav ul li li li a {
background-image: none
}
body.nav-1 #subnav ul li#subnav ul-1 a, body.nav-2 #subnav ul li#subnav ul-2 a {
color: #048451;
}
#subnav ul li ul { /* second-level lists */
position : absolute;
left: -999em;
z-index: 9999;
margin-left : 215px;
margin-top : -32px;
padding: 5px 5px 5px 0px;
background-color:#047691;
text-transform: none!important;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 5px;
-moz-box-shadow: 0px 2px 2px #033f4d;
-webkit-box-shadow: 0px 2px 2px #033f4d;
box-shadow: 0px 2px 2px #033f4d;
}
#subnav ul li ul ul { /* third-and-above-level lists */
left: -999em;
}
/* Normal color */
#subnav ul li li a:link, #subnav ul li li a:visited, #subnav ul li:hover li a, #subnav ul li.sfhover li a, #subnav ul ul li.sfhover li a,
#subnav ul li:hover li:hover li a, #subnav ul li.sfhover li.sfhover li a,
#subnav ul li:hover li:hover li:hover li a, #subnav ul li.sfhover li.sfhover li.sfhover li a {
color : #FFF;
background: #047691;
}
/* Hover color */
#subnav ul li li a:hover, #subnav ul li li a:active,
#subnav ul ul li:hover a, #subnav ul ul li:hover li:hover a,
#subnav ul li.sfhover li.sfhover a, #subnav ul li.sfhover li.sfhover li.sfhover a, #subnav ul li.sfhover li a:hover,
#subnav ul li.sfhover li li a:hover, #subnav ul li.sfhover li.sfhover li.sfhover li.sfhover a:hover,
#subnav ul li:hover li:hover a, #subnav ul li:hover li:hover li:hover a, #subnav ul li:hover li a:hover,
#subnav ul li:hover li li a:hover, #subnav ul li:hover li:hover li:hover li:hover a:hover
{
color : #FFF;
background-color: #045669}
#subnav ul li:hover ul ul, #subnav ul li:hover ul ul ul, #subnav ul li.sfhover ul ul, #subnav ul li.sfhover ul ul ul {
left: -999em;
}
#subnav ul li:hover ul, #subnav ul li li:hover ul, #subnav ul li li li:hover ul, #subnav ul li.sfhover ul, #subnav ul li li.sfhover ul, #subnav ul li li li.sfhover ul { /* lists nested under hovered list items */
left: auto;
}
The live site is demo2 . abcguide .com (Sorry if I'm not supposed to link that.. I'll take it down.. ?) Hey there again! I have been at it ALLLLLLLLLLLL day, trying to figure out this blasted css menu to work in IE6!!! It works fine in FF but dosnt seem to like IE6 and was wondering if someone could please help me figure out the problem The first dropdown block ( <ul class="nav"> ) works fine but the second block ( <ul class="sub"> ) inside the first block ( <ul class="nav"> ) doesn't show properly in IE6!! Here is a screen shot of my problem: Here is my css: PHP Code: .navbar :hover ul.nav { padding:0; margin:0; left:0; top:40px; width:136px; z-index:604; background-color:#333333; } .navbar :hover ul.nav li a { display:block; height:24px; width:136px;} .navbar :hover ul.nav li a:hover {background:#ad8d12;} .navbar :hover ul.nav :hover ul.sub{ padding:0; margin:0; left:104px; top:-4px; width:200px; z-index:606; background-color:#333333;} /* keep the 'next' level invisible by placing it off screen. */ .navbar ul.nav, .navbar :hover ul.nav ul.sub {position:absolute; left:-9999px;} Here is my HTML code: PHP Code: <ul class="navbar"> <li><a href="#">Link<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="nav"> <li><a href="#">Link2</a></li> <li><a href="#">Link2</a></li> <li><a href="#">Link2</a></li> <li><a href="#">Link2<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="sub"> <li><a href="#">Link3</a></li> <li><a href="#">Link3</a></li> <li><a href="#">Link3</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> </ul> Thanks a million for even reading up to here I'm trying to get a dropdown menu to work properly (with IE, it works fine in FF) in the sidebar, thus vertically not horizontally. This dropdown menu has worked fine before, but only when using it horizontally, across the top. Basically, it prevents the user from clicking on the submenu options (I'm thinking it has something to do with z-index), but the parent menu options work fine. You can see the issue here with IE6 or 7: http://www.groundedgroup.com/clients/NWR/ Here's the respective CSS: Code:
/* Sidebar / Menu */
#sidebar {
float: left;
top: 16px;
left: 2px;
display: block;
position: relative;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color:#FFFFFF;
letter-spacing: 1px;
text-align:right;
z-index: 3;
}
#sidebar ul {
list-style-type: none;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
z-index: 4;
}
#sidebar li {
display: block;
float: left;
min-height: 20px;
position: relative;
text-align: left;
padding: 5px 20px 4px 16px;
margin: 0px 0px 0px 0px;
}
#sidebar h2 {
font-size: 1.2em;
padding: 0;
margin: 0;
}
#sidebar li ul {
width: 150px;
height: auto;
top: 100%;
left: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
letter-spacing: 3px;
}
#sidebar li.LargeMenu ul {
width: 200px;
height: auto;
top: 100%;
left: 0px;
}
#sidebar li ul li {
text-align: left;
width: 118px;
height: auto;
min-height: auto;
display: block;
}
#sidebar li.LargeMenu ul li {
text-align: left;
width: 198px;
height: auto;
min-height: auto;
display: block;
}
#sidebar a {
text-decoration: none;
letter-spacing: 1px;
}
#sidebar li li ul {
top: 0;
left: 0;
}
#sidebar li li:hover ul {
left: 150px;
}
/* initialy hide all sub sidemenus */
#sidebar ul ul,
#sidebar ul li:hover ul ul,
#sidebar ul ul li:hover ul ul,
#sidebar ul ul ul li:hover ul ul,
#sidebar ul ul ul ul li:hover ul ul {
position: absolute;
display:none;
}
/* display them on hover */
#sidebar li:hover ul,
#sidebar ul li:hover ul,
#sidebar ul ul li:hover ul,
#sidebar ul ul ul li:hover ul,
#sidebar ul ul ul ul li:hover ul,
#sidebar ul ul ul ul ul li:hover ul {
display: block;
}
#sidebar #PhpWebcontent {
display:none;
}
/* define the consecutive colors */
#sidebar {
color: #FFFFFF;
}
#sidebar ul{
-moz-opacity: 1; /* for mozilla */
opacity: 1; /* for safari */
khtml-opacity: 1/* for konquerer and older safari */
}
#feeds li {
background: url(images/feed.png) top left no-repeat;
padding-left: 18px;
}
#sidebar h2 {
color: #FFFFFF;
}
#sidebar a {
color: #ffffff;
letter-spacing: 1px;
}
#sidebar ul li:hover {
background: #333333;
}
#sidebar ul li ul {
}
#sidebar ul li ul li {
background: #333333;
}
#sidebar ul li ul li:hover {
background: #666666;
}
#sidebar ul li ul ul li{
background: #666666;
}
#sidebar ul li ul ul li:hover {
background: #999999;
}
/* End Sidebar / Menu */
Any ideas on how to make this work properly when used on the side? Thanks in advance. I have a drop down menu located at http://www.fieldspianos.com/new/index.php If you hover over the menu items they turn black and white when you are right on the text but not if you are in the area surrounding it which is what I also need to occur. You can view the source on the page for the html but I will include the css below. This is the basic layout of the menu: Code:
<ul>
<li>About Us</li>
<ul>
<li><a href="#">Locations</a></li>
etc..etc..etc.. Here is the css: Code:
/*Begin Content of drop down menu*/
a {
outline:none;
}
* html div#dropdownmenu ul {
float: left;
}
* {
margin: 0;
padding: 0;
}
div#dropdownmenu {
float: left;
background-color: #C8C6C6;
font-size:11px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
div#dropdownmenu ul li {
list-style-type: none;
float: left;
background-color: #000000;
position: relative;
}
div#dropdownmenu ul li:hover {
list-style-type: none;
background-color: #000000;
}
/*Hides drop downs when not overed over and reveals them when they are hovered over.*/
body div#dropdownmenu ul li ul {
display: none;
}
body div#dropdownmenu ul li:hover ul {
display: block;
}
div#dropdownmenu ul li ul {
margin: 0;
width: 13em;
position: absolute;
left: -1px;
}
div#dropdownmenu ul li ul li {
width: 100%;
background-color:#bdb35e;
color: #660000;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
padding: 3px;
}
div#dropdownmenu ul li ul li:first-child {
border-top: 1px solid #000;
}
div#dropdownmenu ul li ul li:hover {
color: #FFFFFF;
background-color: #000000;
}
div#dropdownmenu ul li ul li a {
color: #660000;
text-decoration:none;
outline: none;
}
div#dropdownmenu ul li ul li a:hover {
color: #FFFFFF;
background-color: #000000;
text-decoration:none;
outline: none;
}
div#dropdownmenu ul li:hover ul, div#dropdownmenu ul li ul:hover {
display: block;
}
Any help is greatly appreciated, this seems like it would be a simple fix but I can't figure it out. Maybe I am overlooking some small detail. Thanks! I am a photographer for a website and I know very little about anything other than basic html. With the website lady gone on a trip around the world for a year, I ended up being the person to attempt to modify our side menu to show an additional column of subcategories. I tinkered around with the code we had and I managed to get this to work in Firefox, however in IE7 the contents of the menu shift down a few pixels when you hover over a category. To view my problem, go to scannerparts.biz I've messed around with this for a few days and everything has become a big confusing mess so I have no choice but give in and ask for help. I thank anyone in advance for any assistance you can offer. -Emerson Here is the code: hover.css Code:
<!--
body {
behavior: url(/images/csshover2.htc);
}
div#categorynav ul {margin: 0px; padding: 0px;}
.submenu {
position: relative;
margin: 0px;
padding: 2px 0px;
width: 178px;
}
div#categorynav ul.level1 li a {
position: relative;
display: block;
text-decoration: none;
margin: 0px;
padding: 0px;
}
div#categorynav ul.level2 li {
position: relative;
display: block;
text-decoration: none;
margin: 0px;
padding: 0px;
}
div#categorynav ul.level3 li {
position: relative;
display: block;
text-decoration: none;
margin: 0px;
padding: 0px;
}
div#categorynav ul.level1 ul.level2 a {
background-color: #000000;
color: #fff;
width: 178px;
font-weight:normal;
padding: 4px 4px 4px 14px;
}
div#categorynav ul.level2 ul.level3 a {
background-color: #000000;
color: #fff;
width: 178px;
font-weight:normal;
padding: 4px 4px 4px 14px;
}
html>body div#categorynav ul.level1 ul.level2 a {
width: auto;
padding: 0px;
margin: 0px;
}
html>body div#categorynav ul.level2 ul.level3 a {
width: auto;
padding: 0px;
margin: 0px;
}
div#categorynav>ul a {width:auto; padding: 0px; margin: 0px;}
div#categorynav ul ul {position: absolute; display: none; width: 100px; z-index:900; padding: 0px; margin: 0px;}
div#categorynav ul ul li {padding: 0px; margin: 0px;}
div#categorynav ul.level1 li.submenu:hover ul.level2 {
display: block;
list-style-image: none;
list-style-type: none;
}
div#categorynav ul.level2 li.submenu:hover ul.level3 {
display: block;
list-style-image: none;
list-style-type: none;
}
div#categorynav ul.level2 {
top: 0px;
left: 178px;
margin: 0px;
padding: 0px;
width:160px;
}
div#categorynav ul.level2 li a:hover {
background-color: #000000;
color: red;
}
div#categorynav ul.level3 {
top: 0px;
left: 178px;
margin: 0px;
padding: 0px;
width:160px;
}
div#categorynav ul.level3 li a:hover {
background-color: #000000;
color: red;
}
Abbreviated Header Source (abbreviated for max character requirement, I think I left all the vital stuff there) Code:
<!doctype HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<ss:comment><link href="hover.css" type="text/css" rel="stylesheet" media="screen"/></ss:comment>
<link href="$store.images['hover.css']" type="text/css" rel="stylesheet" media="screen"/>
<style type="text/css">
<!--
/* Style Sheet */
body {
margin-top: 10px;
margin-right: 0px;
margin-bottom: 30px;
margin-left: 1px;
background-image: url(/images/backgroundgray.jpg);
background-repeat: repeat-x;
background-position: center bottom;
}
html { height: 100%; margin-bottom: 1px; }
#outline{
border :0px solid #ffffff;
width :760px;
}
#categories{
background-color:#000000;
color:#ffffff;
text-decoration:none;
text-align : left;
display: block;
padding : 5px 5px 1px 0px;
font-weight :bold;
font-size:9pt;
font-family:<ss:value source=$font.paragraph.face/>;
width :178px;
padding: 0px;
}
#cat1{
background-color:#000000;
color: #ffffff;
text-decoration:none;
text-align: left;
display: block;
font-weight :normal;
font-size: 9pt;
font-family:<ss:value source=$font.paragraph.face/>;
width: 178px;
padding: 0px;
}
#cat1 a{
background-color:#000000;
color: #ffffff;
text-decoration:none;
text-align: left;
display: block;
font-weight: normal;
font-size:9pt;
font-family:<ss:value source=$font.paragraph.face/>;
width :178px;
padding: 0px;
}
#cat1 a:hover{
background-color:#000000;
color:#ff0000;
text-decoration:none;
text-align : left;
display: block;
font-weight: normal;
font-size:9pt;
font-family:<ss:value source=$font.paragraph.face/>;
width :178px;
padding: 0px;
}
.leftnav {
background-color:#000000;
color:#ffffff;
text-decoration:none;
font-weight :bold;
font-size:9pt;
font-family:<ss:value source=$font.paragraph.face/>;
padding : 2px 5px 1px 0px;
}
.leftnav A:link {
background-color:#000000;
border-bottom : 1px solid #666666;
color:#ffffff;
text-decoration:none;
text-align : left;
display: block;
padding : 2px 5px 1px 0px;
font-weight :bold;
}
.leftnav A:visited {
background-color:#000000;
border-bottom : 1px solid #666666;
color:#ffffff;
text-decoration:none;
text-align : left;
display: block;
padding : 2px 5px 1px 0px;
font-weight :bold;
}
.leftnav A:hover {
background-color:#000000;
border-bottom : 1px solid #666666;
color:#ff0000;
text-decoration:none;
text-align : left;
display: block;
padding : 2px 5px 1px 0px;
font-weight :bold;
}
.leftnav A:active {
background-color:#000000;
border-bottom : 1px solid #666666;
color:#ffffff;
text-decoration:none;
text-align : left;
display: block;
padding : 2px 5px 1px 0px;
font-weight :bold;
}
A:link {text-decoration:underline;color:<ss:value source=$font.paragraph.color/>;}
A:visited {text-decoration:underline;color:<ss:value source=$font.paragraph.color/>;}
A:hover {text-decoration:none;color:<ss:value source=$font.paragraph.color/>;}
A:active {text-decoration:underline;color:<ss:value source=$font.paragraph.color/>;}
.content {font-family:<ss:value source=$font.paragraph.face/>
;color:<ss:value source=$font.paragraph.color/>;}
.title {font-size:10pt;font-weight:bold;font-family:<ss:value source=$font.paragraph.face/>
;color:#ffffff;}
.footer {font-size:9pt;font-family:<ss:value source=$font.paragraph.face/>
;color:<ss:value source=$font.paragraph.color/>;}
-->
</style>
</head>
<body>
<center>
<div id="outline">
<table width="760" border="0" cellspacing="0" cellpadding="0">
<!-- banner image -->
<tr valign="top"><td colspan="4"><a href="(URL address blocked: See forum rules)"><ss:image source="$templateSet.images['header.jpg']" border="0"/></a></td></tr>
<tr valign="top">
<!-- left nav -->
<td bgcolor="#000000"> </td>
<td width="175" bgcolor="#000000">
<div class="leftnav">
<!-- store logo -->
</div>
<div class="leftnav">
<div style="border-bottom : 0px solid #666666;"> </div>
<!-- home -->
</div>
<!-- categories -->
<p><font face="Arial,Helvetica,sans-serif" size="2" color="white"><b>Parts and Products:</b></font></p>
<div id="categorynav">
<div id="categories">
<ul class="level1">
<ss:foreach item="category" within="$catalog.categoryList()">
<ss:sortby item="categorypriority" direction="asc"/>
<ss:if test="$category.treeLevel == '1'">
<ss:set name="hasSub" value="0"/>
<ss:foreach item="subcategory" within="$category.childrenToDepth(1)">
<ss:set name="hasSub" value="1"/>
</ss:foreach>
<li class="submenu">
<div id="cat1"><ss:link source="$category"/></div>
<ss:if test="$hasSub == '1'">
<ul class="level2">
<ss:foreach item="subcategory" within="$category.childrenToDepth(1)">
<ss:sortby item="categorypriority" direction="asc"/>
<ss:if test="$category.treeLevel == '2'">
<ss:set name="hasSub" value="1"/>
<ss:foreach item="subcategory" within="$category.childrenToDepth(1)">
<ss:set name="hasSub" value="1"/></ss:foreach></ss:if>
</li>
<li class="submenu">
<div id="cat1"><ss:link source="$subcategory"/></div>
<ss:if test="$hasSub == '1'">
<ul class="level3">
<ss:foreach item="subcategory" within="$subcategory.childrenToDepth(1)">
<li><ss:link source="$subcategory" title="$subcategory.name"/></li>
</ss:foreach>
</ul>
</ss:if>
</ss:foreach>
</ul>
</ss:if></ss:foreach>
</li>
</ss:if></ss:if></ss:foreach>
<br>
</ul>
</div>
</div>
I'm using the suggestions of those on here and using the http://www.dynamicsitesolutions.com...2/#relatedLinks menu (I'm a little confused over what the differences are but that's the least of my problems) What I want is a 2nd level drop down menu, but I'm clueless on how to go about it..??? When you hover over Contact Us/info the menu that drops down by the way i'm using the pixo plugin for that the words end up being seen through the tab.. and the news thing that scrolls that is using the plugin Announcement and vertical scroll news How do you fix that? This is a problem in Firefox, IE etc.. is the url mcshanesnursery dot com can please someone tell me why the code below does not work. and please explain how do I make it work. Code:
<style>
a.home {
width: 63px;
height:47px;
padding:0px 0px 0px 0px;
background: url(http://refinethetaste.com/html/themes/default/images/btn_header_home_off.gif) no-repeat;
}
a.home:hover {
background: url(http://refinethetaste.com/html/themes/default/images/btn_header_home_on.gif) no-repeat;
}
a.myaccount {
width: 100px;
height:47px;
padding:0px 0px 0px 0px;
background: url(http://refinethetaste.com/html/themes/default/images/btn_header_myaccount_off.gif);
}
a.myaccount:hover {
background: url(http://refinethetaste.com/html/themes/default/images/btn_header_myaccount_on.gif);
}
</style>
<a href="#" class="home"></a>
<a href="#" class="myaccount"></a>
I had to make a hover menu that was full CSS, and i couldn't make it work in IE, because of the old issue of IE not supporting :hover for anything else but the a tag. So i modded some example i found on the internet that was using js for ie, attached through behaviours, in the css file. The url is this. The menu works fine in mozilla but it has a problem in IE, and i think it's css, not js. If you hover over the Products button and then over one of the items that appear, the item right under it will get a few pixels higer, which causes the whole menu to move down as you movewr over those ites. And it's annoying. Can some one give me a hint please? I've tried all sorts of things, adding empty level 3 menus to the items that don't need it, but still nothing... Thanks in advance... Hi, I'm trying to set up my (very basic, horizontal, no dropdown) CSS menu so that when a user hovers over the menu link items, the formatting changes and they basically get an image on mouseover (nothing more than changing the text colour and adding a curve on the left hand side, so it just looks like a selected tab). It kind of works but instead of the whole image showing it only shows in the area where the menu link text is, so instead of covering the height of the menu bar and a length I specify, it's just covering the actual word e.g "Home" in each case on the menu. I can't seem to get it so that on rollover the whole image shows. I've tried setting it so that the links have a background image (just a plain block from the nav bar) but that doesn't work. My CSS is: /* this is the bar where the menu is located */ .menuholder { width:1001px; height:2.19em; background-color:#0f2763; } /*holder for the menu */ div.navigation { margin-left:30px; padding-top:10px; } .navigation ul { list-style-type: none; position: relative; float: left; } .navigation ul li { display: block; padding: 0px 20px 0px 10px; display: inline; height:2.19em; } .navigation ul li a { font-family:Arial, Helvetica, sans-serif; color:#FFF; font-size:14px; font-weight:bold; line-height:18px; width:100px; height:2.19em; text-decoration:none; } .navigation ul li a:hover { color:#0f2763; background-image:url(/images/menutab.gif); width:100px; height:2.19em; } I've tried setting display:block; and float:left; on the .navigation ul li, but this makes the menu become vertical and throws the whole page out of sync. I tried this altrnative code, to no avail: .menuholder { width:1001px; height:2.19em; background-color:#0f2763; } div.navigation { margin-left:30px; padding-top:10px; height:2.19em; } .navigation ul { list-style-type: none; position: relative; float: left; } .navigation ul li { padding: 0px 20px 0px 10px; display: block; float:left; height:2.19em; } .navigation ul li:hover { color:#0f2763; background-image:url(/images/menutab.gif); width:100px; height:2.19em; background-repeat:no-repeat; } .navigation ul li a { font-family:Arial, Helvetica, sans-serif; color:#FFF; font-size:14px; font-weight:bold; line-height:18px; width:100px; height:2.19em; text-decoration:none; display: inline; } Any ideas or pointers gratefully received! Hi, I've been at this for some time now. Currently building a site (development address: mainline.divsharp.com). Menu (left) was Javascript, its now CSS. Works fine in Chrome, Firefox and IE 8, but IE 7 is acting extremely strange. You can see the desired effect if you use a recent version of one of those browsers. When I pull it up in IE 7 on the homepage, I can't hover over the popup like I can in the other, more compliant browsers. It either hides the pane as soon as the mouse gets off the main menu link, or when the mouse leaves the picture once its over the pane. If I then click on, say, "Market Watch" and try to view the menu on an interior page, its even more erratic. I'm about at the end of what I know or can look up how to do here.. If I can get the mouse over some part of the popout pane, it seems that if its over the content area of a div and not padding or margins, it stays open. For example, over the picture or over the grey area to the right... This might suggest something to someone.. Unfortunately, the markup is clogged at best and my style is all over the place. Site is built in Wordpress and is a custom theme. Hopefully this will help: Home page style sheet: mainline.divsharp.com/wp-content/themes/mainline/style.css Interior page style sheet: mainline.divsharp.com/wp-content/themes/mainline/interior.css In those stylesheets, there isn't much discernible organization, but the pieces relating to this problem are near the id's labeled menu_bg in the middle and at the very bottom is where the hover effects are. The popout is achieved like this: Code:
<li id="popout_hov">
<div id="popout">code for menu pane</div>
</li>
#popout_hov #popout {
visibility: none;
}
#popout_hov:hover #popout {
visibility: visible;
}
Thanks. Okay so the site is pawnsuppliesdirect.com it works flawlessly on mozilla, and IE7, but on IE6 the spacing is messed up and the hover links don't show the flyout part of the menu. Below is the css for the menu and it does validate: @charset "utf-8"; /* CSS Document */ /* common styling */ .menu {font-family: arial, sans-serif; width:100px; height:100px; position:relative; margin:0; font-size:10px; margin:5px 5px 60px 5px;} .menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#FFFFFF; width:90px; height:20px; border-left:1px solid #5fb7dd; text-align:left; background:#000000; line-height:19px; font-size:11px; padding-left:10px;} .menu ul {padding:0; margin:0; background-color:#000000;list-style-type: none;} .menu ul li {float:left; margin-right:1px; position:relative;} .menu ul li ul {display: none;} /* specific to non IE browsers */ .menu ul li:hover a {color:#fff; background:#5fb7dd;} .menu ul li:hover ul {display:block; position:absolute; top:0; left:101px;} .menu ul li:hover ul li a.hide {background:#000000; color:#FFFFFF;} .menu ul li:hover ul li:hover a.hide {width:100px;} .menu ul li:hover ul li ul {display: none;} .menu ul li:hover ul li a {display:block; background:url(../img/transparent.gif); color:#ffffff; width:100px; border-right:1px solid #5fb7dd;} .menu ul li:hover ul li a:hover {background:#5fb7dd; color:#fff;} .menu ul li:hover ul li:hover ul {display:block; position:absolute; left:140px; top:0; color:#ffffff;} .menu ul li:hover ul li:hover ul li a {display:block; width:100px; background:#5fb7dd; color:#ffffff;} .menu ul li:hover ul li:hover ul li a:hover {background:#5fb7dd; color:#fff;} any suggestions? My nav menu works 100% in IE8, FF, Opera and Chrome... but it's doing something weird in IE7 that can kindof affect it's functionality but I have no idea really where to look for the problem. It's most easily seen on two pages. The front page, he http://www.skullcrow.com ...and on the product pages he http://www.skullcrow.com/proddisp.php?id=skull01 On the main page when you hover over the menu and get the drop downs, if you move your cursor so you're also over the text div in the background, the menu goes away. You can tell easiest when viewing the "Community" and "Help" lists. On the product display page is the same thing over a larger area. Anytime you move the cursor to a part of the menu that's covering the text or (only some of?) the background div, it disappears. The menu is obviously on top, and this problem does not occur in basically any other browser. The main reason I need to fix this is that these menus will probably only get bigger and the navbar will become barely unusable in IE7 after a while. I don't exactly what code I would need to post for this, I was just hoping for some general information that could point me in the right direction. Thanks for any help. Hello, I'm trying to create a menu for my NGO to replace the one they have currently but I'm running into some problems. The highlight color in this photo is one - how do you get around this issue? I'd like to keep the colors the same, if possible, but I recognize that might not be acceptable. the menu img is at kburke - org slash menuhover.jpg Thanks! here's the code: /*** DEMO SKIN ***/ .sf-menu { float: left; margin-bottom: 1em; font:11px Verdana, sans-serif; font-weight:bold; } .sf-menu a { border-left: 1px solid #fff; border-top: 1px solid #CFDEFF; padding: .75em 1em; text-decoration:none; color: #FFFFFF; } .sf-menu a, .sf-menu a:visited { /* visited pseudo selector so IE6 applies text colour*/ color: #ffffff; } .sf-menu li { background: #b6791e; } .sf-menu li ul li a { color: #769841; } .sf-menu li li a:active, .sf-menu li li a:focus { color: #ffffff; } .sf-menu li li { background: #ffffff; } .sf-menu li li li { background: #ffffff; } .sf-menu li:hover, .sf-menu li.sfHover, .sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active { background: #769841; outline: 0; color: #FFFFFF; } /*** arrows **/ .sf-menu a.sf-with-ul { padding-right: 2.25em; min-width: 1px; /* trigger IE7 hasLayout so spans position accurately */ } .sf-sub-indicator { position: absolute; display: block; right: .75em; top: 1.05em; /* IE6 only */ width: 10px; height: 10px; text-indent: -999em; overflow: hidden; background: url('../images/arrows-ffffff.png') no-repeat -10px -100px; /* 8-bit indexed alpha png. IE6 gets solid image only */ } a > .sf-sub-indicator { /* give all except IE6 the correct values */ top: .8em; background-position: 0 -100px; /* use translucent arrow for modern browsers*/ } /* apply hovers to modern browsers */ a:focus > .sf-sub-indicator, a:hover > .sf-sub-indicator, a:active > .sf-sub-indicator, li:hover > a > .sf-sub-indicator, li.sfHover > a > .sf-sub-indicator { background-position: -10px -100px; /* arrow hovers for modern browsers*/ } /* point right for anchors in subs */ .sf-menu ul .sf-sub-indicator { background-position: -10px 0; } .sf-menu ul a > .sf-sub-indicator { background-position: 0 0; } /* apply hovers to modern browsers */ .sf-menu ul a:focus > .sf-sub-indicator, .sf-menu ul a:hover > .sf-sub-indicator, .sf-menu ul a:active > .sf-sub-indicator, .sf-menu ul li:hover > a > .sf-sub-indicator, .sf-menu ul li.sfHover > a > .sf-sub-indicator { background-position: -10px 0; /* arrow hovers for modern browsers*/ } Hiya, Hoping for a bit of help with a menu I've made. Basically it's a tabbed menu with another line underneath for an explanation of what you'll find if you click on the tab. The explanation shows up when you hover over the appropriate tab. I also have an 'active' class that highlights whatever section you're on and shows that explanation as default. It all works fine until you're halfway through the menu, and the explanations won't show for any menu item previous to the active one. I know this is something to do with z-index, but I can't for the life of me figure out where to put it. Can anyone help? This is only happening in IE. Full Code he Code: <!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> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Menu Problem</title> <link href="menu.css" rel="stylesheet" type="text/css" /> <!-- The line below starts the conditional comment --> <!--[if IE]> <style type="text/css"> body {behavior: url(csshover.htc);} </style> <![endif]--> <!-- This ends the conditional comment --> </head> <body> <div class="container"> <p>First Active Tab:</p> <div class="nav"> <ul> <li class="active"><a href="#" title="Item 1"><span>Item 1</span></a> <ul class="item1"> <li><span>Caption for Item 1. Caption for Item 1. </span></li> </ul> </li> <li><a href="#" title="Item 2"><span>Item 2</span></a> <ul class="item2"> <li><span>Caption for Item 2. Caption for Item 2. </span></li> </ul> </li> <li><a href="#" title="Item 3"><span>Item 3</span></a> <ul class="item3"> <li><span>Caption for Item 3. Caption for Item 3. Caption for Item 3. </span></li> </ul> </li> <li><a href="#" title="Item 4"><span>Item 4</span></a> <ul class="item4"> <li><span>Caption for Item 4. Caption for Item 4. </span></li> </ul> </li> <li><a href="#" title="Item 5"><span>Item 5</span></a> <ul class="item5"> <li><span>Caption for Item 5. Caption for Item 5. </span></li> </ul> </li> <li><a href="#" title="Item 6"><span>Item 6</span></a> <ul class="item6"> <li><span>Caption for Item 6. Caption for Item 6.</span></li> </ul> </li> </ul> </div> <!-- End nav --> <p style="margin-top: 20px; padding-top: 20px; border-top: 1px solid #000;">Middle Active Tab:</p> <div class="nav"> <ul> <li><a href="#" title="Item 1"><span>Item 1</span></a> <ul class="item1"> <li><span>Caption for Item 1. Caption for Item 1. </span></li> </ul> </li> <li><a href="#" title="Item 2"><span>Item 2</span></a> <ul class="item2"> <li><span>Caption for Item 2. Caption for Item 2. </span></li> </ul> </li> <li><a href="#" title="Item 3"><span>Item 3</span></a> <ul class="item3"> <li><span>Caption for Item 3. Caption for Item 3. Caption for Item 3. </span></li> </ul> </li> <li class="active"><a href="#" title="Item 4"><span>Item 4</span></a> <ul class="item4"> <li><span>Caption for Item 4. Caption for Item 4. </span></li> </ul> </li> <li><a href="#" title="Item 5"><span>Item 5</span></a> <ul class="item5"> <li><span>Caption for Item 5. Caption for Item 5. </span></li> </ul> </li> <li><a href="#" title="Item 6"><span>Item 6</span></a> <ul class="item6"> <li><span>Caption for Item 6. Caption for Item 6.</span></li> </ul> </li> </ul> </div> <!-- End nav --> </div> </body> </html>
CSS He Code: /* CSS Document */ body{margin: auto; text-align: center; background: #fff; font-size: 80%;} .container{ margin: auto; padding-top: 6px; width: 1000px; text-align: left; background: #fff;} /* Main Menu */ .container .nav{background: #fff; height:68px; line-height:34px;left:0px; font-weight: bold; font-family: Arial, Helvetica, sans-serif; color: #fff; text-transform:uppercase;margin-left: 6px; } .container .nav ul{list-style: none; position:relative;} .container .nav ul li{display: inline; float: left; position:relative; font-size: 0.9em; } .container .nav ul li a{text-decoration:none; color:#fff; background: #A90100; padding-left: 20px; } .container .nav ul li a, .container #nav ul li a span{ display: block; float: left;} /* Hide from IE5-Mac \*/ .container .nav a, .container .nav a span{float: none} .container .nav ul li a:hover{text-decoration:none; color:#fff; background: #351405; } .container .nav ul li.active a{text-decoration:none; color:#fff; background: #351405; } .container .nav ul li.active a span{text-decoration:none; color:#fff; background: #351405; } .container .nav ul li.active ul{display: block;} .container .nav ul li a span{background: #A90100; padding-right: 20px; } .container .nav ul li a:hover span{text-decoration:none; color:#fff; background: #351405; } .container .container .nav li > ul {top: auto;left:auto;} .container .nav ul li ul{ display:none; position: absolute; width: 700px; left: 0px; top: 0px; float: left; font-family:Arial, Helvetica, sans-serif; font-size: 12px; text-transform:none; font-weight: normal;} .container .nav ul li:hover ul{ z-index:100;} .container .nav ul li ul.item1{ left: 10px; z-index: 0;} .container .nav ul li ul.item2{ left: -67px; z-index: 0;} .container .nav ul li ul.item3{ left: -144px; z-index: 0;} .container .nav ul li ul.item4{ left: -221px; z-index: 0;} .container .nav ul li ul.item5{ left: -298px; z-index: 0;} .container .nav ul li ul.item6{ left: -375px; z-index: 0;} .container .nav ul li:hover ul.item1{z-index: 100;} .container .nav ul li:hover ul.item2{z-index: 100;} .container .nav ul li:hover ul.item3{z-index: 100;} .container .nav ul li:hover ul.item4{z-index: 100;} .container .nav ul li:hover ul.item5{z-index: 100;} .container .nav ul li:hover ul.item6{z-index: 100;} .container .nav ul li ul li{ display:inline; position: absolute; float: left; left:10px; top: 39px; height: 24px; line-height: 24px; width: 700px; float: left; color: #fff; font-family:Arial, Helvetica, sans-serif; font-size: 1em; text-transform:none; font-weight: normal; background: #351405;} .container .nav ul li:hover ul {display: block;}
Hello, I'm having a problem getting my drop-down to appear in IE7. Works in IE8. Any suggestions? http://www.mo-pca.org Thanks, -Jamie Hello, I am working on my HW problem with CSS, it's about rounded and angular corners in menu (active or hover). I can't post picture (not permitted), but probably you know what i mean, rounded corners are created with image and angular are created with padding by CSS. Angular is ready, now i have to do rounded, which is more hard. I have 3 pictures, left rounded side, middle and right rounded side. But i really dont know how to add it to a.active or a:hover elements. Middle picture will be repeated depending on text long, so i can't do 1 picture. Thank you for your help. I'm trying two "new to me" things at once here. First, I'm creating a horizontal drop down menu for the first time. Along with that, I'm using the whatever:hover method with the IE behavior fix instead of the conditional comment tables method (which is semantically incorrect). I've got two problems in IE that can be viewed he http://www.windrivers-gsp.com/test/index.php CSS: Code:
@charset "utf-8";
/* CSS Document */
/* Document Formatting */
html { width:100%;}
body, tr, th, td, p { font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:1em;
color:#000000;
margin:0px;
padding:0px;
}
#navigation { position:relative;
background:url(design/menubar.gif) #009933;
background-repeat:repeat-x;
width:100%;
height:30px;
text-align:center;
display:block;
}
#nav2 { position:absolute;
left:50%;
width:628px;
margin-left:-314px;
}
#container { position:relative;
max-width:1400px;
min-height:400px;
overflow:visible;
margin-left:auto;
margin-right:auto;
border-bottom:1px solid #666666;
padding:15px 10px 10px 10px;
z-index:2;
}
#content { font-size: 1em;
margin-right:36%;
overflow: visible;
background: #FFF;
text-align: left;
height: auto;
padding-right:10px;
}
#rightpane { font-size: 1em;
float:right;
margin-top:0;
width:35%;
overflow: visible;
text-align: left;
height: auto;
}
#fixcont {width:100%;float:left}
/* PIE/Aslett Clear Fix */
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-block;}
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* New Navigation Menu Styling */
#menu {
width: 100%;
float: left;
}
#menu ul {
list-style: none;
margin: 0;
padding: 0;
width: 157px;
float: left;
}
#menu a, #menu h2 {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:1em;
display: block;
border-left:1px solid #FFF;
border-right:1px solid #FFF;
margin: 0;
padding: 0;
height:30px;
line-height:30px;
}
#menu h2 {color: #000; background:url(design/menutab.gif); font-weight:normal;}
#menu h2:hover {background-position: 0 30px;}
#menu a {color: #000; text-decoration: none;}
#menu ul ul a {font-size:.8em; background-color:#a4906d;}
#menu ul ul a:hover {background-color:#CCCCCC;}
#menu ul li {position: relative;}
#menu ul ul {position: absolute; z-index: 10;}
div#menu ul ul {display: none;}
div#menu ul li:hover ul {display: block;}
HTML: Code:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test Menu</title>
<link href="menutest.css" type="text/css" rel="stylesheet" />
<!--[if IE]>
<style type="text/css" media="all">
body { behavior: url(csshover.htc); font-size: 100%;}
#menu ul li {float: left; width: 100%;}
#menu ul li a {height: 30px;}
#menu a, #menu h2 { font: 1em; font-family: Verdana, Arial, Helvetica, sans-serif;}
</style>
<![endif]-->
<meta http-equiv="Content-Language" content="en-us" />
<meta name="title" content="Test Menu" />
<meta name="Publication_Date" content="09/07" />
<meta name="robots" content="ALL" />
<meta name="revisit-after" content="2 weeks" />
</head>
<body>
<div id="navigation">
<div id="nav2">
<div id="menu">
<ul>
<li><h2><a href="index.php">Home</a></h2></li>
</ul>
<ul>
<li><h2><a href="index.php">Page Two</a></h2>
<ul>
<li><a href="index.php">Page 2.1</a></li>
<li><a href="index.php">Page 2.2</a></li>
<li><a href="index.php">Page 2.3</a></li>
</ul>
</li>
</ul>
<ul>
<li><h2><a href="index.php">Page Three</a></h2></li>
</ul>
<ul>
<li><h2><a href="index.php">Page Four</a></h2>
<ul>
<li><a href="index.php">Link 1</a></li>
<li><a href="index.php">Link 2</a></li>
<li><a href="index.php">Link 3</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div id="container" class="clearfix">
<div id="content"><div id="fixcont">
<p style="text-align:center;">Content Goes Here; Content Goes Here; Content Goes Here; Content Goes Here; Content Goes Here;
Content Goes Here; Content Goes Here; Content Goes Here; Content Goes Here; Content Goes Here; Content Goes Here; Content Goes Here;
Content Goes Here; Content Goes Here; Content Goes Here; Content Goes Here; Content Goes Here; Content Goes Here; </p>
</div></div>
<div id="rightpane"><p>Right Side Content</p></div>
</div>
</body>
</html>
Basically, it looks like my #container div has a higher z-index than my menu drop downs, despite stating otherwise in the CSS. Also, the drop down <ul>'s are not directly under the header <ul>, but rather are about 50% off right. In FF everything looks good, of course. Any ideas? Hi everyone, I am having an issue with IE7 (imagine that) with a css drop down nav menu. On IE8 and Chrome the menus work flawlessly but in on IE7 the menu is behind the pictures on the page. The page is located at www.philadler.com/newlayout2.php. At first I thought it may be a z-index problem but the nav bar is set to 1000 and 900 depending on the menu and the thumbnails are set to 100. As of now the site validates on both css and xhtml 1.0 transitional. I can list any code if needed. Thanks for any help Phil |
|||||||