Have a look at my page at http://81.216.141.82/flygklubb
Hover the first menu item "Flygplan" and then hover the first child item. As you can see the child to "DELTA 3000 MK2" appears on top of that item, but i want that level to appear right to the first level, but i don't want to have any fixed values for position. How can i accomplish that?
Something alongst the lines of:
#topnavigation ul li ul li ul{
margin-top: -50px;
margin-left: 140px;
}
Should do it. It's not necessarily fixed positions, more relative positions to the original element.
Related
I created a CSS menu w/ submenus, using pixel values for dimensions. Now, that I see how stupid of an idea that was, I tried to convert all pixel values into percentages using the formular (size / context) * 100 to make the menu responsive.
The original version looked like this:
After converting everything into percentage values I end up with this:
http://jsfiddle.net/5CK9n/
The main reason is that I am still using px to specefy the height of nav ul li. Whenever I try to specify that height in percent, top menu points (nav ul li) don't change their size at all, and when hovering over one of them to bring out the submenu (nav ul li ul), the top menu point grows in height all over the place.
Could anyone tell me what might be causing this behavior?
First of all, the css that makes that happen is:
nav > ul > li.hasSubMenu:hover + li {
/* this-> */ margin-left: 25%;
}
And this:
nav ul li:hover > ul {
display: block;
position: relative;
/* and this below */
top: -100%;
left: 100%;
}
Remove the top, left and margin-left values. See: jsFiddle.
Second of all, use media-queries to make your navigation responsive. Using just percentages is not effective.
I have a horizontal navbar in the form of an unordered list, where the list items are all floated left, and the list has overflow:hidden; for consistency. I want the "active" tab to be taller, without changing the layout of the list element.
The navbar is 60px tall with each list item 50px tall, and I want the active tab to be 55px. The question is, how do I get the list items to "stick" to the bottom of the navbar, without changing their horizontal positioning?
Things I've tried: (this list will grow)
ul#nav{position:relative;} and ul#nav li{position:absolute;bottom:0;} stacks all elements on top of each other; I refuse to hard-code each tab's position
ul#nav li.active {position:relative;bottom:/* difference in heights */;} leaves the block where the tab originally was empty, effectively acting as an unwanted margin
The solution was simple (and I'd already been using it for styling of list items). Rather than style the list items themselves, I styled their contents, which are each anchor tags. So the default anchor tag has
height:50px;margin-top:10px;
while the .active tag is styled
height:55px;margin-top:5px;
A less difficult problem than I imagined.
example with vertical-align : http://dabblet.com/gist/5333194
ul {
line-height:60px;
}
li {
display:inline-block;
vertical-align:bottom;
height:50px;
}
li:hover {
height:55px;
}
I'm trying to make a pure CSS dropdown menu, but it has one odd bug;
when the page loads, the text in the main menubar is slightly offset to the right.
It jumps back to the left when the page is modified or when a menu item is moused-over.
This includes right-click > inspect element, which makes it really hard to find out what's going on.
Here's an example of it: http://jsfiddle.net/m75p3/1/
As you can see, it's in the wrong position on load, but jumps to the correct one a few milliseconds after. This is because jsfiddle is modifying the page.
If loaded from its own file, it will not exhibit this jumping behaviour until moused-over.
Any ideas why?
The problem is that you have declared 'position:absolute' on your 'toplink' elements but not given any left value, so their position is determined by their parent's text-align:center rule. When the transition occurs, that disturbs the layout so they move. To fix it you need to declare the li as position:relative, so that it becomes the layout parent, and then set left:0 on the 'toplink' a element.
Addition:
To prevent the text from wrapping in the sub-menus, you can set their white-space to nowrap.
#head ul li {
position: relative;
...
}
.toplink {
left: 0;
...
}
#head li li, #head li li a {
white-space: nowrap;
...
}
http://jsfiddle.net/m75p3/5/
I have a main menu using a list. When the user hovers over an item it moves up to indicate the hover to the user all while changing the background color and displaying its sub-menu.
Link to the website with the issue.
Add debug=true to the query string if you need firebug.
The issue is in IE8 where if a sub-menu is active and the user hovers over any list item in the main level all of the previous items act like they are being hovered over too. This means that those list items move up but the background-color does not change. Depending how the user moves the mouse over the list items, some of the items will even go bellow the start position.
Here is the SASS that I converted to CSS in order to help understand how I move my menu items like that.
#mainmenu ul li:hover,
#mainmenu ul li.active{
margin-top: -15px
}
The only difference in HTML between The sub-menu being active and not is the main level list item has a class subactive which is not used by any css and the active sub list item gets a class active.
I have a feeling that the issue is somewhere between the background-color change and the margin-top negative value.
Usually one would expect the elements after to be affected and not the ones before.
Please avoid any Javascript fixes please.
Thank you!
In IE8, when you adjust the margin-top: -15px, it pushes the UL box top to fit, instead of letting the LI go outside the UL box. So all the other tabs move up to fit the new UL box.
I suggest setting the non-hover LI to margin-top: 15px and hover LIs to margin-top: 0--reverse it.
#mainmenu UL LI
{
margin-top: 15px;
}
#mainmenu UL LI:hover
{
margin-top: 0;
}
(This will still work cross-browser.)
I have a nested ul (menu) and want to position the nested menu directly beneath the containing menu, starting on the same horizontal position as the outer menu.
See Example
In this example the nested menu is positioned too far to the left and a little too high (it should start vertically where the containing menu ends).
I might use left: 0px; as showed here to fix the horizontal position, but that still doesn't fix the vertical position.
You can use top:40px; to fix the vertical position
Like here: http://jsfiddle.net/zdkb5/2/
I fixed it with:
margin-top:10px; to the #menu > ul > li > ul class
Demo
The height of the outer container is irrelevant.