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;
}
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.
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!
I have been trying with a floated menu to left actually when the menu li got in great number so then the div just right beneath that get over that menu so what I want is that the below div don't get over it.
Here in picture the footer div got over the menu when I remove float:left so it actually get into a straight menu and the footer is not over on the menu then..what I want it to be in the way that it is in float mode too and the div don't get over it please..
Here is image to get some idea:
And Here is the CSS Code as :
ul.quick_categories_menu {
margin: 0;
padding:0;
margin-left: 14px;
margin-top: 40px;
}
ul.quick_categories_menu li {
list-style:none;
float: left;
width:200px;
margin-right: 20px;
text-align: left;
}
Here live jsfiddle link please as : http://jsfiddle.net/h1ua00cd/1/
try adding a ul:after and clear:both
ul:after {
content: "";
display:block;
clear:both;
}
Here's the jsfiddle: http://jsfiddle.net/h1ua00cd/3/
Added the border to demo that it what you put after is not covering the list.
http://pvpers.net/new/ Is my test site for the base style.
I am trying to have the drop-down (example: Hover over "Games") appear BELOW the border-bottom I have for the navigation and not move the current border bottom. Also, I do not want the hover to effect the auto width of the Games li in the list nav.
And I know the indentation is due to the list being inside the other UL. Can I get rid of that without messing with margins, paddings, and etc?
You can see what I have done on the test site.
Thanks!!
You have to use absolute position for the second-level menu.
Try adding these.
nav ul#navul li {
transition: all .15s ease-in-out;
display: inline;
float: left;
border-bottom: 2px solid #8d0000;
position: relative;
}
.secondlvl {
position: absolute;
top: 38px;
left: -40px;
width: 145px;
}
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;
}