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.
Related
I want to show the content of my Mega-menu also within the page. I duplicated the CSS styles but it seems that I still miss a rule because the border of the UL with id="wrongBorder_because_of_no_Height" does not show around the whole UL, probably because the UL height is 0
sample page - http://www.teddicom.com/test_07_ul_border_stack_overflow.htm
[compare the border of the floating menu of family 2, and the border of the UL in the page]
What is setting the height of horizontal ul to zero?
How can I show the border properly?
Add overflow:hidden or overflow:auto to your class
#wrongBorder_because_of_no_Height
{
overflow:hidden;
}
The reason why this works is because by setting the overflow property to a value which is not visible - this triggers a block formatting context.
Check out this post for a full explanation.
Add this to your CSS:
.menuInPage ul
{
height: 200px;
}
You are floating the li elements left. Parent elements, the ul, are never to expand to contain floated children.
Haven't checked to see if this is what you want but either remove the float or try overflow:auto.
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 setup a jsFiddle to show what I'm doing:
http://jsfiddle.net/UfzCS/
Basically the border I set (needs to go all the way across) on the UL is showing up over (instead of under) the LI's because the LI's are floated left. Is there any workaround for this? I know I can set a height, but I may make the text a variable size so the height may dynamically change.
Your LI are floated, so the UL does not know where to wrap them.
An easy way to fix this is to make the UL float: left or add a overflow: hidden to it.
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.
I am trying to do a vertical dropdown menu. This is my code
.menu li:hover>ul{
position:absolute;
display:inline;
left:120px;
top:100px;}
I use position: Absolute to remove the sub-menu from the table, once the menu gets hovered. It appears that, if I do not indicate top or left property. The sub-menu will displayed relatively. Now I need to adjust the position relatively but seems that only the left property works. So my sub-menu left position is 120px relatively away from its original position. But the top is 100px away from the top of the window, rather then to the original position. How do I move the list up relative to it original position? I cant use position:relative because I need the sub-menu to be remove from the table.
You need to give it's container a relative position, like this:
.menu li:hover { position: relative; }
This way the positioning of the <ul> inside is absolute, but relative to this container instead of the entire window, which seems to be what you're after.