css如何制作下拉菜单?

css如何制作下拉菜单?下面本篇文章给大家介绍一下用纯css实现下拉菜单的几种方式。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

方法1:display:nonedisplay:block切换

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        ul{
            list-style: none;
        }
        .nav>li{
            float: left;
        }
        ul a{
            display: block;
            text-decoration: none;
            width: 100px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            color: white;
            background-color: #2f3e45;
        }
        .nav>li:first-child a{
            border-radius: 10px 0 0 10px;
        }
        .nav>li:last-child a{
            border-radius: 0 10px 10px 0;
        }
        .drop-down{
            /*position: relative;*/
        }
        .drop-down-content{
            padding: 0;
            display: none;
            /*position: absolute;*/
        }
        
        h3{
            font-size: 30px;
            clear: both;
        }
        .drop-down-content li:hover a{
            background-color:red;
        }
        .nav .drop-down:hover .drop-down-content{
            display: block;
        }
</style>
</head>
<body>
    <ul>
        <li><a href="#">下拉菜单</a></li>
        <li><a href="#">下拉菜单</a>
            <ul>
                <li><a href="#">我是1</a></li>
                <li><a href="#">我是2</a></li>
                <li><a href="#">我是3</a></li>
            </ul>
            </li>
        <li><a href="#">下拉菜单</a></li>
        <li><a href="#">下拉菜单</a></li>
        <li><a href="#">下拉菜单</a></li>
    </ul>
    <h3>我是测试文字</h3>
</body>
</html>

1.gif

这是首先考虑到的实现方法,给 .drop-down-content 添加display:none,当悬浮在.drop-down上时 .drop-down-content的display变成block,缺点是不能添加过渡属性,慢慢弹出下来菜单。当.drop-down-content显示时会把后面的盒子往下挤,因为.drop-down-content 显示时是存在于文档流中的,给.drop-down设置position:relative,.drop-down-content设置position:absolute,使下拉菜单脱离了文档流来解决,上面注释的地方改过来即可

2.gif

方法2:给下拉菜单设置固定的高度,下拉菜单的内容设置透明opacity: 0;,悬浮在下拉菜单时opacity: 1;来实现

<style>
        ul{
            list-style: none;
        }
        .nav>li{
            float: left;
        }
        ul a{
            display: block;
            text-decoration: none;
            width: 100px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            color: white;
            background-color: #2f3e45;
        }
        .nav>li:first-child a{
            border-radius: 10px 0 0 10px;
        }
        .nav>li:last-child a{
            border-radius: 0 10px 10px 0;
        }
        .drop-down{
            /*position: relative;*/
            height: 50px;
        }
        .drop-down-content{
            padding: 0;
            opacity: 0;
            /*position: absolute;*/
        }
        
        h3{
            font-size: 30px;
            clear: both;
        /*  position: relative;
            z-index: -1;*/
        }
        .drop-down-content li:hover a{
            background-color:red;
        }
        .nav .drop-down:hover .drop-down-content{
            opacity: 1;
        }
</style>

效果同上。

方法3:设置包裹下拉菜单的li元素position:relation;下拉菜单绝对定位,left:-999px;使下拉菜单跑到左边浏览器外面看不到的地方,悬浮时,left:0;使其出现在浏览器中显示。

<style>
        ul{
            list-style: none;
        }
        .nav>li{
            float: left;
        }
        ul a{
            display: block;
            text-decoration: none;
            width: 100px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            color: white;
            background-color: #2f3e45;
        }
        .nav>li:first-child a{
            border-radius: 10px 0 0 10px;
        }
        .nav>li:last-child a{
            border-radius: 0 10px 10px 0;
        }
        .drop-down{
            position: relative;
        }
        .drop-down-content{
            padding: 0;
            position: absolute;
            left: -999px;
        }
        h3{
            font-size: 30px;
            clear: both;
        }
        .drop-down-content li:hover a{
            background-color:red;
        }
        .nav .drop-down:hover .drop-down-content{
            left: 0;
        }
</style>

3.gif

方法4:使用绝对定位

/*HTML结构,以下四种方法通用*/
<div id="container">
    <ul id="con_ul" class="cleanfix">
        <li>首页</li>
        <li>关于我们</li>
        <li>
            新闻中心
            <ul id="drop">
                <li><a href="">最新动态</a></li>
                <li><a href="">视频中心</a></li>
                <li><a href="">媒体报道</a></li>
                <li><a href="">热点专题</a></li>
                <li><a href="">媒体资料库</a></li>
            </ul>
        </li>
        <li>苏宁产业</li>
        <li>社会责任</li>
        <li>联系我们</li>
    </ul>
</div>
/*主要css代码(其他部分和上边一样)*/
#con_ul > li{
            float: left;
            height: 50px;
            width:100px;
            line-height: 50px;
            text-align: center;
            position: relative;
        }
        #drop{
            width: 120px;
            height:auto;
            position: absolute;
            left:-800px;
        }
        #con_ul > li:nth-child(3):hover #drop{
            left:auto;
        }

分析:首先给下拉菜单的父元素li设置一个relative的position,将下拉菜单整体进行绝对定位,left为负值将下拉菜单偏出html结构显现不出来,之后在hover伪类中将left设置为auto,鼠标移动到li时会使下拉菜单与同级元素进行自动定位达到左端对齐的效果。(left:0也可以。)

更多web前端开发知识,请查阅 HTML中文网 !!

以上就是css如何制作下拉菜单?的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » CSS3 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏