I need to make a vertical menu using CSS and <ul> <li> tags. But when ever I put the cursor on a link that contains submenu, other main items move to another place.
This is my jsfiddle.
Can anybody help me ?
Instead of making the sub menu position: relative (which still makes it part of the flow) make the containing li position: relative and the menu_sub position: absolute with the appropriate left/right/top/bottom settings:
#menu li {
position: relative;
}
#menu_sub {
margin:0;
padding:0;
position: absolute;
list-style:none;
display:none;
left: 70%;
top: 0;
}
http://jsfiddle.net/Kc6m4/3/
Explosion Pills response works. As does this:
By floating the sub menu, you can also break it you of the normal flow, but still retain it's relationship to the parent UL:
http://jsfiddle.net/Kc6m4/4/
#menu li:hover ul {
display: block;
float: right;
clear: none;
position: absolute;
top: -30px;
left; 0;
}
Then you adjust the position using top, left, right, etc. In my example above, I used a negative top position to clear the height of the parent list item so they start at roughly the same position.
Related
I am trying to customize navigation menu in wordpress. I want my submenu to appear below the parent menu element in a single line. I am also setting submenu position to absolute so that I can control the overlap of main menu bar and submenu bar.
Below is my minimized CSS (in SASS, for clarity I am posting only those portions that i thought relevant).
Problem: Everything is working fine except the submenu items now break into lines, rather than in a single line.
Observation: If I remove absolute positioning OR I give a fixed width, then it works.
What I tried: Putting white-space: nowrap and display:inline-block (in li), though I know display doesn't make sense for absolute positioning.
.menu-primary-menu-container {
&>ul {
float:left;
list-style: none;
&>li {
position: relative;
float:left;
&>ul {
position: absolute;
height: 40px;
bottom: -30px;
list-style: none;
&>li {
float:left;
}
}
}
}
}
You have to specify a width to the submenu in order to get it working: JSFiddle
.menu-primary-menu-container {
&>ul {
float:left;
list-style: none;
&>li {
position: relative;
float:left;
&>ul {
position: absolute;
height: 40px;
bottom: -30px;
list-style: none;
width: 500px;
&>li {
float:left;
}
}
}
}
}
If you use position: absolute; without a width or without specify left and right, the element will use the width as small as possible.
I am trying to get some menus to look good, but I seem to have two options that do half of what I want. What can I do that will give me both of the behaviors I want?
The problem is with the offset in my menu. When I set the submenu to relative. Everything expands as it shouldn't. When a submenu is moused over it expands in place instead of off to the right as I would like it to. The jsfiddle below shows this behavior:
http://jsfiddle.net/7a4dzxt2/
When I use absolute, all the sub menus are stuck to the left. They exapnd exactly as I would like, but each menu is all the way on the left of the screen and not directly below the main menu item. The jsfiddle below shows this:
http://jsfiddle.net/w8ztr9eb/
The code that is being changed is:
#navbar ul li ul {
display:none;
position:absolute;
left: 30px;
background-color:transparent;
padding:10px;
opacity:0.95;
}
To:
#navbar ul li ul {
display:none;
position:relative;
left: 30px;
background-color:transparent;
padding:10px;
opacity:0.95;
}
How can I keep the menus from expanding like in the second jsfiddle, but keep the menu from being stuck to the left side of the page?
If you set the containing li elements to position: relative then your absolutely positioned ul elements will be positioned in relation to their parent:
#navbar ul li {
/* ... */
position: relative;
}
http://jsfiddle.net/w8ztr9eb/3/
It's a start. When you use absolute, it positions based on the nearest positioned parent. So, try:
#navbar ul li {
position: relative;
}
#navbar ul li ul {
position:absolute;
left: 0px;
padding:1px;
}
http://jsfiddle.net/w8ztr9eb/2/
I am curious if there's any way to correct this behavior using css only...
Notice that when you hover over the white space to the right of the menu it causes the blur of the menu items. If you hover over the white space to the left of the menu it does not blur the menu items.
I am sure that the float: left of the #centeredmenu ul rule is causing this blur. I would like to stop the blur when you hover over the white space to the right but this rule is necessary to center the menu.
I am trying to correct this page: http://www.soaringbirdstudios.com/help
As you can see in firebug I tried to add another div below the centermenu div with a style of clear both and enclosed both divs in an enclosing div but that didn't work. I just don't have enough experience to figure this one out.
Thanks.
Not sure if it will help your exact desired solution, but if you mean wanting to get rid of the floats, you can simply do the following:
Change:
.bmenu li {
display:inline-block;
/*float: left;*/ <-- can delete or comment out
list-style: none;
padding: 0;
position: relative;
/*right: 50%;*/ <-- can delete or comment out
margin: 100px 0 0;
font-size: 50px;
vertical-align:top; <--- added for making it pretty
}
Continue downwards with the following changes to get rid of floats completely:
delete <div style="clear:both;"></div>
#centeredmenu ul {
/*clear: left;*/ <-- can delete or comment out
/*float: left;*/ <-- can delete or comment out
list-style: none;
margin: 0;
padding: 0;
position: relative;
/*left: 50%;*/ <-- can delete or comment out
text-align: center;
}
#centeredmenu {
/*float: left;*/ <-- can delete or comment out
width: 100%;
overflow: hidden;
position: relative;
}
Im using the whiteboard theme for wordpress.
My navigation is aligned to the right hand side of my header, however the navigation text is overlapping, the two inks in the navigation overlap each other on the header. any idea why?
#nav-primary {
clear: both;
width: 100%;
padding: 0 10px;
}
#nav-primary ul,
#nav-primary li {
list-style: none;
}
#nav-primary a {
position: absolute;
right: 0;
padding: 10px;
width: auto;
/*bottom: auto;*/
}
try using z-index:99; or create a relative div id if you are using position absolute.
It seems that position: absolute is doing you no favours here. Try removing this.
You also might be inheriting undesirable styles from your basic list style, but without seeing the whole CSS file we won't be able to determine that.
I am having a problem with the way my horizontal sub navigation in IE9.
This page the navigation renders great in all the rest of browsers but in IE9 it ignores the style given to the list items and pushes the subnav up against the top nav.
Here is the link to the page I am working on:
http://test.shared-vision.net/menu_test.html
and here is the link to the css"
test.shared-vision.net/css/menuestyle.css
Any sugggestions are appreciated.
On your rule #menu li.selected ul you need to set a bottom value:
#menu li.selected ul {
bottom: -40px; /* this will make it appear in the right place */
display: inline;
float: right;
padding: 0;
position: absolute;
right: 0;
width: 150%;
}