CSS二级菜单，圆角兼容性好

2024-09-05 12:20:05

字体：大中小

来源：转载

供稿：网友

CSS二级菜单，圆角形兼容性好，这里的圆角是基于图片的，也就是调用的外部图片。菜单支持二级分类，个人感觉很实用。

<!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>网页特效</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多个滑动门重复调用封闭类

下一篇：适合企业使用的导航菜单

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注