vertical listing <li>

list items vertically instead of horizontally

[smallcompany]

I have a list I use for CSS menu.

<li><a href="#" target="_self" >Item 1</a></li>
<li><a href="#" target="_self" >Item 2</a></li>
<li><a href="#" target="_self" >Item 3</a></li>
<li><a href="#" target="_self" >Item 4</a></li>

The CSS directs this so it shows in two columns based on the fact that there's enough space for two items be listed horizontally, and the third one simply falls down to the next row. The result is this:

Item 1 | Item 2
Item 3 | Item 4

What I want is this:

Item 1 | Item 3
Item 2 | Item 4

Right now, I have to arrange items in an awkward way in unordered list so they show up the way I want, listed vertically. As soon as I add or remove an item, all falls apart and I have to rearrange again.

I wonder if there are CSS ways to force list go vertically instead of horizontally.

In regards of the code, all it does is it says that the submenu li ul is of 500px width, and the item li li is set to block display with width of 160px.
As I change those widths, items list in one, two, three or more columns, however they fit a single row.

Thanks

[lucy24]

Why don't you start by showing your existing CSS? Not the whole thing, please, just the part that pertains to this list.

The columns arrangement you describe is easily done using the CSS3 columns [w3.org] property. For backward compatibility, you should add lines for -moz-column and -webkit-column. (These "legacy" prperties won't validate, but you have permission to ignore the validator ;))

You can use both "column-count" and "column-width". If there's a conflict, it will use the one that takes up more room. That is, if you say 4 columns with a width of 12 em, it will never go to more than 4 columns no matter how wide the page is; and it will drop to less than 4 columns if the page is less than 48ems wide.

[smallcompany]

Thanks.

One thing I never understood about those authority sites is that it has always been a nightmare to dig a clue about specific basic thing while going through the documentation.
For example, all is good about how you tell it how many columns, column's width, etc. but how to you tell it when to go into the next column?

Even worse, I took the Example VIII, posted onto the web, and ... nothing, no columns. When I checked the source of the page, heck, different code, totally.

Anyway, here is my beautiful code for which I hope I can make it so it lists items vertically, not horizontally:

.menu{
border:none;
border:0px;
margin:0px;
padding:0px;
font: bold 90% Arial, Helvetica, sans-serif;
}
.menu ul{
background:#006633;
height:35px;
list-style:none;
margin:0;
padding:0;
}
.menu li{
float:left;
padding:0px;
}
.menu li a{
background:#006633 url("../web-images/menu/seperator.gif") bottom right no-repeat;
color:#ffffff;
display:block;
font-weight:normal;
line-height:35px;
margin:0px;
padding:0px 25px;
text-align:center;
text-decoration:none;
}
.menu li a:hover, .menu ul li:hover a{
background: #003f20 url("../web-images/menu/hover.gif") bottom center no-repeat;
color:#FFFFFF;
text-decoration:none;
}
.menu li ul{
background:#006633;
display:none;
height:auto;
padding:0px;
margin:0px;
border:0px;
position:absolute;
width:500px;
z-index:200;
/*top:1em;
/*left:0;*/
}
.menu li:hover ul{
display:block;
}
.menu li li {
background:url('../web-images/menu/sub_sep.gif') bottom left no-repeat;
display:block;
float:left;
margin:0px;
padding:0px;
width:160px;
}
.menu li:hover li a{
background:none;
}
.menu li ul a{
display:block;
height:30px;
font-size:90%;
font-style:normal;
margin:0px;
padding:0px 10px 0px 15px;
text-align:left;
}
.menu li ul a:hover, .menu li ul li:hover a{
background:#003f20 url('../web-images/menu/hover_sub.gif') center left no-repeat;
border:0px;
color:#ffffff;
text-decoration:none;
}
.menu p{
clear:left;
}

HTML:

<div class="menu">
<ul>
<li><a href="#" target="_self" >Main Item 1</a></li>
<li><a href="#" target="_self" >List Vert</a>
<ul>
<li><a href="#" target="_self" >Item 1</a></li>
<li><a href="#" target="_self" >Item 2</a></li>
<li><a href="#" target="_self" >Item 3</a></li>
<li><a href="#" target="_self" >Item 4</a></li>
<li><a href="#" target="_self" >Item 5</a></li>
<li><a href="#" target="_self" >Item 6</a></li>
</ul>
</li>
<li><a href="#" target="_self" >Main Item 3</a></li>
<li><a href="#" target="_self" >Main Item 4</a></li>
<li><a href="#" target="_self" >Main Item 5</a></li>
<li><a href="#" target="_self" >Main Item 6</a>
<ul>
<li><a href="#" target="_self" >Test Sub Item</a></li>
<li><a href="#" target="_self" >Test Sub Item</a></li>
<li><a href="#" target="_self" >Test Sub Item</a></li>
</ul>
</li>
</ul>
</div>

[lucy24]

One thing I never understood about those authority sites is that it has always been a nightmare to dig a clue about specific basic thing while going through the documentation.
For example, all is good about how you tell it how many columns, column's width, etc. but how to you tell it when to go into the next column?

There's a bunch of stuff about "column-break-before: always" and "column-break-within: avoid" and so on. Or "break-before: avoid-column", depending on what phase of the moon you're reading in. (I made that up. I think it actually has to do with sunspots.) Maybe it works in Opera; my everyday browsers all ignore it.

If it's important to have the column breaks occur in specific places, you may be better off using "display: inline-block". Put all your Column 1 stuff in one div, all your Column 2 stuff in a second div. If there is room they will display side by side; if not, they will go one after the other.

Even worse, I took the Example VIII, posted onto the web, and ... nothing, no columns. When I checked the source of the page, heck, different code, totally.

Yes, when it says "<img src = ...>" you kinda have to assume that there's something they're not telling you :) But this is all slightly preliminary, so maybe it's left over from some earlier draft and nobody noticed the mismatch.

Try this. Change "15em" to "6em". Fix up the image tag with a width and height-- something small like 100 each way. In the CSS, take the trio of lines

 column-width: 15em;
 column-gap: 2em; /* shown in yellow */ 
 column-rule: 4px solid green;

Copy them twice. Make one into -moz-column- etcetera and one into -webkit-column- etcetera.

Add the line

background-color: blue

within the div properties, and the line

background-color: white

in the p properties.

Finally paste in a bunch more of the gibberish text.

Now it's starting to look more like their example, isn't it? Try the alternate img lines from examples IX and X too.

[smallcompany]

Thanks.

I played with that already. Incorporating it into the drop down menu was terrible experience for me.
For now, maintaining the listing order manually seems to be the better and browser safer option.

[smallcompany]

I have something that keeps it in vertical order. Here is the code (Copyright Stu Nicholls):

.stretchHolder {width:100px;height:20px;margin:10px 0px 10px;position:relative;z-index:100;/*box-shadow:0 2px 2px rgba(0,0,0,0.8);*/font-family:arial, sans-serif;}
.stretchMenu {position:absolute;width:670px;overflow:hidden;}
.stretchDrop {padding:0;margin:0;list-style:none;width:670px;position:relative;}
.stretchDrop > li.slide {float:left; width:100px;-moz-transition: 0.25s 0.25s;-ms-transition: 0.25s;-o-transition: 0.25s;-webkit-transition: 0.25s;transition: 0.25s;}
.stretchDrop > li > a {display:block; /*font-weight:bold;*/ line-height:20px; padding-left:10px; color:#FFFFFF; text-decoration:none; font-size:75%; text-shadow: 0 1px 1px #000000; /*border-left:1px solid #fff;*/}
.stretchDrop > li.slide > a {border-right:1px solid #D6D6D6;}
.stretchDrop > li.p1 > a {background:#333333;}
.stretchDrop > li.p1 > a {
background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, rgba(255, 255, 255, 0.7)), color-stop(0.5, rgba(255, 255, 255, 0.2)), color-stop(0.5, transparent), to(rgba(255, 255, 255, 0.3)));
background-image:-moz-linear-gradient(top, rgba(255, 255, 255, 0.7) 0, rgba(255, 255, 255, 0.2) 50%, transparent 50%, rgba(255, 255, 255, 0.3) 100%);
background-image:-ms-linear-gradient(top, rgba(255, 255, 255, 0.7) 0, rgba(255, 255, 255, 0.2) 50%, transparent 50%, rgba(255, 255, 255, 0.3) 100%);
background-image:-o-linear-gradient(top, rgba(255, 255, 255, 0.7) 0, rgba(255, 255, 255, 0.2) 50%, transparent 50%, rgba(255, 255, 255, 0.3) 100%);
background-image:linear-gradient(top, rgba(255, 255, 255, 0.7) 0, rgba(255, 255, 255, 0.2) 50%, transparent 50%, rgba(255, 255, 255, 0.3) 100%);}
.stretchDrop > li > div {height:0;width:663px;overflow:hidden;position:relative;border-radius:0 0 10px 10px;margin-left:1px;padding-left: 5px;
-moz-transition: height 0.25s;
-ms-transition: height 0.25s;
-o-transition: height 0.25s;
-webkit-transition: height 0.25s;
transition: height 0.25s;
}
.stretchDrop > li.p1 > div {background:#333333;}
.stretchDrop > li.p1 > div {
background-image: -moz-linear-gradient(90deg, rgba(255, 255, 255,0.3), rgba(255, 255, 255,0));
background-image: -webkit-linear-gradient(90deg, rgba(255, 255, 255,0.3), rgba(255, 255, 255,0));
background-image: -ms-linear-gradient(90deg, rgba(255, 255, 255,0.3), rgba(255, 255, 255,0));
background-image: -o-linear-gradient(90deg, rgba(255, 255, 255,0.3), rgba(255, 255, 255,0));
background-image: linear-gradient(90deg, rgba(255, 255, 255,0.3), rgba(255, 255, 255,0));
}
.stretchDrop:hover {direction:ltr;}
.stretchDrop:hover > li.slide {width:70px;
-moz-transition: 0.25s 0.25s;
-ms-transition: 0.25s;
-o-transition: 0.25s;
-webkit-transition: 0.25s;
transition: 0.25s;
}
.stretchDrop:hover > li.slide:hover {width:670px;
-moz-transition: 0.25s 0.25s;
-ms-transition: 0.25s;
-o-transition: 0.25s;
-webkit-transition: 0.25s;
transition: 0.25s;
}
.stretchDrop:hover > li:hover > div {height:80px;
-moz-transition: 0.25s 0.5s;
-ms-transition: 0.25s 1s;
-o-transition: 0.25s 1s;
-webkit-transition: 0.25s 1s;
transition: 0.25s 1s;
}
.stretchDrop > li > div b {display:block; width:670px; height:30px; background:#888; margin-top:-50px; box-shadow:0 2px 5px rgba(0,0,0,0.8);}
.stretchDrop > li > div dl {width:108px;float:left;padding:5px 0px;margin:6px 0px;font-weight:bold;}
.stretchDrop > li > div dl dt {padding-left:10px; margin-bottom:5px; font-size:70%; line-height:25px; border-bottom:1px dotted #000; text-shadow: 0 1px 1px #fff;}
.stretchDrop > li.p1 > div dl dt {color:#036;}
.stretchDrop > li > div dl dd {padding:0; margin:0;}
.stretchDrop > li > div dl dd a {display:block; color:#FFFFFF; font-size:70%; line-height:20px; text-decoration:none; padding-left:10px;}
.stretchDrop > li > div dl dd a:hover {color:#000000;background:#FFCC00;border-radius:5px;}
#info .stretchDrop > li > div p {width:404px; height:30px; background:#eee; position:absolute; bottom:5px; left:12px; padding:0 20px; line-height:30px; font-size:10px; margin:0; border-radius:30px;}
.around {margin: 0px auto;width:120px;}

The menu flies out to the right and then down. Now, is it possible to change the direction so it:

- flies out from left to right and then down (from the top right of the site)
- flies out down, centered to the initial button (from the top center of the site)

As it is now, the only natural position that can be used is top left corner of the site.

Thanks

[lucy24]

Most of that was so much Hungarian to me, but a "direction: ltr" jumped out. Would changing it to "rtl" have any effect?

-moz-transition: height 0.25s;
-ms-transition: height 0.25s;
-o-transition: height 0.25s;
-webkit-transition: height 0.25s;

Urk. I suppose that means I should be adding four legacy variants anywhere that I currently add only two.

[smallcompany]

Would changing it to "rtl" have any effect?

Tried that already and it moved words so they were like aligned to the right. :(

[smallcompany]

Funny, there's one single instance of float to the left which does the trick when changed to the right. I say funny as that is the first thing one would test, you would think.

Centering it is probably something really different.

And FY for anyone, the nice sliding does not work in IE where opening happens instantaneously. Also IE8 (and I guess lower) does not support the border-radius.
I actually had no idea about all the stuff that can be supported via CSS without a single image. Round borders, transitions, shadows, etc.

I'm not making a commercial for it, but I found really nice pure CSS menus on the site I mentioned in copyright few messages above.