Sub-menu items causing main menu items to spread out on hover - html

I have this unordered list I've styled into a menu. I want the blue menu items to be centered underneath the top level red menu items, so I've given the red menu items a display of flex:
nav > ul > li > a {
color: red;
display:flex;
justify-content:center;
}
The problem is when the red menu items are hovered over the blue menu items push the other red menu items out of the way.
https://jsfiddle.net/m14dxtz8/
Any ideas how to fix this without JS?

Add this to your CSS:
ul ul {position: absolute;}
By making their positions absolute, you take them out of the document flow so they don't "push things around."

Related

How to get a html element to overlap another when it is displayed?

#nav ul ul li {
display: block;
font-color: blue;
font-size: 1.5em;
z-index: 1;
position: relative;
}
For example, I have a mobile responsive site, and the main menu works fine, but when I resize the browser window to be small, to replicate a small screen such as a mobile phones.... One of the main menu items that has a drop down list gets displayed on top of the other main menu items. This means that the main menu drop down items are displayed on top of some main menu text directly underneath!
I have done z index so the drop down menu does sit on top, but the problem is, even though it sits on top, the main menu underneath is still displayed.
This is the jsfiddle
When you don't set z-index, elements follow a default ordering for which gets displayed on top:
When no element has a z-index, elements are stacked in this order (from bottom to top):
Background and borders of the root element
Descendant blocks in the normal flow, in order of appearance (in HTML)
Descendant positioned elements, in order of appearance (in HTML)
MDN
In your HTML, the ul for the submenu appears before the HTML for the other menu items, and so the other menu items appear on top of the submenu's background.
To fix this, set a z-index so that the background of the ul will be promoted:
#nav ul ul {
z-index: 1;
}
Fixed JSFiddle

How to make a submenu appear properly below parent <li>?

Hi I am having trouble getting my submenus to line up nicely below my menu items. I've tried researching it but almost everything gives ideas for floating menus, instead of a display:table one like I've done.
Here's a snippet: http://codepen.io/ruchiccio/pen/ZGGQvR
You can line the submenu up to the left side of the parent menu items by removing padding on the nested ul elements.
#navigation1 nav ul li ul{
position:absolute;
display:none;
padding: 0;
}
http://codepen.io/anon/pen/rVVxJZ

Get navigation menu dropdown to look just like the basic menu items

I have this CSS menu:
http://jsfiddle.net/7JC8t/
If you hover your mouse over 'inostranstvo' you will see a dropdown open below it. What I've been trying to do but failing is to get the dropdown items to look like the items in the horizontal menu.
So when a user hovers over 'inostranstvo' the items that show up should have: the same width (width of the widest item), same height and background as the existing menu items.
The background is easy, but I can't force the height and I don't know how to align the widths. This doesn't do anything:
#nav li:hover ul li{
height:55px;
line-height:55px;
width:200px;
}
The width value is random, what's most important is the height, which I can't seem to force on the list items. On the other hand, adding a border works, but it adds it inside the red background area. I'm sure this can't be complicated, but I can't figure it out.
Have you tried to set the submenu li elements to "display-type: block"?
I have added the following css to JSFiddle and it seems to work:
#nav li:hover ul li {
display: block;
background: #DE2211;
border-bottom: 1px solid black;
}

z-index / border related issue with nav menu

http://jsfiddle.net/FS4zT/
If you visit the above link you see what am describing below.
Summary: I have set the z-index of the submenu to 99 and the z-index top level menu to 9..
So basically i was thinking when i move the mouse over to the 1st menu, the 1st submenu will stay in focus when i move the mouse over the items of the submenu.
But for some reason in Firefox 11.0 it switches over to the 2nd Top Level Menu when i try to move my mouse over the 2nd/3rd/4th items of the first sub menu.
In IE 7 : It works as desired by i can still see the border of the 2nd Top Level Menu overlapping the items of the sub-menu even tho their z-index is higher. The border problem can be even seen in firefox.
Can someone shed some light where i might be going wrong?
This should fix it, I hope.
#menu li ul li {
position: relative;
}
Beware of the stacking context of the z-index. What you want is not working for parent-child z-indices.
The problem is that the parent li of the submenu is not as wide as the submenu (4x times smaller). So if you hover to the right, the li loses focus.
One way to solve this, is setting z-index: 0 on al ul submenus and z-index: 1 on the current submenu. The submenu's should have position: absolute.
Update: Solution with position: relative (accepted answer) is really a good one. This is working because the lis of the submenu do not make the parent container larger since they are left floated.
You must change the height in #menu li
#menu li {
width: 140px;
height: 25px;
float: left;
border-right: 1px inset white;
z-index: 9;
}
The other way you can go to keep your borders at 50px is when you add to the CSS something like this.
#menu li:hover ~ li{
height:25px;
}

Navigation styling help

I am having trouble with my navigation menu, I have some li that are floated left of each other, and each li has a back ground image set to the right to give a seperation effect, within the li I have a a that is text aligned center.
On hover I have a bottom-border but I need said board to span the full width of the li not the a is this possible?
Here is a fiddle of my current attempt,
Fiddle
The following CSS should do the trick:
header nav a { width:100%; }