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/
Related
I have some difficulties trying to center my dropdown navigation.
Below I posted an image of the current design and some CSS.
As you can see, the dropdown doesn't fit on the page.
.structure-mainnavigation ul li ul {
width:500px;
}
.structure-mainnavigation ul li ul li {
width:25%;
float:left;
text-align: center;
}
Any help is appreciated.
After messing around for hours and hours i solved my own problem by adding the following code:
li:hover ul { left:auto; right:0; }
you can try:
position: absolute;
margin:0 auto;
when you say centering you mean to put drop down on center of the page or center of menu item?
content has been hidden after position absolute<
position absolute be hide my content
i want my content to be border 5px
but after type this code my content has been hidden
see: http://qass.im/checked
.wrapper > ul {
list-style: none;
position: relative;
z-index:1;
clear:both;
border:5px solid #ccc;
}
.wrapper > ul > li {
position: absolute;
left:0;
top:0;
width: 100%;
}
Absolutely positioned elements don't affect the height of their containers. If your <li>s are positioned absolutely, you need to manually give your <ul> a height that's big enough to hold them, or else it will think its height is 0 because as far as it knows there aren't any contents inside of it. Change your css for the <ul> to this, and then modify the height until you get something that works as you want it to:
.wrapper > ul {
list-style: none;
position: relative;
z-index:1;
clear:both;
border:5px solid #ccc;
height:30px; /* Added this line to create a space for the <li>s */
}
NOTE: You may also need to change the top and left on your <li>s to account for the border.
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.
I want my li elements that form a horizontal menu to be distributed evenly across the width of my ul element. I normally float my li elements to the left and add some margin. But how do I put the proper spacing so they extend from the left of my ul element to the right edge?
Here's an example jsfiddle of a menu not distributed across the ul.
The spacing has to be the same between each li. But the li elements may be different lengths.
Yet another approach. This is something I use when trying to span a menu evenly across the page. It is nice if you have a dynamic menu that will change depending on certain conditions (like an admin page that only shows up if you are logged in as an admin).
CSS:
nav div ul {
display: table;
width: 100%;
list-style: none;
}
nav div ul li {
display: table-cell;
text-align: center;
}
nav div ul li a {
display: block;
}
I was kinda lazy, and just copied this from my current project, so you will have to adapt it to fit your code, but it is my preferred method of creating a horizontal menu
EDIT: You can make it look like it spans better by adding this:
CSS:
nav div ul li:first-child {
text-align: left;
}
nav div ul li:last-child {
text-align: right;
}
again, untested, just typed.
You'll need to set the width of the li elements to force them to fill the space:
ul {
width: 100%;
}
li {
float: left;
width: 33%;
}
(Fiddle demo)
If you add more items to the list, you'll need to adjust the percentage width - eg with four items, the width will be 25%.
I have two answers for you.
If you want to stick with the float model:
Your ul element needs to have the overflow property set (without this property, your ul (or any element containing floated elements) is not given a height (this is expected behavior, mind you: http://www.quirksmode.org/css/clearing.html) and will therefore default to a height of 0 - the effect of this will be that if you set different background colors for your ul/li and body, the background of your ul will not seem to display).
ul {
text-align: center;
width: 300px;
overflow: auto;
}
Your li elements need to have widths set, otherwise - as floated elements - their width will be set to whatever they contain. I've used pixels, below, but you can use a percentage value too.
li {
float: left;
margin: 5px 0 5px 0;
width: 100px;
text-align: center;
}
Use the display:inline-block property for your li elements (if support for old browsers isn't a priority). IE 7 does not support this, so it's not useful if you need wide cross-browser support, but it creates the effect you want - though make sure you then delete any spaces between your </li> and <li> tags, otherwise they will be counted in the overall width and will show up as spaces between the elements.
One advantage that this method has is that you don't have to know or set the width of the container ul if you use percentage widths on your contained li elements, you still get the centering for free with the text-align property you already have. This makes your layout very responsive.
Here's markup and CSS that works the way I think you are requesting:
Markup:
<ul>
<li>banana</li><li>orange</li><li>apple</li>
</ul>
CSS:
li {
display:inline-block;
margin:5px 0 5px 0;
width:33.33%;
}
ul {
text-align: center;
}
If you'd rather keep the markup on multiple lines, then you'll have to fiddle with the left and right margins of your li elements in the CSS.
If you add li elements, you'll have to change the percentage width to match (for example, with four li elements in your markup, you'd need to change your CSS to have a width of 25% for each one).
Html:
<ul>
<li>1</li>
<li>2 <br>4</li>
<li>3</li>
</ul>
Css:
ul {
list-style: none;
font-size: 0;
text-align: justify;
}
ul:after {
content: '';
display: inline-block;
width: 100%;
}
li {
font-size: 100px;
display: inline-block;
}
codepen
I don't get your question clearly so I assumed that you might want this:
li {
border:solid 1px red;
clear:both;
display:block;
float: left;
margin: 5px;
width:100%;
}
ul {
text-align: center;
width:300px;
}
Here is the link to the fiddle : http://jsfiddle.net/UL2LB/1/
As you can see, I only have specified z-indexes on the hidden sub-list and the nav element, both of which have explicit positioning. So my question is, why the hell is my sub-menu still showing on top of the <nav>?
Thank you in advance for any answer.
Give your ul a pixel width and add position:relative to it the li.
nav.global ul li ul {
width:180px;
...
}
nav.global > ul > li {
display: inline-block;
margin-left: 2%;
position: relative;
}