Use to make a secondary navigation. How to arrange the li in ul vertically_html/css_WEB-ITnose

b7525ca886c4f1f80871990b7377ff22Address
1bc443f5693cdd57b3879f8d0dcc7741
861f448a2c47375a88adcb954dabc953Beijingbed06894275b65c1ab86501b08a632eb
;Tianjinbed06894275b65c1ab86501b08a632eb
                                    < 🎜>                                                                                    Hunan bed06894275b65c1ab86501b08a632eb
                                               /ul>
bed06894275b65c1ab86501b08a632eb
How to achieve the effect like in the picture in ul





Reply to the discussion (solution)

55f76bf9771f9659ae0bff3e12b55ed7

68ccb177a5de0ef9542dde7d35bae727 93f0f5c25f18dab9d176bd4f6de5d30e
b68100c5ad610b937ca19f067b6b084e

b2386ffb911b14667cb8f0f91ea547a7Untitled Document6e916e0f7d1e588d4f442bf645aedb2f

c9ccee2e6ea535a969eb3f532ad9fe89

.sub-menu {width:900px;height:auto}

.sub-menu{-moz-column-count:3;-webkit-column-count:3;column-count:3;}

.sub-menu ul li{float:left;list-style:none;margin-left:40px}

.sub-menu ul{clear:both;list- style:none;}

531ac245ce3e4fe3d50054a55f265927
9c3bca370b5104690d9ef395f2c5f8d1

6c04bd5ca3fcae76e30b72ad730ca86d
b7525ca886c4f1f80871990b7377ff22Address
b38cd7069fcac2c3aa1683dc42b2bb75
ff6d136ddc5fdfeffaf53ff6ee95f185
861f448a2c47375a88adcb954dabc953Beijingbed06894275b65c1ab86501b08a632eb
li >Shanghaibed06894275b65c1ab86501b08a632eb
929d1f5ca49e04fdcb27f9465b944689
li>
                                                                      li >Tianjinbed06894275b65c1ab86501b08a632eb
                                            517333494013b7d74994b371a86dbf23


Divide the text in the div element into three columns:
div
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;
}

Internet Explorer 10 and Opera support the column-count attribute.
Firefox supports an alternative -moz-column-count attribute.
Safari and Chrome support an alternative -webkit-column-count attribute.
Note: Internet Explorer 9 and earlier browsers do not support the column-count attribute.
Definition and Usage
The column-count attribute specifies the number of columns the element should be divided into.
Default value: auto
Inheritance: no
Version: CSS3
JavaScript syntax: object.style.columnCount=3
Syntax

column-count: number|auto;

Value description test
number The optimal number of columns the element content will be divided into. Test
auto The number of columns is determined by other properties, such as "column-width". Test

c9ccee2e6ea535a969eb3f532ad9fe89
.newspaper
{
-moz-column-count:4; /* Firefox */
-webkit-column-count:4; /* Safari and Chrome */
column-count:4;

-moz-column-gap:60px; /* Firefox */
-webkit-column-gap:60px; /* Safari and Chrome */
column-gap:60px;
}
531ac245ce3e4fe3d50054a55f265927


Specifies a 60 pixel gap between columns

Note: Internet Explorer does not support column -count attribute.

Thank you very much