I am trying to build a CSS dropdown menu. The problem is that all child nodes in the ul li tree appear on the same row, instead of below the parent. How do I make the subcategories appear BELOW the parent ?
Add display:block; float: left;position: relative; on the li to establish a containing block and then position:absolute; top:100%; left:0; on the sub-menu ul to position it with respect to its containing block.
You can use css to position the submenu.
ul li {
position: relative;
}
ul li ul.sub {
position: absolute;
left: 0;
top: 100%;
}
Your main menu items need to have a positioning context, probably relative. Then, for the child menu, set the positioning to absolute, set left to 0 and top to 100%. That should do the trick.
Related
I was wondering if someone could help me make it so that the content does not drop down without it messing the sub menu up. I tried changing the sub menu to position: absolute but that just messed up the sub menu and I also tried z-index: 2 and that didn't help.
The only other idea I would have to fix it is to somehow apply something like the position: absolute to the text but, I am not sure how to do that.
If anyone could help me I would greatly appreciate it
Add this piece of css at the end of your style file
nav ul li {
position: relative;
}
nav ul ul {
position: absolute;
width: 100%;
}
For sub-menu to not push the content down it needs to have position: absolute style. Other bits of css is to fix the styling and sub-menu width.
you should add following css to your code
nav ul li {
position:relative;
}
//add class on sub-menu(.drop-down)
.drop-down{
position:absolute;
top:100%;
left:0;
right:0;
z-index:1;
}
//z-index value set as your needs
Make your dropdown menu's position: absolute; and then the element under it as position: relative;.
If this doesn't work, try to make both the dropdown menu and the element under it as position: absolute; and then set the z-index of the dropdown as higher than the element below it.
I made the dropdown and the element under it positioned absolute (both of them), and it worked. The dropdown menu is now ignoring the element under it.
I have this menu http://codepen.io/alexandernst/pen/oxpGYQ (tried to insert it here but SO's result viewer is breaking the demo...) and I want to make the second and third level ul elements the same height as the first level ul and also start at the same position (which would be top: 0 is this concrete demo) as the first ul element.
So, said with other words, I want all ul elements to start at the tom of the row div and have 100% height.
Note that I don't know how many li elements I'll have, so I can't hardcode top values for each ul element in order to adjust it's top position.
I'd like to avoid having to use javascript, but if there is no other way I could accept an answer with JS.
Try giving position static to the li elements. Then when setting height: 100% to the ul element it be will relative to the parent ul instead of the parent li. So long as the ul element has position set to relative, absolute or fixed.
Add this CSS
#cssmenu ul li {
position: static !important;
}
#cssmenu ul ul {
top: 0;
height: 100%;
background: #1b9bff;
}
Here is the Codepen solution: http://codepen.io/anon/pen/KzZXxv
Im have a problem with submenu which has position:absolute; and top:5em;. The submenu is hidden until you hover over parent (li element). Everything is working but when you hover over parent (li element) the submenu (li > ul element) is shown but you cant mouse-over (access) it because it's disappearing when mouse leaves parent (li element) area.
I found out that the top: 5em; is doing a "break" between LI and UL. When i try to reduce the top: 5em; to for instance top: 1em; (size where UL is just on border of parent (li element) or for instance goes a bit into parent (li element), then the menu is working!!
But i need it to have the top of my choice and still working.
How to achieve this with position:absolute and top properties?
Live demo: http://codepen.io/riogrande/pen/bEGzXm
I find it strange you found the exact root cause of the problem, but has yet to figure out the fix.
Anyway the fix is to add a transparent child to the <li>, so that it fill the gap between the <li> and its <ul> child. In this case I use li:before:
&:before{
content: '';
display: none;
width: 100%;
height: 5em;
position: absolute;
left: 0;
top: 0;
}
&:hover:before{
display:block;
}
Demo: http://codepen.io/anon/pen/mVdgdo
Edited: Answer edited to cover issue with insights from the OP himself.
Solution based on Av Avt's answer
Anyway the fix is to add a transparent child to the <li>, so that it fill the gap between the <li> and its <ul> child. In this case I use li:before:
&:before {
content: '';
display: none;
width: 100%;
height: 5em;
position: absolute;
top: 100%;
left:0;
}
And then when you hover over parent <li> display it as block so it fills the gap ONLY when parent <li> is hovered (active)
&:hover {
&:before {
display:block;
}
> ul {
display: block;
}
}
Anyway thanks to #av-avt !! Without you i would not figure it out!
www.codepen.io/BlueRedOne/pen/rOpjxN
If you hover over Musikfest 2017 you will see it and i has the z-index on 0 and the navigation on 1 but it doesn't work.
Give every element with z-index a position: relative.
z-index won't work without any form of position applied to the element.
Just add z-index, position to nav ul like this: Demo
nav ul{
margin-left: -40px;
width: 100%;
list-style-type: none;
z-index: 9999;
position: relative
}
You can remove all other z-index which used. Hope this is what you want !
give your <ul> which is the pulldown position: relative; then it will above your content
My website (http://www.oia.co.za/schedules/) has a horizontal navigation menu with dropdowns on hover, and the darn thing shifts the neighbouring list-item the width of the dropdown on hover.
I can't for the life of me figure out what the problem is, and my eyes are square from looking at the CSS all night.
I know it is something stupidly simple, and I've just looked at it for too long...
Give position:absolute to your Dropdown UL. Write like this:
.menu-item{position:relative}
.sub-menu{
position:absolute;
top:30px;
left:0;
}
You could try updating the dropdown ul to be absolutely positioned:
#top_navigation ul.sub-menu {
display: none;
margin-top: 0;
position: absolute;
top: 50px;
}
#top_navigation ul {
overflow: visible;
}