I have a web page with a CSS dropdown navigation menu. My issue is that when I hover over the top of the menu to make the dropdowns appear, everything else in the page moves to make space for the dropdown instead of the dropdown moving over everything else. My navigation links are in a div element with the id "header" and my CSS for that element looks like this:
#header {
width: 100%;
z-index: 100;
position: relative;
}
None of the elements in the page that are moving are inside the header and non of them have a z-index specified. Can anyone tell me what I'm doing wrong?
You need to add position: absolute to the submenus that appear when you hover over a menu button.
See here for a tutorial: http://www.htmldog.com/articles/suckerfish/dropdowns/
Also relevant: http://css-tricks.com/791-absolute-positioning-inside-relative-positioning/
Change position to absolute and make the position of the parent container relative.
Or, in the opposite direction, create another container within #header and stuff everything inside it.
The key point is that the inner element needs to be absolutely positioned, but in relation to its parent. Therefore position parent relatively.
Related
I have a dropdown menu that behaves fine everywhere (even Edge!) except for IE11.
The dropdown menu has:
position: absolute;
left: auto;
top: --nav-height;
I can see that in IE11 it aligns itself to the right of the box border of Root A, which seems to indicate that it's not really absolutely positioning itself...
The code is from this codepen but I can't get it to work at all on IE11
All other browsers:
IE11
Try to add position:relative to the containing elements of your submenu element, in your case i think it contented in the element showing the Root A text, than you can apply left:0px to the submenu element.
It is important to understand that a value of left:0px is set equal to the left of it's parent element, not the page.
And setting position:relative on a the parent element sets the bounds of an absolutely positioned element equal to the parent element.
I need to make a Bootstrap menu with dropdown-toggle elements inside a slimScroll. The menu needs to be vertical (I achieve that through custom CSS; bare-bones concept fiddle is at: http://jsfiddle.net/HkAAn/) and have submenus which are wider than the container. Since I am using slimScroll, the entire left part needs to be wrapped in an element with position: relative and overflow: hidden. Of course, this crops the submenus. Is there any way for the submenus to not be cropped, while retaining the wrapper with position: relative and overflow: hidden?
In order to alleviate the cropping, you must get the UL element that is your menu outside of the element that has "overflow: hidden".
If you hover over the User menu, then the menu shows up at left = 0. But, it should show up exactly under the User 'button'. How can I accomplish this? (only CSS3)
Add this rule to your CSS:
.menu > li {
position: relative;
}
Explanation: if you specify position: absolute on an element, top and left will be relative to the first parent element that has any position other than static. If no element like that is found, it will be relative to the page (like in your case). Specifying position: relative is the easiest solution because the element won't be taken out of the document flow.
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 am trying to do a vertical dropdown menu. This is my code
.menu li:hover>ul{
position:absolute;
display:inline;
left:120px;
top:100px;}
I use position: Absolute to remove the sub-menu from the table, once the menu gets hovered. It appears that, if I do not indicate top or left property. The sub-menu will displayed relatively. Now I need to adjust the position relatively but seems that only the left property works. So my sub-menu left position is 120px relatively away from its original position. But the top is 100px away from the top of the window, rather then to the original position. How do I move the list up relative to it original position? I cant use position:relative because I need the sub-menu to be remove from the table.
You need to give it's container a relative position, like this:
.menu li:hover { position: relative; }
This way the positioning of the <ul> inside is absolute, but relative to this container instead of the entire window, which seems to be what you're after.