鼠标经过导航自动显示子列表

来源:互联网 发布:java 网络请求框架 编辑:程序博客网 时间:2024/05/19 23:04
<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><style type="text/css">    .menubar        {line-height: 24px;}    .menubar .menuend        {clear: both;}    .menuitem        {background: #fff; border: 1px solid #c00; position: relative; float: left; margin-right: 1em;}    .menuitem .submenu        {background: #ccc; border: 1px solid #00c; position: absolute; top: 25px; left: -1px; width: 5em;}    /** 下面的控制显示和隐藏 **/    .menuitem .submenu        {display: none;}    .menuitem:hover .submenu        {display: block;}</style></head><body> <div class="menubar">    <div class="menuitem">        <div>菜单1</div>        <div class="submenu">            <div>子菜单1</div>            <div>子菜单2</div>        </div>    </div>    <div class="menuitem">        <div>菜单2</div>        <div class="submenu">            <div>子菜单1</div>            <div>子菜单2</div>            <div>子菜单3</div>        </div>    </div>    <div class="menuend"></div></div></body></html>


原创粉丝点击