CSS二級菜單，圓角兼容性好

2024-09-05 12:20:05

字體：大中小

供稿：網(wǎng)友

CSS二級菜單，圓角形兼容性好，這里的圓角是基于圖片的，也就是調(diào)用的外部圖片。菜單支持二級分類，個人感覺很實用。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>CSS二級菜單</title><style type="text/css">#menu{ margin:0;  padding:0;  list-style:none;  font:14px Arial;  }#menu li{ float:left;margin:0 1px 0 0;}  #menu li dl{width:150px; padding:0 0 10px 0;background:#cb6 url(/jscss/demoimg/200906/bottom3.jpg) no-repeat bottom left;}  #menu li dt{padding:5px;text-align:center;border-bottom:1px solid #b00;background:#ed8 url(/jscss/demoimg/200906/top3.jpg) no-repeat top left;}  #menu li dt a,#menu li dt a:visited{display:block;color:#333;text-decoration:none;}#menu li dd{margin:0;padding:0;color:#fff;background-color:#47a;}  #menu li dd.last{border-bottom:1px solid #b00;}   #menu li dd a,#menu li dd a:visited{height:1em;display:block;color:#fff;text-decoration:none;padding:4px 5px 4px 20px;background:#47a url(/jscss/demoimg/200906/mid3.gif) no-repeat 7px 7px;}  #menu li dd{display:none;}#menu li:hover dd,#menu li a:hover dd{display:block;}#menu li:hover,#menu li a:hover{width:auto}#menu li dd a:hover{ background-color:#147; color:#9cf;}  #menu table{ border-collapse:collapse; padding:0; margin:-1px; font-size:1em;}  </style></head><body><ul id="menu">  <li>     <table>      <tr>        <td><dl>            <dt>HomePage</dt>            <dd>Web Dev</dd>            <dd class="last">Contact Us</dd>          </dl></td>      </tr>    </table>     </li>  <li>     <table>      <tr>        <td><dl>            <dt>精品源碼</dt>            <dd class="last">Service</dd>          </dl></td>      </tr>    </table>     </li>  <li>     <table>      <tr>        <td><dl>            <dt>網(wǎng)頁特效</dt>            <dd>Landscape</dd>            <dd class="last">Maps</dd>          </dl></td>      </tr>    </table>     </li>  <li>     <table>      <tr>        <td><dl>            <dt>留言板</dt>            <dd>Physics</dd>            <dd>Maths</dd>          </dl></td>      </tr>    </table>     </li></ul></body></html>

上一篇：JS+CSS多個滑動門重復(fù)調(diào)用封閉類

下一篇：適合企業(yè)使用的導(dǎo)航菜單