-
2019-06-02 20:11:07
二级菜单用的是无序列表嵌套,:hover鼠标悬浮其上方发生的事
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> *{margin: 0; padding: 0; font-size: 40px; } a{ color: #000000; text-decoration: none; } ul.caidan li{ float: left; list-style: none; width: 200px; background-color: bisque; } ul.caidan li:hover{ background-color: fuchsia; } ul.caidan li ul.erji{ display: none; } ul.caidan li:hover ul.erji{ display: block; } ul.caidan li:hover ul.erji li:hover{ background-color: aqua; } .caidan{ border: 1px solid black; width: 800px; margin: 0 auto; } </style> </head> <body> <ul class="caidan"> <li>一级菜单<ul class="erji"> <li><a href="">二级菜单</a></li> <li><a href="">二级菜单</a></li> <li><a href="">二级菜单</a></li> </ul></li> <li>一级菜单<ul class="erji"> <li><a href="">二级菜单</a></li> <li><a href="">二级菜单</a></li> </ul></li> <li>一级菜单<ul class="erji"> <li><a href="">二级菜单</a></li> <li><a href="">二级菜单</a></li> <li><a href="">二级菜单</a></li> </ul></li> <li><a href="">一级菜单</a></li> </ul> </body> </html>
更多相关内容 -
html创建菜单列表
2017-05-15 22:43:07创建菜单列表 本章中介绍的列表主要包括 无序列表 有序列表 定义列表 菜单列表 目录列表 效果:<!DOCTYPE <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>创建菜单列表</title> </head> <body> <font size="3" color="#3300ff">本章中介绍的列表主要包括</font><br/> <menu> <li>无序列表</li> <li>有序列表</li> <li>定义列表</li> <li>菜单列表</li> <li>目录列表</li> </menu> </body> </html>
效果: -
html下拉菜单怎么做?高手教你如何在HTML和CSS中创建下拉菜单
2020-05-16 22:26:10这些对于刚刚入门的新手,还不是很明白,下面高手教你如何在HTML和CSS中创建下拉菜单? 很多人都会遇到将鼠标悬停在导航上,会出现下拉菜单; 一般出现下拉菜单,用户就可以点击其中一个选项来访问来进入另外一个...html下拉菜单怎么做?html下拉菜单代码是什么?这些对于刚刚入门的新手,还不是很明白,下面高手教你如何在HTML和CSS中创建下拉菜单?
很多人都会遇到将鼠标悬停在导航上,会出现下拉菜单; 一般出现下拉菜单,用户就可以点击其中一个选项来访问来进入另外一个网址。
打造全网web前端全栈资料库(总目录)看完学的更快,掌握的更加牢固,你值得拥有(持续更新)
一:首先我们打开Notepad ++,如果使用Notepad ++的话,请在HTML窗口顶部的“ 语言”菜单设置成“H”。
二:创建下拉菜单代码,输入以下代码以确定下拉菜单的大小和颜色,确保将“#”替换为您要使用的数字(数字越大,下拉菜单越大)。您还可以使用您选择的任何颜色(或HTML颜色代码)替换“背景颜色”和“颜色”值。
三:表示您要将链接放在下拉菜单中,也可以将添加指向下拉菜单的链接,您可以通过输入代码将它们放在下拉菜单中。
四:创建下拉菜单的外观,可以确定下拉菜单的大小,以及其他网页元素时的位置以及颜色。请务必将“min-width”部分的“#”替换为编号(例如250),并将“background-color”标题更改为自己喜欢的颜色。
五:在下拉菜单的内容中添加细节,当我们解决了下拉菜单的文本颜色和下拉菜单按钮的大小,请务必将“#”替换为像素数,来指定按钮的大小。
六:编辑下拉菜单的悬停操作,将鼠标悬停在下拉菜单按钮上时,需要更改几种颜色,第一个“背景颜色”线指的是在下拉菜单中选择出现的颜色变化。
七:下一步我们来创建下拉按钮的名称,输入以下代码,确保将“名称”替换为您想要的下拉按钮名称(例如,菜单):
< divclass = “dropdown” >
< buttonclass = “dropbtn” >名称< / button>
< divclass = “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>
<divclass="dropdown">
<buttonclass="dropbtn">Name</button>
<divclass="dropdown-content">
<ahref="http://www.php.cn/">Name</a>
<ahref="http://www.php.cn/">Name</a>
<ahref="http://www.php.cn/">Name</a>
</div>
</div>
</body>
</html>
效果如图:
以上就是对html下拉菜单怎么做?高手教你如何在HTML和CSS中创建下拉菜单的全部介绍,需要更多内容请关注我。
-
HTML使用无序列表制作一级菜单和二级下拉菜单
2020-10-11 14:53:45在日常的生活中,想必大家都接触过下拉菜单的使用,这样为我们提供了极大的方便,那么下面看一下如何来制作吧。 one: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ...在日常的生活中,想必大家都接触过下拉菜单的使用,这样为我们提供了极大的方便,那么下面看一下如何来制作吧。
one:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .menu{ border: 1px solid red; width: 150px; height: 300px; margin: 10px auto 0 ; padding-left: 5px; padding-right: 2px; } .menu ul{ margin: 0; padding: 0; list-style:none; border: 1px solid red; } .menu ul li{ background: #CD661D; margin: 0; padding: 0 8px; height: 35px; line-height: 35px; border: 1px solid white; } .menu ul li a{ text-decoration: none; color: white; } .menu li:hover{ background: #6E6E6E; } </style> </head> <body> <div class="menu"> <ul> <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> <li><a href="#"> 相关链接 </a></li> </ul> </div> </body> </html>
上面的制作的为一级菜单,当鼠标悬停在上面的时候,背景颜色会发生变化,而且悬停的时候,鼠标的样式也会发生变化,这是为什么呢?
two:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ margin: 0px; padding: 0px; } ul{ width: 170px; height: 300px; margin: 10px auto; background: url(images/bg.jpg) no-repeat; padding-top: 190px; color: #fff; } li{ width: 80px; height: 40px; text-align: center; line-height: 40px; border-bottom: 1px dotted #fff; margin-left: 45px; } .noline{ border: none; } a{ color: #fff; text-decoration: none; } /* a:hover{ color: greenyellow; } */ li:hover{ background: indianred; } /* li:hover a{ color: hotpink; } */ </style> </head> <body> <ul> <li><a href="#">服装鞋帽</a></li> <li><a href="#">数码家电</a></li> <li><a href="#">运动户外</a></li> <li><a href="#">孕婴用品</a></li> <li class="noline"><a href="#">厨卫家具</a></li> </ul> </body> </html>
Three:
大家都追过剧吧,是不是有很多种可以选择,其实这都是可以用HTML代码来完成的,下面看一个一个简单的例子:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ margin: 0px; padding: 0px; list-style: none; } ul{ width: 900px; height: 150px; margin: 50px auto; /* background-color: khaki; */ } ul :after{ clear:both; content:""; display: block; height: 0; visibility: hidden; } li{ width: 100px; height: 100; border: 3px solid #fff; border-radius: 80%; list-style: none; margin-left: 50px; /* margin-top: 30px; */ background-color: lawngreen; float: left; } a{ color: tomato; text-overflow: none; } a:hover{ color: magenta; } </style> </head> <body> <ul> <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> </body> </html>
Four:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>一级下拉菜单</title> <style> *{ margin: 0px; padding: 0px; list-style: none; } .outer{ margin: 50px auto; width: 690px; } .outer:after{ clear:both; content:""; display: block; height: 0; visibility: hidden; } .outer li{ float: left; width: 110px; height: 42px; line-height: 42px; border: 3px solid red; } .inner{ display: none; } .outer li:hover{ background-color: red; } .outer li:hover .inner{ display: block; } a{ color: #3c3c3c; text-decoration: none; text-align: center; display: block; } </style> </head> <body> <ul class="outer"> <li><a href="#">网址大全</a> <ul class="inner"> <li><a href="#">搜狐</a></li> <li><a href="#">网易</a></li> <li><a href="#">新浪</a></li> </ul> </li> <li><a href="#">热门电视剧</a></li> <li><a href="#">热门电影</a></li> <li><a href="#">猜你喜欢</a></li> <li><a href="#">他人在看区</a> <ul class="inner"> <li><a href="#">皮皮</a></li> <li><a href="#">嘿嘿</a></li> <li><a href="#">嘟嘟</a></li> </ul> </li> </ul> </body> </html>
上面显示的是,当鼠标悬停的时候,下面会再次出来一个菜单,这就是下拉菜单,这是利用了无序列表的镶嵌结构实现的功能。Five:
学会了上面的下拉菜单,下面再看另一种下拉菜单。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> body { font: 16px "宋体"; } #menu { border: 1px solid #ccc; width: 120px; margin: 10px auto; } #menu ul { list-style: none; padding: 0px; margin: 0px; } #menu ul li { background: #eee; line-height: 35px; padding: 0px 8px; border-radius: 50%; border-bottom: 1px solid #ccc; position: relative; } a { color: #000; text-decoration: none; } a:hover { color: rgb(0, 255, 60); } .inner { width: 100px; display: none; border:1px solid #ccc; position: absolute; top: -1px; left: 120px; } .outer li:hover { background-color: red; } .outer li:hover .inner { display:block; /* background: red; */ } </style> </head> <body> <div id="menu"> <ul class="outer"> <li><a href="#">首页</a></li> <li><a href="#">网页布局</a> <ul class="inner"> <li><a href="#">平铺式</a></li> <li><a href="#">倒立式</a></li> <li><a href="#">栈开式</a></li> </ul> </li> <li><a href="#">网页教程</a> <ul class="inner"> <li><a href="#">视频区</a></li> <li><a href="#">图文区</a></li> <li><a href="#">讨论区</a></li> </ul> </li> <li><a href="#">网页实例</a> <ul class="inner"> <li><a href="#">举例1</a></li> <li><a href="#">举例2</a></li> <li><a href="#">举例3</a></li> </ul> </li> <li><a href="#">常用代码</a> <ul class="inner"> <li><a href="#">CSS</a></li> <li><a href="#">JAVA</a></li> <li><a href="#">数据结构</a></li> </ul> </li> <li><a href="#">站长杂谈</a> <ul class="inner"> <li><a href="#">小波说文</a></li> <li><a href="#">小河说演</a></li> <li><a href="#">小坡打卡</a></li> </ul> </li> <li><a href="#">技术文档</a> <ul class="inner"> <li><a href="#">基础篇</a></li> <li><a href="#">深入篇</a></li> <li><a href="#">高级篇</a></li> </ul> </li> <li><a href="#">资源下载</a> <ul class="inner"> <li><a href="#">图片下载</a></li> <li><a href="#">视频下载</a></li> <li><a href="#">文档下载</a></li> </ul> </li> <li><a href="#">图片素材</a> <ul class="inner"> <li><a href="#">免费区</a></li> <li><a href="#">VIP区</a></li> <li><a href="#">管理区</a></li> </ul> </li> </ul> </div> </body> </html>
-
css---使用列表和列表属性创建纵向菜单
2019-05-24 14:01:13<!DOCTYPE html> <html> <head> ...meta charset="UTF-8">...使用列表及css属性创建纵向菜单</title> <style type="text/css"> body{ margin: 10px; font-size:... -
wordpress下拉菜单_如何在WordPress中创建下拉菜单(入门指南)
2020-09-13 01:19:43wordpress下拉菜单Do you want to make a dropdown menu and add it... 您要创建一个下拉菜单并将其添加到您的WordPress网站吗? A dropdown menu shows a list of links as you take your mouse over an item on t... -
html下拉菜单怎么做?html下拉菜单的代码实例介绍
2021-06-12 02:07:21本篇文章主要的介绍了关于HTML select标签下拉菜单的做法实例,还有一个html的一些网站的下拉菜单的用法都放在了文章中,下面就让我们一起来看看这篇文章吧首先我们要知道html下拉菜单的代码是什么?很明显是select... -
HTML 制作简单的下拉菜单
2021-02-17 18:00:03DOCTYPE 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, ... -
用Python创建菜单
2020-12-19 12:46:33我正在用python制作一个菜单,需要:打印带有编号选项的菜单允许用户输入编号选项根据用户选择的选项号,运行特定于该操作的函数。现在,您的函数可以打印出它正在运行。如果用户输入了无效的内容,它会告诉用户他们... -
CSS之——设置列表样式和创建导航菜单
2018-07-24 15:15:35一、设置列表的符号 list-style-type: 属性;//设置列表样式 list-style-type: none; //清楚样式 属性有很多可以自己去试:circle,disc,decimal。。。。 二、设置列表图片符号 为ul,ol设置图片... -
html导航栏下拉菜单如何制作
2021-06-09 15:21:57html导航栏下拉菜单如何制作发布时间:2020-09-26 15:29:13来源:亿速云阅读:88作者:小新小编给大家分享一下html导航栏下拉菜单如何制作,希望大家阅读完这篇文章后大所收获,下面让我们一起去探讨吧!我们要说的... -
html、css 实现二级菜单
2019-12-11 17:14:25利用html、css 实现二级菜单,一级菜单用浮动,二级菜单用定位 -
用HTML ul、li标签创建横向导航菜单
2020-05-29 15:38:30用CSS样式对ul、li标签进行控制,实现横向导航菜单栏。 HTML代码: <div class="menu"> <ul> <li><a href="javascript:void(0);">菜单样式</a></li> <li><a ... -
html表单下拉菜单_HTML表单:下拉菜单
2020-08-16 23:40:09html表单下拉菜单Drop-down menus are used on forms to capture responses for which there is one correct response from multiple possible answers. A good example of this is asking for a visitor’s ... -
html下拉菜单怎么做?
2021-06-09 02:44:32【推荐学习:Html5教程】二:创建下拉菜单代码,输入以下代码以确定下拉菜单的大小和颜色,确保将“#”替换为您要使用的数字(数字越大,下拉菜单越大)。您还可以使用您选择的任何颜色(或HTML颜色代码)替换“背景... -
html+css 简单的歌曲列表 和二级水平菜单
2018-07-28 10:28:23简单的歌曲播放列表 利用a:hover加上div就出现鼠标在链接上就会出现一个说明的div html: &amp;amp;lt;!DOCTYPE html&amp;amp;gt; &amp;amp;lt;html&amp;amp;gt; &amp;... -
Bootstrap使用 .dropdown-menu 类创建下拉菜单
2019-05-13 20:29:08下拉菜单 下拉菜单是一种非常常见的效果,用于展示可切换、有关联的一组链接,它可以节省网页排版空间,使网页布局简洁有序。 Bootstrap内置了一套完整的下拉菜单组件,可用于不同的元素,如导航、按钮等等。配合... -
用HTML ul、li标签创建竖向二级菜单
2020-05-29 23:19:22用CSS样式对ul、li标签进行控制,实现竖向二级菜单。 HTML代码: <div class="sidemenu"> <ul> <li><a href="javascript:void(0);" class="one_level_menubar">一级菜单</a> ... -
html简单的二级菜单制作
2016-10-27 23:30:48首先看看效果图 具体实现方法如下: ...首先在html中写出一级菜单列表,然后在每个一级菜单中再嵌套一个列表即可创建一个二级菜单。 index.html Title 一级菜单 二级菜单 -
HTML+CSS 简单的顶部导航栏菜单制作
2021-04-26 14:38:36导航栏菜单 代码分析: 基本样式清除 无序列原点删除 下划线删除 文字默认居中 a标签设置块级元素 伪类选择器对a状态修饰 分步实现: 分三栏布局:使用浮动 logo一栏;选择框一栏;搜索框一栏 logo部分: ... -
使用HTML&css创建二级导航栏
2020-11-08 22:24:08使用 创建一个无序列表,即为一级导航栏 <ul> <li><a href="#">首页</a></li> <li><a href="#">学校概况</a></li> <li><a href="#">师资队伍... -
HTML+CSS实现简单下拉菜单
2017-06-20 13:52:11HTML+CSS实现下拉菜单 使用Html+css实现简单的下拉菜单 代码: 下拉框 *{ margin:0px; padding:0px;} #nav{ width:600px; height:40px; margin:0 auto;} #nav ul{ list-style:none;} #nav ul ... -
php实现微信公众号创建自定义菜单
2019-06-10 18:42:10创建自定义菜单,实现菜单事件。 首先获取Access_Token 接口: https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET 然后配置菜单的事件,caidan.php <... -
html+css实现菜单栏缓慢下拉效果
2021-03-20 16:30:14纯css实现菜单栏缓慢下拉效果 目标:利用css实现鼠标移到菜单栏时,菜单栏会缓慢出现的效果 我们可以用两种方法来解决这个问题 方法一:过渡(transition) 对forum-1开启绝对定位(absolute),让里面的li从其父... -
实现一个日期下拉菜单
2021-06-14 06:23:38这篇文章的主旨是弄清楚如何根据实际需求实现一个联动菜单以及联动菜单的原理,实例是实现一个日期选择下拉菜单。本文调试环境为IE6/firefox1.5。首先来分析一下日期下拉菜单的需求。建议大家在写任何程序的时候都... -
四、菜单管理(1)---菜单页面、列表呈现,数据管理和删除
2020-07-16 23:14:35菜单页面:数据菜单页面的呈现,菜单列表的呈现,数据的管理和删除 -
HTML+CSS制作二级菜单栏
2019-12-24 15:41:15今天我们来练习一下二级菜单栏,说实话比较简单,但是自己一个人写的时候错误百出,逻辑混乱,于是乎网上找了几个案例,借鉴了一下思路,才整明白,鄙人确实不才,哈哈! 效果图附上: 首先:我已链接了外部... -
html5中js添加下拉菜单
2015-12-04 21:13:11select id="first" onchange="change()">select>br/> ul id="caidan">ul> script> var first = document.getElementById('first'); var caidan = document.getElementById("caidan"); function init() -
使用jQuery创建折叠式菜单(手风琴效果)
2018-07-18 08:41:56使用jQuery创建折叠式菜单(手风琴效果) 今天给大家介绍如何使用jQuery创建折叠式菜单,即通常所说的手风琴效果(accordion [əˈkɔ:rdiən])。 实现效果如下: 一、HTML代码结构 要实现折叠式菜单... -
使用视图组件为ASP.NET Core创建侧面菜单
2018-12-15 12:02:10本文是关于为ASP.NET Core创建动态菜单系统。 在开发新的Web应用程序时,我们想要添加一个基于当前路由和参数动态生成的菜单组件。 我最初研究了ASP.NET Core中partials的概念,虽然这些对于重用静态标记非常有用...