纯css3设计下拉菜单

最新推荐文章于 2022-08-28 08:35:55 发布

原创最新推荐文章于 2022-08-28 08:35:55 发布 · 430 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #html5 #menu bar #下拉菜单

html菜单栏专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何使用纯CSS3创建下拉菜单，不依赖JavaScript或jQuery。通过设置<div>、<ul>和<li>的样式，利用position、transition、:hover和z-index等属性，实现鼠标悬停时的下拉效果。文章通过对比展示了无背景颜色和添加背景颜色后下拉菜单的不同状态。

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

构思：这个设计完全是用纯css制作的，没有js和jQuery的添加。

html中主要有一个<div>,三个<ul>.主要显示作用是在css中。<div>作为一个盒子，大容器。三个<ul>作为占用盒子的三个小容器，通过设置<ul>和<li>的元素同在一行上，设置<li>中的第一个z-index为1，覆盖在最上面，然后通过设置三个小容器增添背景颜色，所以以下的<li>会看不见。

用到的主要知识有：position、transition、:hover、z-index

这是没有加覆盖的背景颜色的图1

这是加了背景的图2

当你鼠标触摸到菜单栏时就有下拉的效果

下面是index.html

<pre name="code" class="html"><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>菜单栏</title>
    <link rel="stylesheet" type="text/css" href="menu1.css"/>
</head>
<body>
<!--css构思：这个菜单栏是运用了css来构造，而没有用到js。构造想法，整体为一个div层，
        为一个大容器。将div大容器分为三个小的容器。将ul中的全部装在分别的三个小容器中，
        用遮盖的方法，
-->
<div id="nav">
    <ul class="menu menu01">
        <li class="main"><a href="#">Adobe</a></li>
        <li class="sub01"><a href="#">Illustrator</a></li>
        <li class="sub02"><a href="#">Photoshop</a></li>
        <li class="sub03"><a href="#">Flash</a></li>
        <li class="sub04"><a href="#">Dreameweaver</a></li>
        <li class="sub05"><a href="#">Fireworks</a></li>
    </ul>

    <ul class="menu menu02">
        <li class="main"><a href="#">Microsoft</a></li>
        <li class="sub01"><a href="#">Windows XP</a></li>
        <li class="sub02"><a href="#">Windows Vista</a></li>
        <li class="sub03"><a href="#">Windows 7</a></li>
    </ul>

    <ul class="menu menu03">
        <li class="main"><a href="#">Apple</a></li>
        <li class="sub01"><a href="http://twitter.com/calmbooks" target="_parent">Orange</a></li>
        <li class="sub02"><a href="#">Banana</a></li>
        <li class="sub03"><a href="#">Grape</a></li>
        <li class="sub04"><a href="#">Peach</a></li>
    </ul>
</div>
</body>
</html>

下面是css代码menu.css

/*设置全部元素的外边距，内边距为0*/
*{
    margin:0;
    padding:0;
}
/*body{*/
    /*background: #fff;*/
/*}*/

li{
    list-style: none;
}
/*设置整一个div,相当于一个盒子，大容器,距离顶部为30px*/
#nav{
    width: 390px;
    height: 33px;

    margin:30px auto;
}

/*三个小的容器*/
.menu{
    float: left;
    /*相对位置，这是关键放置ul中的内容，float为left，
    相对于父元素，那么他的下一个元素就根据父元素来放置*/
    position: relative;
    width:130px;
    height:1px;
    /*transition过度效果，*/
    transition: 0.4s ease-in-out;
}

/*:hover,在鼠标移动到该元素上添加样式*/
/*设置小容器，当鼠标移动到小容器上.menu01、2、3时变长*/
.menu01:hover {
    /*180/5=36,每个格子为36px*/
    height: 180px;
}
.menu02:hover {
    height: 120px;
}
.menu03:hover {
    height: 150px;
}

/*.menu li中的全部元素绝对定位*/
.menu li{
    position: absolute;
    /*距离大容器左边为0px*/
    left:0;
    width:130px;
}

.menu li a{
    display:block;
    text-decoration: none;
}

.menu .main{
    top:0%;
    z-index:1;
    width:130px;
    border:none;
    text-align: center;
}

.menu .main a{
    font-size:12px;
    font-weight:bold;
    height:25px;
    /*定义字体颜色*/
    /*color: #ff0000;*/
    padding:6px 0 0;

    /*上边框样式*/
    /*border-top: solid 1px #d21;*/
    /*border-bottom: solid 1px #d21;*/
    /*文本阴影，水平，垂直，模糊，颜色*/
    /*text-shadow: 0 -1px 1px #d21;*/

    /*background这是关键的一部分，通过背景颜色覆盖菜单栏，而首项.menu .main已经设置为z-index为1了*/
    /*所以能够显示在背景颜色前*/
    background: #ff7744;
    /*background: -webkit-gradient(linear, left top, left bottom, from(#f96),*/
                /*color-stop(90%, #f42), to(#f21));*/
    /*background: -moz-linear-gradient(#f96, #f42 90%, #f21);*/
}

/*top属性规定元素的顶部边缘，定义一个定位元素外边距边界与其包含块上边界之间的偏移*/
/*如果position属性为static，top不会产生任何效果*/
/*%	设置以包含元素的百分比计的上边位置*/
.menu01 .sub01 {
    top: 17%;
}
.menu01 .sub02 {
    top: 34%;
}
.menu01 .sub03 {
    top: 50%;
}
.menu01 .sub04 {
    top: 67%;
}
.menu01 .sub05 {
    top: 84%;
}


.menu02 .sub01 {
    top: 25%;
}
.menu02 .sub02 {
    top: 50%;
}
.menu02 .sub03 {
    top: 75%;
}

.menu03 .sub01 {
    top: 20%;
}
.menu03 .sub02 {
    top: 40%;
}
.menu03 .sub03 {
    top: 60%;
}
.menu03 .sub04 {
    top: 80%;
}

这是一部分没有优化的代码。后续我会写一个优化的。ok！