网上扒下来的代码，留作日后备用。
这个有横纵两个版本，原来是纵向，被我改成横向了。
<!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=utf-8" />
<style type="text/css">
body { font-family: Verdana; font-size: 12px; line-height: 1.5; }
img { border-style: none; }
a { color: #000; text-decoration: none; }
a:hover { color: #F00; }
#menu ul { list-style: none; margin: 0px; padding: 0px}
#menu ul li { background: #fff; padding: 0px 8px; height: 26px; line-height: 26px; border-bottom: 1px solid #CCC; position:relative;float:left ;border:1px solid #ccc;margin-right:-1px}
#menu ul li ul { display:none; position: absolute;top: 26px; left:-1px;width:100px; border:1px solid #ccc}
#menu ul li ul li{border:none}
#menu ul li:hover ul { display:block}
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">JV支点交易</a>
<ul>
<li><a href="#">反人性专题</a></li>
<li><a href="#">JV交易日志</a></li>
</ul>
</li>
<li><a href="#">外汇交易杂谈</a>
<ul>
<li><a href="#">投资理念</a></li>
<li><a href="#">风险控制</a></li>
<li><a href="#">技术分析</a></li>
</ul>
</li>
<li><a href="#">wordpress</a></li>
<li><a href="#">关于/留言</a></li>
</ul>
</div>
</body>
</html>
效果如下图
主要就是对 ul li ul 的 display:none; position: absolute; 绝对定位，上一级的li已经做了相对定位，下级ul的绝对定位就是针对上一级li的，剩下的就是伪类 li:hover ul 的 display:block; 其他的很简单。
每天学一点，进度虽慢，但还有些许成就感。今天跟某人说没有自信就得自己去找，这每天过同样的生活，做同样的事，唯一新鲜而且又有好处的就是学新的东西，连这点都不去做，活着就太平淡无味了。精彩总需要自己创造，最基本的兴奋剂恰好是自学！学以致用就是最快乐的。
本站文章除注明转载/出处外，均为本站原创或翻译。若要转载但请务必注明出处，尊重他人劳动成果。
转载请注明出处链接 : https://www.inlojv.com/2699.html
