HTML下拉菜单（超详细）：

html代码段：

<!--下拉菜单-->
<div class="downorder"><button class="order">下拉菜单</button><div class="downtext"><a href="">text1</a><a href="">text2</a><a href="">text3</a><a href="">text4</a></div>
</div>

css部分：

.downorder{width: 100px;position: relative;height: auto;
}
.downorder:hover a{display: block;
}
.order{position: relative;text-align: center;display: inline-block;font-size: 16px;padding: 15px;background-color: rgb(16, 179, 243);color: aliceblue;
}
.order:hover{background-color: rgb(17, 100, 224);color: rgb(14, 13, 13);
}
.downtext{position: relative;text-align: center;display: inline-block;font-size: 16px;background-color: rgb(224, 187, 22);color: aliceblue;
}
.downtext a{/* display: block; */display: none;padding: 15px;
}
.downtext a:hover{background-color: rgb(27, 170, 111);color: rgb(142, 236, 79);
}

讲解：

.downorder{

width: 100px;

position: relative;

height: auto;

}

对最大的盒子的修饰：

1.如果不加宽就无法限制浮动

relative相对定位元素的定位是相对其正常位置。

保证盒子不会乱浮动

.downorder:hover a{

display: block;

}

.downtext a{

/* display: block; */

display: none;

padding: 15px;

}

这个是最重要的一步：

先将a标签设置为display：none（就是不显示，隐藏）
当鼠标经过父盒子的时候 ----‘a’标签，显示方式变为块级标签（有高宽）

这样就有动态效果了

.order{

text-align: center;字体居中

font-size: 16px;

padding: 15px;/字体在框内的边距

background-color: rgb(16, 179, 243);///鼠标未碰到悬浮框的字体颜色

color: aliceblue;

}

这一部分修饰菜单栏的标题：

.order:hover{ background-color: rgb(17, 100, 224); color: rgb(14, 13, 13);}

鼠标接触到后，悬浮框的颜色

.downtext{

position: relative;

text-align: center;

display: inline-block;//根据盒子里的的内容变换大小

font-size: 16px;

background-color: rgb(224, 187, 22);

color: aliceblue;

}

///

downtext a:hover{//对下拉菜单里的内容的修饰

background-color: rgb(27, 170, 111);

color: rgb(142, 236, 79);

}

效果图：

HTML下拉菜单（超详细）：相关推荐

css3如何写下拉菜单,css如何实现下拉菜单超详细
首页 >web前端>css教程>正文 css如何实现下拉菜单?css实现下拉菜单的方法(完整代码) 原创2019-04- 本篇文章给大家带来的内容是关于css如何实现下拉菜单?css ...
Bootstrap入门（八）组件2：下拉菜单
Bootstrap入门(八)组件2:下拉菜单先引入本地的CSS文件和JS文件(注:1.bootstrap是需要jQuery支持的.2.需要在<body>当中添加) <link hr ...
php下拉框css样式,纯CSS实现的下拉菜单
实现效果实现代码 html Home WordPress Themes Plugins Tutorials Web Design Resources Links Tutorials HTML/CSS ...
纯css 下拉选择,纯CSS实现的下拉菜单
实现效果实现代码 html home wordpress themes plugins tutorials web design resources links tutorials html/css ...
免费资源下载：暗色色系的超棒搜索框和下拉菜单UI欣赏
为什么80%的码农都做不了架构师?>>> 日期:2012-7-5 来源:GBin1.com 在今天的免费素材下载中,我们推荐来自法国的UI设计师Alexandra Nuad的 ...
HTML字母导航栏怎么做,html导航栏下拉菜单怎么制作？这里有详细的代码实例
本篇文章介绍了关于html导航栏下拉菜单的制作,文章一开始就给出了全部的导航栏下拉菜单的代码,没看懂的下面都有详细的解释.下面就让我们一起来看这篇文章吧我们要说的是html导航栏下拉菜单的制作,先看 ...
web前端页面——移动端简单登录页面、下拉菜单（代码详细注释）
今天跟着专业老师复习了一下前端,感觉好多都已经忘记了,我将今天复习的一些重点整理出来. https://blog.csdn.net/hanhanwanghaha宝藏女孩欢迎您的关注! 欢迎关注微 ...
html 下拉导航栏源码,html导航栏下拉菜单怎么制作？这里有详细的代码实例
元素来包裹这些元素,并使用CSS来设置下拉内容的样式. html导航栏菜单的CSS部分: .dropdown类使用position:relative,这将设置下拉菜单的内容放置在下拉按钮(使用posi ...
jQuery和CSS3超酷二级下拉菜单插件
这是一款效果很酷又简单实用的 jQuery二级下拉菜单特效,该特效在点击触发按钮后,二级下拉菜单会向下滑动覆盖原来的主菜单,关闭后二级下拉菜单又向上滑动回去,二级菜单不占用多余的空间. 这个菜单插件是 ...
php ajax联动下拉列表,PHP和Ajax实现二级联动下拉菜单（代码、详细注释）
数据库 ................................................................................................ ...

HTML下拉菜单（超详细）：

HTML下拉菜单（超详细）：相关推荐

最新文章

热门文章