How can I use CSS to create a vertical navigation menu?

After the Web standards are applied to create webpages, we usually use ul unordered list tags to build menus. We have discussed many horizontal menus before. In the previous article, we described how to create Korean menus with ul + li and css. is a vertical navigation menu. Today we are looking at another vertical navigation menu. We are constantly summing up experience and improving the coding level, so that we can be more comfortable in actual operations.
Let's look at the following XHTML code:

The code is as follows:

Copy code

<Ul> <span> www.111cn.net </span> <Li> <a href = "http://www.111cn.net" target = "_ blank"> Div + CSS tutorial </a> </li> <Li> <a href = "http://www.111cn.net" target = "_ blank"> CSS layout instance </a> </li> <Li> <a href = "http://www.111cn.net" target = "_ blank"> CSS online manual </a> </li> </Ul> <Ul> <span> www.111cn.net </span> <Li> <a href = "http://www.111cn.net" target = "_ blank"> Div + CSS tutorial </a> </li> <Li> <a href = "http://www.111cn.net" target = "_ blank"> CSS layout instance </a> </li> <Li> <a href = "http://www.111cn.net" target = "_ blank"> CSS online manual </a> </li> </Ul>

There are two unordered lists. Each list contains three items, that is, the content of the navigation menu.
We use CSS to define the style so that it can be displayed as required. Let's look at the following CSS code:

The code is as follows:

Copy code

* {Padding: 0; margin: 0; font-size: 12 px; line-height: 1.7; Font-family: Verdana, "", Arial; list-style: none ;} A: link, a: visited {background: # D3DFFA; padding-left: 23px; color: #036; text-decoration: none ;} A: hover, a: active {color: #000; background-color: # ADC2F5 ;} A {display: block; border-bottom: 1px solid # fff; padding-left: 10px; width: Pixel ;} Ul {background: # fff; width: 150px; border: 1px solid # 06f; Margin: 0px 20px-1px 20px; padding: 1px ;} Span {display: block; background: #036; padding-left: 13px; color: # fff ;}