纵向无序的CSS列表菜单

2024-09-05 12:19:53

字体：大中小

来源：转载

供稿：网友

纵向无序的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><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>纵向无序的CSS列表菜单</title><style type="text/css">#vertical { width:15em; padding:0; margin:0 auto; list-style-type:none; font-size:1.4em; font-family:georgia, "times new roman", serif; }#vertical li { float:left; border:0.2em solid #eee; margin:0.1em; }#vertical li a, #vertical li a:visited { text-decoration:none; color:#000; display:block; width:1.5em; height:1.5em; border-top:0.1em solid #000; height:auto; }#vertical li a em { font-style:normal; display:block; text-align:center; background:#fff; border-left:0.1em solid #000; border-right:0.1em solid #000; }#vertical li a em.nd { border-bottom:0.1em solid #000; }#vertical li a:hover { background:#eee; }#vertical li a:hover em { background:#eee; color:#800; }</style></head><body><ul id="vertical"> <li> DEMOS </li> <li> MENUS </li> <li> LAYOUTS </li> <li> BOXES </li> <li> MOZILLA </li> <li> EXPLORER </li> <li> OPACITY </li></ul></body></html>

上一篇：鼠标放上放大的纯CSS菜单

下一篇：纯CSS实现漂亮的圆角边界菜单

学习交流

如何查找有故障的配件

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

热门图片

猜你喜欢的新闻

猜你喜欢的关注