i am well aware of iE6 hover probs and workarounds. what i am failing to see is how to show a li on hover in IE6? for example there is a link for support and when hovered over i would like a ul li to appear and on hover out just show initial link. any tips to get me started? many thanks
html code example
http://jsfiddle.net/zdUMG/4/
Well, for one thing, your HTML is invalid.
You need to wrap the whole thing in a ul, and you need to move the submenu ul inside the li. Like this: http://jsfiddle.net/zdUMG/2/
Then, you need some simple CSS: http://jsfiddle.net/zdUMG/3/
#nav li ul {
display: none
}
#nav li:hover ul {
display: block
}
But, that won't work in IE6.
i am well aware of iE6 hover probs and
workarounds
So, what's the problem?
Just use Whatever:hover to allow a selector like #nav li:hover ul to work in IE6.
Related
I'm making a dropdown menu with only CSS, and it's not turning out easy the way I've done it. So far I've got an actual dropdown, but the width is the width of the parent element, which is too small for certain items to be displayed in one line.
I tried setting a manual width, but that just unaligns the whole thing and isn't pratical as the menu item could be much longer. Is there anyway of having a width that adapts to the content, without changing the parent width ?
All the site files are located here : http://dev.cuonic.com/bourree/
Index page : http://dev.cuonic.com/bourree/index.html
Stylesheet : http://dev.cuonic.com/bourree/css/style.css
Any help is appreciated, thanks :)
Here's a solution that doesn't use a fixed-width for the drop-downs.
First, add the following to the CSS for the links in the drop-downs:
#menu ul ul li a {
white-space: nowrap;
}
I also had to change #menu ul and #menu ul li to #menu > ul and #menu > ul > li, respectively, so that those CSS styles would apply only to the first level menu items.
Here's a basic reference about the use of > in CSS selectors. I think there are other spots in this example where it would help:
http://reference.sitepoint.com/css/childselector
Playing around in firefox/firebug I found that this combination seemed to produce the desired effect:
#menu ul ul li {
display: block;
float: left;
left: -34px;
position: relative;
width: 200px;
}
I am trying to make my first pure css/html dropdown menu but I was having a hard time getting the Hover function to work properly. I received great answers but this time, its all messed up and its not in the right spot. I am so lost at this point.
http://jsfiddle.net/X5Dbc/
position: absolute; or somthing like that...
i have a hunch it has somthing to do with positioning
the jsfiddle above is what i have after asking about the "Dropdown" effect..
Keep in mind I am still a novice when it comes to proper CSS. Any Advice or help making this menu work would be most appreciated! And constructive criticism is always welcome.
Your markup is not valid. IDs must be unique. ie you can't use the same ID on muiltiple elements. That's what class is for. There is no need to use IDs for this anyway.
#navwrap ul li ul {
display: none;
}
#navwrap ul li:hover ul {
display: block;
position: relative;
}
Move the :hover to the parent li
You can style the two ul seperately like this:
Top level:
#navwrap > ul { your styles ... }
Sublevel:
#navwrap ul ul { your styles ... }
I have a drop down list that I'm trying to get working in IE7. Amongst other bugs, the one that has me beat is the anchors on hover not pushing the background to full padding height. It seems to stay within the dimensions of its li and ultimately the ul. I've tried expanding the height of both ul and li but this doesn't seem to work. Works correctly in all other browsers:
http://jsfiddle.net/gzLVR/2/
What you should see: The anchor tag, on hover, should expand at the bottom by 50px (as per the css #menu > ul > li:hover > a { padding-bottom:50px; }. This expansion is performed, but the background-color doesn't seem to push to the anchor's margins.
What am I doing wrong?
IE7 does not support :hover on items other than <a> tags. Since you have your :hover on an <li> it is not working in IE7.
You'll need to add some javascript to add a .hover class to the <li> when you mouseover, and then adjust your css to include it as well:
#menu > ul > li:hover > a,
#menu > ul > li.hover > a{
padding-bottom:50px;
}
[EDIT]
It appears this is only true when IE7 renders in quirksmode. If you are using a strict doctype, you should be able to use :hover on an <li>
I think trigger hasLayout will fix it; you can do it with somthin like this:
#menu > ul > li > a { display: inline-block;}
Be aware of that IE don't supports :last-child up to IE8, but you can use :first-child.
I would also suggest to use a pseudo element for the part you used the <i></i>, so you don't have unneccessary markup in your HTML.
I ended up finding the solution myself. Each li's anchors are by default set to wrap around it's content (display:inline?), and setting the display to inline-block is somewhat dangerous as its behavior in IE7 is somewhat unpredictable.
By simply setting the anchor to display:block, you allow it to take on dimensions of itself in IE7, so you break it away from having it simply wrap around its content. Thus, it's possible for it to affect the needed padding when on hover.
This will now work in IE7:
http://jsfiddle.net/gzLVR/5/
Have you tried changing the anchor to
display:inline-block;
zoom:1;
The zoom should only be required for IE7, it triggers 'hasLayout'
The following snippet is causing me a QA headache.
<div id="links-container">
<ul>
<li class="resource-link li-sep"><em>Enjoy family-friendly</em>ACTIVITIES AND ATTRACTIONS <span>ยป</span></li>
<li>...etc...</li>
</ul>
</div>
I tried this in CSS, but nothing is working;
#links-container ul li a { color:#C28234; }
#links-container ul li a span { font-size:140%; line-height:1em; }
#links-container ul li a em { display:block; font-family:Georgia; font-weight:normal; margin-bottom:-6px; }
#links-container ul li a:focus em, #links-container ul li a:active em { outline:none; }
#links-container ul li a:hover { color:#75450A; }
What's happening is that in Firefox, when you tab through the links, it's creating outlines around both sets of text which have close proximity to each other and are causing overlapping outlines.
Our project mgrs wish to keep the outlines to promote accessibility.
If you view it in Chrome, it will wrap the entire contents of the anchor in an outline. And we consider this to be perfect. My question is, can something be done that can replicate this in Firefox. Or at the very least, clean it up so that the outline doesn't look like dung when Firefox individually outlines each text item in the same link.
Anyone else ever have to deal with this? If so, how'd you get past it?
Thanks
Well. It's a partial solution, but can work in your case. If you you have problem with menu items only you can apply "display: inline-block;" to links in here, to make it have a common outline.
Example: jsfiddle.net/zDbsQ/2/
EDIT: Fixed link to example, original was wrong.
You can just use:
#links-container ul li a *{ outline: none; }
This will select all elements within an a and disable the outline..
I have a CSS hover menu which works in all browsers except... surprise -- IE6!
#menu_right ul li:hover ul { visibility: visible; }
This ul is hidden initially, obviously. When I hover over its parent li, it should show up... but it doesn't.
To try to pinpoint the problem, I've tried making the ul initially visible and had the hover action take on something else. For example:
#menu_right ul li ul { visibility: visible; }
#menu_right ul li:hover ul { background: red; }
This doesn't help. On other browsers (including IE7+), the ul will turn red when I hover over its parent list element. But not in IE6. What am I missing?
IE6 doesn't know the CSS :hover pseudo-attribute, when it appears on anything than a link element. You will have to use JavaScript for this. Try conditional statements, and if you use jQuery, you can code the hover effect for IE6 in 3 (+/- formatting) lines:
<!--[if lt IE 7]>
<script type="text/javascript">
$('#menu_right ul li').hover (function () {
$(this).addClass ("hover");
}, function () {
$(this).removeClass ("hover");
});
</script>
<style type="text/css">
#menu_right ul li.hover {...}
...
</style>
<![endif]-->
Mark, that in the CSS statements I used the dot instead of the colon.
Cheers,
You should use something like this
<ul>
<li></li>
<li></li>
<li></li>
</ul>
and style the <a> instead of the <li>. You just have to make sure that you size the a to be the exact same size as its enclosing li.
div.menu ul.menu {
margin:0;
padding:0;
}
div.menu ul li {
margin:0;
padding:0;
}
div.menu ul.menu a {
display:block;
height:22px;
margin:0;
overflow:hidden;
padding:0;
width:252px;
}
The reason you are seeing that it works on every browser except IE6, is that it supports :hover only on <a> elements.
Take a look at whatever:hover http://www.xs4all.nl/~peterned/csshover.html. This baby solves all sorts of weird IE6 hover problems, might solve yours.
No :hover on anything but <a>... God I love this browser.
Try to use :hover on a conveniently-located <a> (if it's a list of links, like most CSS hover menus, it won't be a problem ), or just go with Javascript, as already suggested.
It is exactly as Tal wrote. I do not know how it works with table but this example WORKS in IE6 perfectly.
http://www.cssplay.co.uk/menus/final_drop.html