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

最新推荐文章于 2022-04-21 17:04:14 发布

elena_0117

最新推荐文章于 2022-04-21 17:04:14 发布

阅读量2.3k

点赞数 2

文章标签：导航鼠标

本文链接：https://blog.csdn.net/elena20170326/article/details/73851443

版权

<!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>