The feeling and the UL and Li a bit similar, but also is a kind of new idea, the source code is as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" Te xt/html; charset=gb2312 "/> <title>dl,dt,dd css Vertical menu </title> <style type=" text/css "> #menu DL {width:1 50px; margin:0 Auto; padding:0 0 10px 0; Background: #69c URL (file:///E|/ceshi/media/bottom.gif) No-repeat bottom left;} #menu DT {margin:0; padding:10px; font-size:1.4em; font-weight:bold; color: #fff; border-bottom:1px solid #fff; Backgrou Nd: #69c url (file:///E|/ceshi/media/top.gif) no-repeat top left;} #menu dd {margin:0 padding:0; color: #fff; font-size:1em; border-bottom:1px solid #fff; background: #47a;} #gallery A, #gallery a:visited {color: #fff; text-decoration:none; display:block; padding:5px 5px 5px 20px; Background: #47a URL (file:///E|/ceshi/media/arrow.gif) no-repeat 10px 10px; width:125px; #gallery a:hover {background: #258 URL (file:///E|/ceshi/media/arrowr.gif) no-repeat 11px 10px; color: #9cf;} Ol li {font-size:11px;} </style> </pead> <body> <div id= "menu" > <dl id= "Gallery" > <dt>gallery</d t> <dd>paul cezanne</dd> <dd>henri matisse</dd> <dd>vincent van Gogh</dd> & Lt;dd>william turner</dd> <dd>john constable</dd> <dd>claude Monet</dd> </dl> </div> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]