HTML下拉菜单代码实现

实现结果
HTML代码

<nav class="div_nav"><ul><li><a href="#">第一层菜单</a><ul class="second"><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><a href="#">第一层菜单</a><ul class="second"><li><a href="#">第二层菜单</a></li></ul></li><li><a href="#">第一层菜单</a><ul class="second"><li><a href="#">第二层菜单</a></li><li><a href="#">第二层菜单</a></li></ul></li><li><a href="#">第一层</a><ul class="second"><li><a href="#">第二层</a></li><li><a href="#">第二层</a></li><li><a href="#">第二层</a></li><li><a href="#">第二层</a></li></ul></li><li><a href="#">第一层菜单</a></li></ul></nav>

CSS代码

   /* 消除内外边距 */    * {margin: 0px;padding: 0px;}/* 消除列表的小点 */    li {list-style: none;}a {/* 行内元素转块内元素 */display: block;/* 去除超链接下划线 */text-decoration: none;/* 字体颜色 */color: black;/* 使用内边距撑开盒子，以便适应不同字数的菜单项 */padding: 10px 15px;/* 设置字体大小 */font-size: 14px;/* 设置背景颜色 */background-color: rgb(218, 239, 246);}/* 设置鼠标经过时的样式 */    a:hover {background-color: rgb(195, 223, 247);/* 使用动画为字体添加动态变化的阴影 */animation: shadow 1s linear 0s infinite alternate;}/* 倒数四个a添加有边框-一级菜单 */    .div_nav>ul>li:nth-of-type(-n+4)>a {border-right: 1px solid;border-color: rgb(204, 219, 212);}/* 同上-二级菜单*/    .div_nav>ul>li>ul>li:nth-of-type(-n+4)>a {border-bottom: 1px solid;border-color: rgb(184, 188, 186);}/* 最外层盒子设置高度和上边距 */    .div_nav {height: 36.8px;margin-top: 100px;}/* 一级菜单项设置向左浮动 */    .div_nav>ul>li {float: left;}/* 菜单项居中显示 */    .div_nav>ul {width: 476px;height: 100%;margin-left: 50%;transform: translate(-50%);}/* 隐藏二级菜单 */    .second {display: none;}/* 鼠标经过时显示二级菜单 */   .div_nav>ul>li:hover .second {display: block;}/* 字体阴影的动画设计 */    @keyframes shadow {0% {color: black;text-shadow: 0px 0px 0px rgba(148, 202, 244, 0.689);}100% {color: rgb(86, 88, 88);text-shadow: 0px 0px 20px rgb(32, 36, 249);}}

完整代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>下拉菜单</title>
</head>
<style>/* 消除内外边距 */* {margin: 0px;padding: 0px;}/* 消除列表的小点 */li {list-style: none;}a {/* 行内元素转块内元素 */display: block;/* 去除超链接下划线 */text-decoration: none;/* 字体颜色 */color: black;/* 使用内边距撑开盒子，以便适应不同字数的菜单项 */padding: 10px 15px;/* 设置字体大小 */font-size: 14px;/* 设置背景颜色 */background-color: rgb(218, 239, 246);}/* 设置鼠标经过时的样式 */a:hover {background-color: rgb(195, 223, 247);/* 使用动画为字体添加动态变化的阴影 */animation: shadow 1s linear 0s infinite alternate;}/* 倒数四个a添加有边框-一级菜单 */.div_nav>ul>li:nth-of-type(-n+4)>a {border-right: 1px solid;border-color: rgb(204, 219, 212);}/* 同上-二级菜单*/.div_nav>ul>li>ul>li:nth-of-type(-n+4)>a {border-bottom: 1px solid;border-color: rgb(184, 188, 186);}/* 最外层盒子设置高度和上边距 */.div_nav {height: 36.8px;margin-top: 100px;}/* 一级菜单项设置向左浮动 */.div_nav>ul>li {float: left;}/* 菜单项居中显示 */.div_nav>ul {width: 476px;height: 100%;margin-left: 50%;transform: translate(-50%);}/* 隐藏二级菜单 */.second {display: none;}/* 鼠标经过时显示二级菜单 */.div_nav>ul>li:hover .second {display: block;}/* 字体阴影的动画设计 */@keyframes shadow {0% {color: black;text-shadow: 0px 0px 0px rgba(148, 202, 244, 0.689);}100% {color: rgb(86, 88, 88);text-shadow: 0px 0px 20px rgb(32, 36, 249);}}
</style><body><nav class="div_nav"><ul><li><a href="#">第一层菜单</a><ul class="second"><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><a href="#">第一层菜单</a><ul class="second"><li><a href="#">第二层菜单</a></li></ul></li><li><a href="#">第一层菜单</a><ul class="second"><li><a href="#">第二层菜单</a></li><li><a href="#">第二层菜单</a></li></ul></li><li><a href="#">第一层</a><ul class="second"><li><a href="#">第二层</a></li><li><a href="#">第二层</a></li><li><a href="#">第二层</a></li><li><a href="#">第二层</a></li></ul></li><li><a href="#">第一层菜单</a></li></ul></nav>
</body></html>

HTML下拉菜单代码实现相关推荐

灰色简约三级CSS下拉菜单代码
代码简介: 又一款CSS Menu,银灰色下拉菜单,老外网站扒下来的,兼容性还不错.它最多可以支持三级,如果你的菜单项目很多,你可以自己扩展,一般都是成对出现的标签,分清楚就可以了. 代码内容: &l ...
html5折叠卡片,基于HTML5折叠卡片式下拉菜单代码
基于HTML5折叠卡片式下拉菜单代码.这是一款基于jQuery+CSS3+HTML5实现的下拉列表框特效代码.效果图如下: 实现的代码. hmtl代码: 爱编程爱编程 jQuery特效 CSS3特效 ...
无限级导航PHP,jQuery多级无限级导航下拉菜单代码
jQuery多级无限级导航下拉菜单代码 js代码 $(document).ready(function() { $("ul.nav li").hover(function(){ $ ...
可控制导航下拉方向的jQuery下拉菜单代码
可控制导航下拉方向的jQuery下拉菜单代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...
纯CSS实现简约大方灰紫色下拉菜单代码
代码简介:又一个漂亮的纯CSS实现的下拉导航菜单,横向布局,适合作网站导航条,银色渐变色,鼠标放上更换菜单背景,用户体验极好,而且兼容性好,特别是对IE比较友好,火狐下也几乎不错位,推荐给站长使用. ...
左侧栏下拉框HTML代码,html5下拉菜单代码
html5如何实现文本框下拉选项功能使用html5或者jQuery如何实现文本框下拉效果,如下图 CSS布局HTML小编今天和大家分享大神详解最好有可以使用HTML5 list 属性.list 属性 ...
html手机端下拉菜单代码,jQuery手机移动端下拉列表选择代码
js代码 $(function(){ $('.retrie dt a').click(function(){ var $t=$(this); if($t.hasClass('up')){ $(&quo ...
php手机移动端下拉菜单代码,使用vue做出移动端下拉列表
这次给大家带来使用vue做出移动端下拉列表,使用vue做出移动端下拉列表的注意事项有哪些,下面就是实战案例,一起来看一下. 安装cnpm install vue-droplist --save 组件中 ...
html自动下拉框怎么做,html下拉菜单怎么做？
一:首先我们打开Notepad++,如果使用Notepad++的话,请在HTML窗口顶部的"语言"菜单设置成"H".[推荐学习:Html5教程] 二:创建下拉菜 ...
HTML+CSS实现简单下拉菜单
HTML+CSS实现下拉菜单使用Html+css实现简单的下拉菜单代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transiti ...

HTML下拉菜单代码实现

HTML下拉菜单代码实现

HTML下拉菜单代码实现相关推荐

最新文章

热门文章