不使用圖片的CSS圓角垂直菜單

2024-09-05 12:19:38

字體：大中小

來源：轉載

供稿：網友

不使用圓角圖片的CSS菜單，豎向垂直布局，代碼有點亂，用的自己整理一下。

<html><head><title>CSS圓角垂直菜單</title><style type="text/css"> #menu {list-style-type:none; margin:0 auto 50px auto; padding:0; width:302px;} #menu li {padding:0; margin:0; position:relative; width:150px; height:1.7em; z-index:100;} #menu li dl {position:absolute; top:0; left:0; padding-bottom:0;} #menu li a, #menu li a:visited {text-decoration:none;} #menu li dd {display:none;} #menu table {border-collapse:collapse; padding:0; margin:-1px; font-size:1em;} #menu dl {width: 150px; margin: 0; padding: 0; background: transparent;} #menu dt {margin:0; padding: 0;} #menu dd {margin:0; padding:0; color: #fff; font-size: 1em; text-align:left; width:150px; float:right; clear:right;}#menu dt a, #menu dt a:visited {display:block; font-size: 0.9em; color: #c00; text-align:center; border:1px solid #c00; border-width:0 1px 1px 1px; background:#d4d4d4; padding:0.25em 0 0.75em 0;} #menu li a:hover {border:0;} #menu li:hover dd, #menu li a:hover dd {display:block;} #menu li:hover dl, #menu li a:hover dl {width:301px;} #menu li:hover dt a, #menu a:hover dt a {color:#000; background:#ddd; border:1px solid #c00; border-width:0 1px 1px 1px;} #menu dd a, #menu dd a:visited {background:#c00; color:#fff; padding:0.5em 0; text-decoration:none; display:block; text-align:center; border-left:1px solid #c00; border-right:1px solid #c00; width:148px;} #menu dd a:hover {background: #ddd; color:#000; border-left:1px solid #c00; border-right:1px solid #c00;} #menu b {display:block; overflow:hidden; height:1px;} b.p1 {background:#c00; margin:0 5px;} b.p2 {background:#d4d4d4; border:2px solid #c00; border-width:0 2px; margin:0 3px;} b.p3 {background:#d4d4d4; margin:0 2px; border:1px solid #c00; border-width:0 1px;} b.p4 {height:2px; background:#d4d4d4; margin:0 1px; border:1px solid #c00; border-width:0 1px;} b.p5 {background:#c00; margin:0 5px;} b.p6 {background:#c00; margin:0 3px;} b.p7 {background:#c00; margin:0 2px;} b.p8 {height:2px; background:#c00; margin:0 1px;} #menu li:hover b.p2, #menu a:hover b.p2 {background:#fff;} #menu li:hover b.p3, #menu a:hover b.p3 {background:#f0f0f0;} #menu li:hover b.p4, #menu a:hover b.p4 {background:#e8e8e8;} </style></head><body><ul id="menu"><li>  <dl> <dt> DEMOS</dt> <dd> zero dollars</dd> <dd> wrapping text</dd> <dd>styled form</dd> <dd> active focus</dd> <dd> shadow boxing</dd> <dd> image map</dd> <dd> fun with backgrounds</dd> <dd> fade scrolling</dd> <dd> em sized images</dd> </dl>  </li> <li>  <dl> <dt> MENUS</dt> <dd> spies menu</dd> <dd> vertical menu</dd> <dd> enlarging list</dd> <dd> link images</dd> <dd> non-rectangular links</dd> <dd>jigsaw links</dd> <dd> circular links </dd> </dl>  </li> <li>  <dl> <dt> LAYOUTS</dt> <dd> Fixed 1</dd> <dd> Fixed 2</dd> <dd> Fixed 3</dd> <dd> Fixed 4</dd> <dd> minimum width for Internet Explorer</dd> </dl>  </li> <li>  <dl> <dt> MOZILLA</dt> <dd> drop down menu</dd> <dd> cascading menu</dd> <dd>content:</dd> <dd> mozzie box</dd> <dd> rainbow box</dd> <dd> snooker cue made using border art</dd> <dd> target practise </dd> </dl>  </li> </ul> </body></html>

上一篇：簡潔純CSS下拉導航菜單

下一篇：很漂亮的CSS水平導航條