纯CSS实现下拉菜单导航

wapeyang 发布于2019-08-01 15:20 / 3576人阅读

摘要：需求当鼠标到按钮上时，出现下拉菜单导航条。设置是，默认宽度为内容宽度，则鼠标只会在到按钮区域时才会展开下拉菜单以上是我的一些想法以及实现，如有错误之处，欢迎各位前端大神留言评论拍砖。

前言：本题是网易云课堂的前端微专业《页面制作》课程的作业题，当时对题意理解错误没有实现题目要求，成了心中永远的痛，所谓念念不忘必有回响，在学校图书馆花了几个小时做出来并对相关知识点进行了总结，写了这篇博文。好，进入正题。

1.需求：当鼠标hover到按钮上时，出现下拉菜单导航条。

2.HTML结构


    按钮
        
            下拉菜单项
            下拉菜单项
            下拉菜单项
            下拉菜单项

3.设置样式

（1）首先重置默认的

,标签样式

li,
li a {
    text-decoration: none;
    list-style-type: none;
    font-family: "宋体";
    font-size: 12px;
    color: #000;
}

（2）设置按钮的边框等，此时我设置的是外层

标签中标签的样式，此时将内层标签设置成块级block，这样可以设置宽高，并且后面有用（后面再说）。

   .btn1 {
        display: block;
        border: 1px solid #ffffd;
        width: 50px;
        height: 28px;
        text-align: center;
        line-height: 28px;
    }

（3）将下拉菜单隐藏设置成不可见

ul {
    margin-top: 1px;
    position: absolute; /*设置绝对定位*/
    left: -999em;   /*设置隐藏*/
    padding: 0;  /*离它的父元素的边界为0，所以可以位于父元素的正下方*/
}

（4）为下拉菜单项添加样式

ul li a {
    display: inline-block;  /*菜单项宽度未知，设置inline－block宽度为内容宽度*/
    border-top: 1px solid #ffffd;
    border-left: 1px solid #ffffd;  /*这方法很笨，千万别学我*/
    border-right: 1px solid #ffffd;
    height: 30px;
    padding: 0 10px;
    line-height: 30px;
}

（5）不能忘了最后一个

.last {
    border-bottom: 1px solid #ffffd;
}

（6）设置鼠标hover时出现下拉菜单

.btn:hover ul {
    left: auto; /*默认ul的padding为0，位于按钮正下方*/
}

（7）设置hover时改变背景颜色

ul li a:hover {
    background-color: #ffffd;
}

（8）此时会有一个小bug，鼠标hover到按钮整一行时都会出现下拉菜单，因为此时最外层的

标签是块级元素，块级元素没有设置宽度默认的宽度是父元素宽度，而它的父元素是body，第（6）步写的是hover整个外层

标签，所以会出现这种情况。

解决办法：可以在父元素

设置inline－block，子元素设置block，当子元素内容超出时，父元素宽度根据内容变化，所以，可以将按钮hover区域控制按钮边框之内。

    .btn{
        display: inline-block; /*设置btn是inline－block，
        默认宽度为内容宽度，则鼠标只会在hover到按钮区域时才会展开下拉菜单*/
    }

以上是我的一些想法以及实现，如有错误之处，欢迎各位前端大神留言评论拍砖。如果你有更好的做法也可以和我交流，我的代码写的有很多不足之处，希望多和各位交流提高，谢谢！！！

以下是完整代码：





    
    纯css实现下拉菜单
    



    按钮
        
            下拉菜单项
            下拉菜单项
            下拉菜单项
            下拉菜单项

云服务器 GPU云服务器 div+css导航菜单 html实现下拉菜单纯CSS 下拉导航

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/49850.html

纯CSS实现下拉菜单导航

摘要：需求当鼠标到按钮上时，出现下拉菜单导航条。设置是，默认宽度为内容宽度，则鼠标只会在到按钮区域时才会展开下拉菜单以上是我的一些想法以及实现，如有错误之处，欢迎各位前端大神留言评论拍砖。前言：本题是网易云课堂的前端微专业《页面制作》课程的作业题，当时对题意理解错误没有实现题目要求，成了心中永远的痛，所谓念念不忘必有回响，在学校图书馆花了几个小时做出来并对相关知识点进行了总结，写了这篇博文...

bingo 2019-08-29 10:54 评论0 收藏0
纯CSS打造淘宝导航菜单栏

摘要：店铺装修端基础页首页装修页面编辑菜单模块显示设置，粘贴如下导航条背景色首页店铺动态背景色微软雅黑黑体首页店铺动态右边线首页店铺动态文字颜色下拉菜单图标店铺装修-PC端-基础页-首页-装修页面：编辑“菜单”模块-显示设置，粘贴如下CSS： /* 导航条背景色*/ .skin-box-bd .menu-list{background: none repeat scrol...

番茄西红柿 2019-04-23 13:39 评论0 收藏0
FE.CSS-Sultana后记：纯css也能写col,select,datepicker,caro

摘要：接着只要在中使用就能搞定自适应。代码如下标题标题标题标题标题在上述点功能中，可以用变量解决，比如实现了宽度，高度圆点大小直径的控件。未完待续背景如今css3越来越发达，focus-within等属性也已经开始在Chrome得到支持。如果有出色的css功底，一点点ps技能，你也能用css3配合原生html标签写出优秀的框架。通过对css3的实践，我发现自定义原生控件并不是什么难事，...

BigTomato 2019-08-29 15:17 评论0 收藏0
FE.CSS-Sultana后记：纯css也能写col,select,datepicker,caro

摘要：接着只要在中使用就能搞定自适应。代码如下标题标题标题标题标题在上述点功能中，可以用变量解决，比如实现了宽度，高度圆点大小直径的控件。未完待续背景如今css3越来越发达，focus-within等属性也已经开始在Chrome得到支持。如果有出色的css功底，一点点ps技能，你也能用css3配合原生html标签写出优秀的框架。通过对css3的实践，我发现自定义原生控件并不是什么难事，...

lanffy 2019-08-26 17:29 评论0 收藏0