I want to constrain the width of an <ul> tag in a dropdown menu in CSS to the width of the parent <li>of that <ul> in the simpliest possible form, and without setting any fixed with.
I had made a lot search and testing, without achieving it or understand it. Precisely, I want to understand how it works.
What could the property that could make it happened ?
I have settled the simpliest jsfiddle http://jsfiddle.net/zAXRK/2/ I could come up with to see if someone could explain why if it's possible, and how ?
I you try the example, when you use the cursor to over the First Item = the sub-menu appears and the <li>who contains it, is going larger, pushing other elements.
What I want to do is making the sub-menu inside the width of its parent element, whatever the width, and without fixing it. (if there is no solution, I'll do it with JS, but I would prefer have it clean in CSS and I think this a good exercice).
Thanks to anyone willing to help me understand CSS rules. If the answer is somewhere outside, either I didn't find it, or I didn't understood it, please forgive.
You need to set some position properties on the li and the .submenu so you can set a width: 100% (it's not a fixed width, I hope it's not a problem):
Here are the changes :
.menu > li {
position: relative;
}
.sub-menu {
position: absolute;
width: 100%;
}
And the working jsFiddle.
I have been trying to resolve this issue on my own since Friday and I just don't seem to be having any luck. Hopefully with the following specifics, someone here can help push me in the right direction.
The site in question is http://www.jewelbyjewel.co.uk
The problem area: Top navigation menu
If you look at the menu in chrome, this is how the second menu appears:
This is how the menu SHOULD look.
In IE and FF, this is how the menu looks which is incorrect:
Now, I am aware I can fix this by explicitly specifying a width in the following stylesheet:
http://jewelbyjewel.co.uk/wp-content/plugins/ubermenu/styles/custom.css
I could change this:
#megaMenu ul li#menu-item-225 {
position:relative !important;
}
#megaMenu ul li#menu-item-225 ul.sub-menu-1 {
max-width: none !important;
}
to this:
#megaMenu ul li#menu-item-225 {
position:relative !important;
}
#megaMenu ul li#menu-item-225 ul.sub-menu-1 {
max-width: none !important;
width:400px;
width: 420px\9;
}
(width: 420px\9; is an IE9 hack).
While this does work I am wondering why I am having to specify individual widths when in Chrome this works without issues and I am not specified a maximum width anywhere in the CSS. I hate to admit it but barring using the hack as detailed above, this issue has me beat! I'm pretty certain I've either done something wrong or I'm missing something trivial. Either way, I would love to be able to get to the bottom of this and put it behind me.
Not sure if this helps, but your width behavior is affected by absolute positioning of the <ul class="sub-menu sub-menu-1">.
There is a bit more on the subject: div with unspecified width (absolute positioning), so specifying width or min-width is the way to go.
I'm working on the navigation for this website and am having trouble with the dropdown nav.
Basically, I have overflow: hidden applied to the container that holds the navigation items so that the rollover effect works properly (the bottom of the nav item is 'masked' off); you'll see what I mean if you roll over the nav on the website.
For Products there is a dropdown nav. As the site in built in Business Catalyst (CMS), I don't have control over how the navigation items are nested, but I can obviously style them / target them with JQuery.
Is there a way to make the dropdown container within div#navigation ignore the overflow: hidden rule I have applied? I have tried setting position to absolute and playing with the z-index, but no luck.
Any suggestions to achieve the same result are also welcome.
Solution:
Remove position:relative; rule from box with overflow:hidden; and set it to one of her parent boxes. Then absolute boxes in the box with overflow:hidden; will ignore this rule.
Demo: http://jsfiddle.net/88fYK/5/
overflow: hidden can't be overridden by descendent elements - they will always be clipped by the element with overflow: hidden.
Setting the element's position:fixed will remove the element and its children from the normal document flow allowing it to be unclipped. But you'll have to manually reposition it relative to the browser window. Not a great solution but it is a work-around.
if your container is set to "overflow: hidden;" and your dropdown menu is under this container, you just need to set "position: absolute;"
.container {
overflow: hidden;
}
.your_dropdown_menu {
position: absolute;
}
try to put position:fixed on dropdown content.
.dropdown-content{
position:fixed
}
For those of you who didnt find the solution to you problem in the answers already given, you can try and do what i did, wich is to give your "nav-bar" a different "ID" than the rest of the "containers"..........wich after 2h46min of trying everything.....i said why not and it worked, you never know it might be as simple as that
I have created a CSS dropdown menu, but when it drops down, it is being overlapped by the content, and renders useless.
How do i fix this?
Code
QUESTION SOLVED...THANKS...
Try changing the z-index of the drop down menu
http://www.w3schools.com/Css/pr_pos_z-index.asp
Set your z-index of your nav higher than your content and the problem will go away. For z-index to work properly in all browsers the element with the z-index on it much also have a position:relative or position:absolute.
Update
ul.dropdown { position: relative; border-radius:10px; z-index:9999}
#content{position:relative; z-index:100} /* #content should be whatever your content div is */
I've isolated a little test case of IE7's z-index bug, but don't know how to fix it.
I have been playing with z-index all day long.
What is wrong with z-index in IE7?
Test CSS:
input {
border: 1px solid #000;
}
div {
border: 1px solid #00f;
}
ul {
border: 1px solid #f00;
background-color: #f00;
list-style-type: none;
margin: 0;
padding-left: 0;
z-index: 1000;
}
li {
color: #fff;
list-style-type: none;
padding-left: 0;
margin-left: 0;
}
span.envelope {
position: relative;
}
span.envelope ul {
position: absolute;
top: 20px;
left: 0;
width: 150px;
}
Test HTML:
<form>
<label>Input #1:</label>
<span id="envelope-1" class="envelope">
<input name="my-input-1" id="my-input-1" />
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</span>
<br><br>
<label>Input #2:</label>
<span id="envelope-2" class="envelope">
<input name="my-input-2" id="my-input-2" />
</span>
</form>
Z-index is not an absolute measurement. It is possible for an element with z-index: 1000 to be behind an element with z-index: 1 - as long as the respective elements belong to different stacking contexts.
When you specify z-index, you're specifying it relative to other elements in the same stacking context, and although the CSS spec's paragraph on Z-index says a new stacking context is only created for positioned content with a z-index other than auto (meaning your entire document should be a single stacking context), you did construct a positioned span: unfortunately IE7 interprets positioned content without z-index this as a new stacking context.
In short, try adding this CSS:
#envelope-1 {position:relative; z-index:1;}
or redesign the document such that your spans don't have position:relative any longer:
<html>
<head>
<title>Z-Index IE7 Test</title>
<style type="text/css">
ul {
background-color: #f00;
z-index: 1000;
position: absolute;
width: 150px;
}
</style>
</head>
<body>
<div>
<label>Input #1:</label> <input><br>
<ul><li>item<li>item<li>item<li>item</ul>
</div>
<div>
<label>Input #2:</label> <input>
</div>
</body>
</html>
See http://www.brenelz.com/blog/2009/02/03/squish-the-internet-explorer-z-index-bug/ for a similar example of this bug. The reason giving a parent element (envelope-1 in your example) a higher z-index works is because then all children of envelope-1 (including the menu) will overlap all siblings of envelope-1 (specifically, envelope-2).
Although z-index lets you explicitly define how things overlap, even without z-index the layering order is well defined. Finally, IE6 has an additional bug that causes selectboxes and iframes to float on top of everything else.
http://www.vancelucas.com/blog/fixing-ie7-z-index-issues-with-jquery/
$(function() {
var zIndexNumber = 1000;
$('div').each(function() {
$(this).css('zIndex', zIndexNumber);
zIndexNumber -= 10;
});
});
In IE positioned elements generate a new stacking context, starting
with a z-index value of 0. Therefore z-index doesn’t work correctly.
Try give the parent element a higher z-index value (can be even higher than the child’s z-index value itself) to fix the bug.
I encountered this issue, but on a large project where HTML changes had to be requested and became a whole issue, so I was looking for a pure css solution.
By placing position:relative; z-index:-1 on my main body content my header drop down content suddenly displayed above the body content in ie7 (it was already displaying without issue in all other browsers and in ie8+)
The problem with that was then this disabled all hover and click actions on all content in the element with the z-index:-1 so i went to the parent element of the whole page and gave it a position:relative; z-index:1
Which fixed the issue and retained the correct layering functionality.
Feels a bit hacky, but worked as required.
I found that I had to place a special z-index designation on div in a ie7 specific styelsheet:
div { z-index:10; }
For the z-index of unrelated divs, such as a nav, to show above the slider. I could not simply add a z-index to the slider div itself.
If the previously mentioned higher z-indexing in parent nodes wont suit your needs, you can create alternative solution and target it to problematic browsers either by IE conditional comments or using the (more idealistic) feature detection provided by Modernizr.
Quick (and obviously working) test for Modernizr:
Modernizr.addTest('compliantzindex', function(){
var test = document.createElement('div'),
fake = false,
root = document.body || (function () {
fake = true;
return document.documentElement.appendChild(document.createElement('body'));
}());
root.appendChild(test);
test.style.position = 'relative';
var ret = (test.style.zIndex !== 0);
root.removeChild(test);
if (fake) {
document.documentElement.removeChild(root);
}
return ret;
});
It looks like not a ie bug, just for diffrent understanding to the css standard. If outside container is not specified the z-index, but the inner element specified a higher z-index. So the container's sibling maybe overlay the high z-index element. Even if like that, it only occurs in IE7, but IE6, IE8 and Firefox is ok.
In IE6 in general, certain UI-elements are implemented with native controls. These controls are rendered in a completely separate phase (window?) and always appear above any other controls, regardless of z-index. Select-boxes are another such problematic control.
The only way to work-around this issue is to construct content which IE renders as a seperate "window" - i.e. you can place a selectbox over a textbox, or, more usefully, an iframe.
In short, you'll need to put "on-hover" like things such as menu's in an iframe in order to let IE place these above built-in UI controls.
This should have been fixed in IE7 (see http://blogs.msdn.com/ie/archive/2006/01/17/514076.aspx) but perhaps you're running in some kind of compatibility mode?
This bug seems to be somewhat of a separate issue than the standard separate stacking context IE bug. I had a similar issue with multiple stacked inputs (essentially a table with an autocompleter in each row). The only solution I found was to give each cell a decreasing z-index value.
If you wanna create dropdown menu and having a problem with z-index, you can solve it by creating z-indexes of same value (z-index:999; for example).. Just put z-index in parent and child div's and that will solve problem. I solve the problem with that. If i put different z-indexes, sure, it will show my child div over my parent div, but, once i want to move my mouse from menu tab to the sub-menu div (dropdown list), it dissapear... then i put z-indexes of same value and solve the problem..
I solved it by using the developer tools for IE7 (its a toolbar) and adding a negative z-index to the container of the div that will be below that the other div.