- <div id="content"></div>
- <div id="menu_bar">
- <dl class="menu">
- <dt><span>文件管理</span></dt>
- <dd class="menuItem"><a href="#" class="menu_href">打开文件</a></dd>
- <dd class="menuItem"><a href="#" class="menu_href">删除文件</a></dd>
- <dd class="menuItem"><a href="#" class="menu_href">存储文件</a></dd>
- <dd class="menuItem"><a href="#" class="menu_href">关闭文件</a></dd>
- <dd class="menuItem"><a href="#" class="menu_href">退出</a></dd>
- </dl>
- <dl class="menu">
- <dt><span>编辑</span></dt>
- <dd class="menuItem"><a href="#" class="menu_href">重复操作</a></dd>
- <dd class="menuItem"><a href="#" class="menu_href">撤销操作</a></dd>
- <dd class="menuItem"><a href="#" class="menu_href">拷贝</a></dd>
- <dd class="menuItem"><a href="#" class="menu_href">粘贴</a></dd>
- </dl>
- </div>
- *{
- padding: 0px;
- margin: 0px;
- font-size:12px;
- }
- #menu_bar {
- position: absolute;
- left:50px;
- top:50px;
- }
- dl.menu {
- float:left;
- width:120px;
- }
- dl.menu dt {
- height:30px;
- background: #339;
- color:#fff;
- border-right:#ffffff 1px solid;
- text-align: center;
- }
- dl.menu dt span {
- position: relative;
- top:6px;
- }
- dd.menuItem {
- background: #911;
- color:#fff;
- border-bottom:#ffffff 1px solid;
- display: none;
- cursor:pointer;
- height:30px;
- border-right:#ffffff 1px solid;
- text-align: center;
- }
- dl.menu dd a {
- position: relative;
- top:6px;
- }
- a.menu_href:link,a.menu_href:visited {
- text-decoration: none;
- color:#fff;
- }
- dd.hoverClass {
- background:#393;
- }
- $(function(){
- $(".menu").hover(function(){
- $(this).find("dd").css("display","block");
- },function(){
- $(this).find("dd").css("display","none");
- });
- $(".menu dd").hover(itemHover,itemHover);
- function itemHover() {
- $(this).toggleClass("hoverClass");
- }
- });