效果:
html代码:
<body> <div id="menu_bar"> <dl class="menu"> <dt> <span>文件管理</span> </dt> <dd> <a href="#" class="menu_href">打开文件</a> </dd> <dd> <a href="#" class="menu_href">删除文件</a> </dd> <dd> <a href="#" class="menu_href">存储文件</a> </dd> <dd> <a href="#" class="menu_href">关闭文件</a> </dd> <dd> <a href="#" class="menu_href">退出</a> </dd> </dl> <dl class="menu"> <dt> <span>编辑</span> </dt> <dd> <a href="#" class="menu_href">重复操作</a> </dd> <dd> <a href="#" class="menu_href">撤销操作</a> </dd> <dd> <a href="#" class="menu_href">拷贝</a> </dd> <dd> <a href="#" class="menu_href">粘贴</a> </dd> </dl> <dl class="menu"> <dt> <span>视图</span> </dt> <dd> <a href="#" class="menu_href">打印视图</a> </dd> <dd> <a href="#" class="menu_href">浏览视图</a> </dd> <dd> <a href="#" class="menu_href">开发视图</a> </dd> </dl> <dl class="menu"> <dt> <span>窗口</span> </dt> <dd> <a href="#" class="menu_href">上一个</a> </dd> <dd> <a href="#" class="menu_href">下一个</a> </dd> <dd> <a href="#" class="menu_href">显示</a> </dd> </dl> </div> </body>
css代码:
<style type="text/css"> * { padding: 0px; margin: 0px; font-size: 12px; } /* * 设置在浏览器中显示时，距离浏览器边框的位置 */ #menu_bar { position: absolute; left: 50px; top: 50px; } /** * 利用float:left让其水平显示 */ dl.menu { float: left; width: 120px; } /** * 设置dt和dd的显示统一的大小 * 以及dt的背景颜色 */ dl.menu dt, dl.menu dd { height: 30px; background: #339; color: #fff; border-right: #ffffff 1px solid; text-align: center; } /** * 设置dt中文字的具体位置 */ dl.menu dt span { position: relative; top: 6px; } /** * 设置dd的背景颜色 */ dl.menu dd { background: #911; color: #fff; border-bottom: #ffffff 1px solid; /*display: none;*/ } /** * 设置dd中文字的具体位置 */ dl.menu dd a { position: relative; top: 6px; } /** * 设置dd中超链接的link,visited的样式 */ a.menu_href:link, a.menu_href:visited { text-decoration: none; color: #fff; } /** * 设置dd中超链接鼠标移动上去的背景颜色 */ dl.menu dd:hover { background: #393; cursor: pointer; } </style>
JavaScript实现动态效果
<script type="text/javascript" charset="utf-8"> window.onload = init; function init() { var dls = document.getElementById("menu_bar").getElementsByTagName("dl"); var contenter = document.getElementById("contenter"); for(var i = 0; i < dls.length; i++) { dls[i].onmouseover = show; dls[i].onmouseout = hidden; }; function show() { //找到dd var dds = this.getElementsByTagName("dd"); for(var i = 0; i < dds.length; i++) { dds[i].style.display = "block"; }; } function hidden() { //找到dd var dds = document.getElementsByTagName("dd"); for(var i = 0; i < dds.length; i++) { dds[i].style.display = "none"; }; } } </script>