I'm having issues designing the 3rd level of my drop down menu in CSS.
I have a working fiddle here to show you: http://jsfiddle.net/HdFaV/
As you can see, the first menu item A and its sub-levels are able to position nicely (ignore the overlapping of the 3rd level to the 2nd menu item).
However, if you try for the 3rd level for the second menu item XXXXXXXX, it positions incorrectly.
I understand that the issue is due to the margin-left from the code below
/* level 3+ list */
#nav ul ul
{
margin-left: 50px;
top: 0px;
}
Is there anyway to automatically set the margin-left according to how long the 2nd level menu item's width is? Or do I have to manually set the margin-left for every one of them?
Such as:
#nav ul ul:nth-child(1)
{
....
}
and so on..?
Thanks for any help!
b0ssY
#nav ul ul
{
left:100%;
top:0;
}
Instead of using the left margin use 100% positioning which will calculate the width of the higher list item.
Related
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
I have a problem with my dropdown or submenu. It worked perfectly fine before, but after I changed my menu to be floating, the submenu won't show anymore.
this is the code I used for menu:
border-bottom:2px solid #e9e9e9;
position:fixed;
width:2000px;
background-color:#ffffff;
padding-left:605px;
padding-right:210px;
margin-right:-200px;
And this is my website
http://lobaab.com/
could you help me on how to fix this plz
Nested ULs are hidden by display: none in the default state, and you never change this property to block.
.sf-menu li:hover > ul {
display: block !important; /* importnat isn't necessary if you know how strong selector you need to use */
}
Than, you set width: 100% for submenu, but it´s width of their parent (LI). You want probably set higher width, or don´t set the width exactly and use only white-space: nowrap - submenu will have the width of the longest item.
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;
}
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;
}
I have an example of my problem set up here.
I have had to set some li's to display: inline, so that they can occur on the same line, but now I need to add drop-down lists to them, and the drop down lists are happening on the other side of the page from where I would like them to. Do I have to position my original li's in a different manner?
Keep in mind that if you want to use the :hover class in anything other than an anchor tag, forget getting it to work in IE6 and make sure you have the correct DOCTYPE for the other browsers.
Try replacing the relevant parts of your CSS with this:
li
{
display: inline;
}
ul.level_1 li
{
position: relative;
}
ul.level_1 ul
{
position: absolute;
visibility: hidden;
}
li:hover ul
{
position: absolute;
right: 0;
visibility: visible;
width: 300px;
}
Basically hides the sub-level list until you hover over the parent list item node.
Setting the parent list item nodes as position:relative means that if you set any child nodes within as position:absolute it will be set relative not to the browser window but to the parent list item. This will have them show up directly underneath the list item you're hovering over and not on the other side of the window.
The width was added to have the sub-level list display as a line instead of a column.
I'm not sure if you're trying to move the top menu to the left, or the submenus to the right, so I'll propose a solution either way.
If you want the main menu items to appear on the left, then you need to remove or change the text-align: right in your body css.
If you want the submenus to appear on the right side, then because your <ul>s are absolutely positioned, you should change this rule:
li:hover ul
{
left: auto;
}
to this:
li:hover ul
{
right: 0;
}