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.
Related
I have designed a navigation bar with four options, whereupon while one of these options are hovered, a dropdown menu appears. The dropdown menu functions properly while the navigation bar is not set to position:fixed; but when it is, the dropdown menu covers the option/link that activates it.
Here I have linked a Jsfiddle: https://jsfiddle.net/rqhenq4a/
I have implemented the fixed navigation bar with the following lines of code:
body {
padding-top:49px
}
(To avoid the navigation bar to overlap underlying content, the navigation bar happens to have a height of exactly 49px)
ul {
position:fixed;
width:100%;
top:0;
z-index:1;
}
The first line of code to make the navigation bar fixed, the second line of code to make the navigation bar cover the whole viewport, the third line of code to let it be on top of the viewport at all times (I think), and the last line of code to avoid the navigation bar to inherit opacity from an underlying image.
The desired result would be a fixed navigation bar where the "Produkter" option would not be covered by the options of the dropdown menu.
you are just missing that offset within top. By setting position to absolute, you have default top offset 0.
Here is your edited code, fix is on line 46.
https://jsfiddle.net/rqhenq4a/3/
Code example:
ul li ul#dropdowncontent {
min-width:100%;
display:none;
position:absolute;
z-index:999;
left:0;
top:49px; /*This line here <---------- */
width:90px;
}
is this what you are looking for jsfiddle.net
ul li ul#dropdowncontent {
min-width: 100%;
display: none;
position: absolute;
z-index: 999;
left: 0;
width: 90px;
top: 100%;
}
Just add top:100%;
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
For some reason when I hover over menu links on my site, half of the content (image slider) below disappears.
I cannot seem to figure out why this is happening
URL: http://swampfighter.bmdigitalgroup.com/
Thanks so much!
It is because you are setting the height to 100% on the hover state for the list item. If you remove that it should behave correctly.
If you want it to cover the whole height of the navigation bar, I would set my hover styling to this:
.navbar ul li:hover > a {
position: relative;
height: 90px;
background: #7eb378;
z-index: 1000;
}
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;
}
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.