html下拉菜单怎么做？高手教你怎样在HTML和CSS中新建下拉菜单
许多人都会碰到将鼠标悬停在导航上，会显现下拉菜单; 一样显现下拉菜单，会员就可以点击其中一个选项来拜访来进入别的一个网址。
一：第一我们翻开Notepad ++，假如使用Notepad ++的话，请在HTML窗口顶部的“ 说话”菜单设定成“H”。【引荐学习：Html5教程】
二：创立下拉菜单代码，输入以下代码以肯定下拉菜单的大小和色彩，确保将“＃”更换为您要使用的数字（数字越大，下拉菜单越大）。您还可以使用您选中的任何色彩（或HTML色彩代码）更换“背景色彩”和“色彩”值。
三：表示您要将链接放鄙人拉菜单中，也可以将增加指向下拉菜单的链接，您可以通过输入代码将它们放鄙人拉菜单中。
四：创立下拉菜单的外不雅，可以肯定下拉菜单的大小，乃至其他网页元素时的位置乃至色彩。请务必将“min-width”部分的“＃”更换为编号（例如250），并将“background-color”标题更换为本人喜爱的色彩。
五：鄙人拉菜单的内容中增加细节，当我们解决了下拉菜单的文本色彩和下拉菜单按钮的大小，请务必将“＃”更换为像素数，来指定按钮的大小。
六：编纂下拉菜单的悬停操纵，将鼠标悬停鄙人拉菜单按钮上时，需要更换几种色彩，第一个“背景色彩”线指的是鄙人拉菜单中选中显现的色彩转变。
七：下一步我们来创立下拉按钮的名称，输入以下代码，确保将“名称”更换为您想要的下拉按钮名称（例如，菜单）：
< div class = “dropdown” > < button class = “dropbtn” >名称< / button > < div class = “dropdown-content” >
八：增加下拉菜单的链接，下拉菜单中的每个子选项都应链接到某个内容，可以是网站上的页面或外部网站，可以增加到下拉菜单中，确保http://www.php.cn/使用链接的地址（保存引号）和“名称”更换链接的名称正常。
代码实例：
<!DOCTYPE html>
<html>
<head>
<style>
.dropbtn {
background-color: black;
color: white;
padding: #px;
font-size: #px;
border: none;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: lightgrey;
min-width: #px;
z-index: 1;
}
.dropdown-content a {
color: black;
padding: #px #px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: white;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: grey;}
</style>
</head>
<body>
<div class="dropdown">
<button class="dropbtn">Name</button>
<div class="dropdown-content">
<a href="http://www.php.cn/">Name</a>
<a href="http://www.php.cn/">Name</a>
<a href="http://www.php.cn/">Name</a>
</div>
</div>
</body>
</html>结果如图：
以上就是对html下拉菜单如何做？高手教你怎样在HTML和CSS中创立下拉菜单的全部介绍，假如你想理解更多有关HTML5在线手册，请关注百分百源码网。
以上就是html下拉菜单如何做？高手教你怎样在HTML和CSS中创立下拉菜单的具体内容，更多请关注百分百源码网其它相关文章！
