I have a menubar which is fine, but I want the dropdown menus to have a minimum width of 100% of the link item above it. It is easier illustrated with images:
This is fine:
But I want this one to be at least 100% wide:
What I don't want is for them to be exactly 100% wide. I know how to do that, but I've been struggling with making them all at least 100% wide for a long while, and I can't figure it out.
The main section of css I'm dealing with is the #menu > ul > li > ul. I have tried applying min-width: 100% to it, but they all just become exactly 100%. Why doesn't this work?
Here's a fiddle showing a live demo of my problem, and it includes all the css for the menu.
That’ll need just a couple of small adjustments.
First of all, position your li relative, so that they explicitly become the anchor point for the sub-level ul (this is necessary, so that the ul can take their min-width from their parents):
#menu > ul > li {
position:relative;
}
Second, position the ul to the left of their parent li, and give them a min-width:
#menu > ul > li > ul {
left:0;
min-width:100%;
}
Forbid the a elements inside the sub-level ul from breaking if the width of the element is not sufficient, by using the white-space property:
#menu > ul > li > ul > li > a {
white-space:pre;
}
http://jsfiddle.net/jLLJu/4/ (I added my modifications to the bottom of your CSS for clarity; feel free to move them up to where the rest of your formattings for the elements concerned are.)
No idea why but I cant find the CSS to bring my submenu items together on the navigation. I am attempting to make the sub-menu navigation horizontal as well but they are really stretched out. Any help would be appreciated! Thanks
http://palmcasualpvc.com/cushion-sets
The submenu spacing is being inherited by the main menu styling. There is a margin-right rule causing this. You can start with this:
.main-navigation li {
margin: 0;
}
There is also a width being set to the items in the submenu. Try this:
.main-navigation li ul li a {
width: inherit;
}
In your CSS class .main-navigation ul ul remove width: 900px and add background-color: Yellow; to .main-navigation li li
So I've got an example of what is the header on my Tumblr Page.
I don't know why I'm having so much trouble doing this, but I can't figure it out.
I've got a <ul> floating-left navbar, whose parent container has a width of 50%. I need these items to be centered below the main text, but because they float left, this is hard to accomplish.
<nav id="mainNav">
<ul>
<li>Ask</li>
<li>Archive</li>
<li>Random</li>
<li>RSS</li>
<li>Search</li>
<li>Twitter</li>
</ul>
</nav>
CSS:
header #mainNav {
width:auto;
margin:auto;
}
header #mainNav ul {
height:30px;
width:auto;
}
header #mainNav ul li {
list-style-type:none;
float:left;
margin:2;
background-color:#1BA300;
border:2px solid black;
}
header #mainNav ul li:hover {
background-color:black;
}
header #mainNav ul li a {
color:#00FF00;
display:block;
padding:5px;
}
I need these items to center under the main text, but nothing i've tried works. What am I doing wrong? How can I accomplish this?
to center a block element you need margin:0 auto but to achieve this you need to set a fixed with for the block element. So for your header #mainNav add {width:372px}` and will be ok.
Demo: http://jsfiddle.net/qTPec/2/
Another solution is to add display:inline-block for header #mainNav
Demo: http://jsfiddle.net/qTPec/3/
try display: inline-block instead of the float. That way you can center it.
http://jsfiddle.net/qTPec/1/
In my dropdown menu some of the text within the LI's is wrapping to a new line.
I want all of them to be 1 line.
I have tried:
ul ul li {width:100%;}
which doesn't work.
The image below shows what I am faced with.
li {
white-space: nowrap;
}
This should stop the wrapping of the text within the li
Place this on your dropdowns ("Tech Consulting"):
{
height: auto;
}
In the case of the issue here, place height: auto; on the dropdowns (ul li ul li).
I am going to guess that your CSS sets a height to the ul li a ("Small Business"). This places the text outside of the defined height.
EDIT: see also my own answer below (2016)
For example:
<ul>
<li class="first">Home</li>
<li>Chi siamo
<ul><li>item1</li><li>item2</li></ul>
</li>
<li>Novità </li>
<li>Promozioni</li>
</ul>
Then styled:
/* level 1 Main menu ----------------------------------------- */
#main-menu > ul{ list-style:none; }
#main-menu > ul > li{
float:left;
display:block;
position:relative;
margin-left:1em;
}
#main-menu > ul > li.first{
margin-left:0;
}
/* sub Main menu ----------------------------------------- */
#main-menu > ul > li ul {
position: absolute;
z-index:1000;
display:none;
left:0;
top:28px;
}
#main-menu > ul > li:hover ul {
display:inline-block;
}
#main-menu > ul > li ul li{
float:left;
display:block;
list-style:none;
}
ok. So, I've got the main menu that shows up horizontal. I also want the submenu to show horizontal. But for some reason, the ul box do not resize to reach the total li tags width, so it remains vertical. The parent ul do not suffer of this problem.
I could make it work by simply adding a proper width to the child ul, but this is not the way I wanna use.
Any idea?
It's important to have the :hover twice if you use position absolute; 1st on the li, that triggers the display: block, then on the ul that is shown on trigger.
And then keep positioning and styling separate: I styled the a and not the li
See here:
http://jsfiddle.net/HerrSerker/T8x2r/2/
#main-menu > ul > li > ul:hover,
#main-menu > ul > li:hover > ul {
display: block;
}
Should work with float:left also
http://jsfiddle.net/T8x2r/3/
Elements with position: absolute take up the size of their children.
You can either set width: 100%; on the ul, or set left: 0; right: 0; which will also stretch it to the right size.
Also you might want to set list-style:none; on the nested ULs as well as top one.
To the person who suggested you use ids and classes, it is not necessary except for perhaps the very first ul being id'ed as "menu". I say this because what you're looking for is very rigid and structured.
This is what I understand you're trying to accomplish: Get a horizontal main menu that shows another horizontal sub-menu underneath when hovering over the main menu "links"
As shown here:
----------------------------------------------------------------------
Menu-Item 1 | Menu Item 2 (hovered over) | Menu Item 3
----------------------------------------------------------------------
| Sub Menu 1 | Sub Menu 2 | Sub Menu 3
-------------------------------------------------------
Now I'm no one to tell you how to design your menus. But as you can see right now, I'm not sure even how it should work. Should the second menu be left-aligned to the left most point of the main menu item it's hovered over? Or Should the second menu be left-aligned to the whole menu, all the way to the left?
If it's the first, the last menu item will have too small a space to have links under (one or two max) and if it's the second version, then people will get frustrated that they keep "losing" the sub-menu when trying to access the links all the way to the left when hovering over the last menu item (in our example: Menu Item 3). Trust me, most users are not that adept with the mouse and trust me, the first version would just look bad.
Thus people use vertical sub-menus when the main menu is horizontal, but again, I'm not going to question your motives. I'm gonna try to answer your question in the best way I can which will end up being the second way, set up as such:
----------------------------------------------------------------------
Menu-Item 1 | Menu Item 2 (hovered over) | Menu Item 3
----------------------------------------------------------------------
Sub Menu 1 | Sub Menu 2 | Sub Menu 3 | (blank)
----------------------------------------------------------------------
Firstly, your code is not even set-up to have it go this way. The way your code is currently written, it'll end up like the first example I showed you (which as I explained will have very little horizontal space for the last menu item to show things, if your menu takes up the width of your page of course)
So to accomplish this goal you will have to get rid of the relative positioning of your li. Another idea if you MUST for some reason have it set to relative is to set each li of your main menu to a different z-index and to set them left margin/padding as well as right margin/padding as to "fit" your entire menu. I find this to be a "hack" and would rather omit the relative positioning of your li.
The absolute ul nested underneath your relative object (whatever it be, in this case it is the menu ) can only take up as much space as you've designated. In this case 100% will only be the size of the li it is nested under. You could set it to something greater than 100%, such as 500px, but this would cause a problem for two reasons: 1) You will not be able to set all sub-menus to the absolute menu left as you probably want it to, becuase the absolute left of the nested element will only be the left most point of the li it is nested under. and 2) This is not good because the right most menu's sub-items will drift off to the right of the overall menu.
If you must keep the main menu positioned relative, you will have to individually set the left position of each nested ul manually. And for all but the first one this will be a negative number and will not be an exact science as all browsers do not display the same font (and thus will cause slight changes in the width of the menu items, to counter this you'll need to use images for perfect width across all browsers of all ages). But this distracts from the beauty of CSS which is using few lines to design multiple elements.
It would be much easier to remove the "relative" positioning off the main menu li (#main-menu > ul > li) and to add some bottom padding to it, else you'll never be able to hover over the sub-menu, it'll just disappear each time. If I had to guess at what you're doing and I was coding the CSS/HTML I would do it as such:
HTML:
<li>A
<ul>
<li>A1<li>
<li>A2<li>
<li>A3<li>
</ul>
</li>
<li>B
<ul>
<li>B1<li>
<li>B2<li>
<li>B3<li>
</ul>
</li>
<li>C
<ul>
<li>C1<li>
<li>C2<li>
<li>C3<li>
</ul>
</li>
</ul>
CSS:
ul#main-menu{ list-style:none;}
ul#main-menu > li {
float: left;
margin-left: 1em;
padding-bottom: 3em; /*make this the line-height space underneat the main menu, plus the heigh of the secondary menu, plus the extra space you wanna give the user to not lose focus on the second menu*/
}
ul#main-menu > li:first-child {margin-left: 0;}
ul#main-menu > li > ul {
display: none;
}
ul#main-menu > li:hover > ul {
position: absolute;
display: block;
left: 0;
list-style: none;
}
ul#main-menu > li:hover > ul > li,
ul#main-menu > li > ul:hover > li {
position: relative;
float: left;
margin-left: 1em;
}
ul#main-menu > li:hover > ul > li:first-child,
ul#main-menu > li > ul:hover > li:first-child {margin-left: 0px}
I've tested this on my own browser and it seems to work like you want it to. By now you should know two other ways to accomplish this, but with varying results and more work than this version.
Well, if you are sure that items always will be in one line, you can move "position: relative;" to parent ul, and remove "left: 0;" from second ul, it will do what you want, but if there will be to many items in the end of the line, they will be cropped.
Example: http://jsfiddle.net/ed9Wx/
Since you stated this in your code
#main-menu > ul > li:hover ul {
display:inline-block; }
it'd be best you make the display: block; margin: auto;
that way it could go full width of the li tag
#main-menu > ul > li:hover ul {
display:block; }
#main-menu > ul > li ul li{
float:left;
margin: auto;
list-style:none;}
This should do the trick.
There's one stupid thing: on the submenus, you can force the sumbenus to the inner items width by simply forcing whitespace: no-wrap on the inner items. It works despite any technique or layout you are using -- main LI items with display: inline-block, or modern flex layouts // and for the subs, regular display none/block or modern css3 fx solutions -- it doesn't matter. A raw example can be just this, in this case using flexbox and fadein/out fx for subs (but could be anything more simple no-flexbox or older, it really doesn't matter):
.main-menu{ // ul
display: flex;
flex-wrap: nowrap;
> li{
display: inline-block;
flex: 1;
position: relative;
&:hover{
.sub-menu{
visibility: visible;
opacity: 1;
transition: opacity 200ms linear;
}
}
.sub-menu{
display: inline-block;
position: absolute;
top: 50px;
left:0;
visibility: hidden;
opacity: 0;
transition: visibility 0s 200ms, opacity 200ms linear;
li{
a{
white-space: nowrap; // <<< THIS IS THE KEY!
}
}
} // sub-menu
} // > li
}