网页导航栏鼠标移上去自动弹出下拉菜单

alex_wen2014

于 2017-11-29 14:58:00 发布

阅读量2.6k

点赞数

CC 4.0 BY-SA版权

文章标签： php 前端 ViewUI

原文链接：http://www.cnblogs.com/lyd447113735/p/7920555.html

本文介绍了一种使用纯CSS实现的下拉菜单效果，包括菜单项及其子菜单的显示与隐藏控制。通过:hover伪类实现鼠标悬停时子菜单的出现效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<meta charset="UTF-8" />
<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>
<p>
lsjflsjlajlsa;djflqjwwlejrflsjdlfjwqoo;lnsdl;fgnsl;rjwjeflsdjfljl;jfowei
</p>
<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>