纵向无序的CSS列表菜单
纵向无序的CSS列表菜单，个性有了，就是不知道实用不，竖向排列的字母是一个一个实现的，因此有些麻烦，不过菜单不是经常修改的东西，还是可以用的。
当前位置：编程学习 > JS >>
答案：<!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>
<a href="/">
<em>D</em><em>E</em><em>M</em><em>O</em><em class="nd">S</em>
</a>
</li>
<li>
<a href="/">
<em>M</em><em>E</em><em>N</em><em>U</em><em class="nd">S</em>
</a>
</li>
<li>
<a href="/">
<em>L</em><em>A</em><em>Y</em><em>O</em><em>U</em><em>T</em><em class="nd">S</em>
</a>
</li>
<li>
<a href="/">
<em>B</em><em>O</em><em>X</em><em>E</em><em class="nd">S</em>
</a>
</li>
<li>
<a href="/">
<em>M</em><em>O</em><em>Z</em><em>I</em><em>L</em><em>L</em><em class="nd">A</em>
</a>
</li>
<li>
<a href="/">
<em>E</em><em>X</em><em>P</em><em>L</em><em>O</em><em>R</em><em>E</em><em class="nd">R</em>
</a>
</li>
<li>
<a href="/">
<em>O</em><em>P</em><em>A</em><em>C</em><em>I</em><em>T</em><em class="nd">Y</em>
</a>
</li>
</ul>
</body>
</html>上一个：JS+CSS简易树状菜单Tree
下一个：精致纯CSS导航栏
- 更多JS疑问解答：
- 几个验证11位手机号码格式的js代码
- js把图片转换成 base64代码
- js把base代码转换成图片
- JS 将 base64编码的图片转化为图片文件
- js中的定时器
- js如何获得FCKeditor控件的值
- 用js限制投票的cookie .目前设置的为：<input type="" class="" onclick="'window.location...
- JS验证，这块“牛皮”反复修改都不能实现
- 在JS中使用DOM模型
- 如何用JS 获取本地文件夹的文件列表
- js中new 了两个Object数组。怎么样将数组内容合并，重复的内容？
- 求实现自动生成图片缩略图的JS代码
- JS脚本网页问题
- js，代码中"object"和"Object"区别？
- js+flash实现网页图片切换效果，出现边框，单击激活此控件。