新浪导航栏下拉菜单案例展示

新浪导航栏下拉菜单案例展示
小白初学初打
大佬手下留情

<!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>* {padding: 0;margin: 0;}li {list-style: none;}.boxbox {border-top: 3px solid orange;}.box {margin-left: 820px;}.box1 {position: relative;display: inline-block;height: 50px;text-align: center;line-height: 40px;}.box1>ul {position: absolute;display: none;}.box1>a {position: relative;display: inline-block;width: 100px;height: 50px;line-height: 50px;}.box1>ul>li>a {display: block;width: 100px;height: 40px;border-bottom: 1px solid orange;border-left: 1px solid orange;border-right: 1px solid orange;}.box2 {position: relative;display: inline-block;height: 50px;   text-align: center;line-height: 40px;}.box2>a {display: block;width: 100px;height: 50px;line-height: 50px;   }.box2>ul {position: absolute;display: none;  }.box2>ul>li>a {display: block;width: 100px;height: 40px;border-bottom: 1px solid orange;border-left: 1px solid orange;border-right: 1px solid orange;}.box3 {position: relative;display: inline-block;height: 50px;text-align: center;line-height: 40px;}.box3>a {display: block;width: 100px;height: 50px;line-height: 50px;  }.box3>ul {position: absolute;display: none;}.box3>ul>li>a {display: block;width: 140px;height: 40px;border-bottom: 1px solid orange;border-left: 1px solid orange;border-right: 1px solid orange;}a {color: black;text-decoration: none;}a:hover {color: orange;}.box1>a:hover {background-color: #eee;}.box1>ul>li>a:hover {background-color: rgb(238, 233, 224);}.box2>a:hover {background-color: #eee;}.box2>ul>li>a:hover {background-color: rgb(238, 233, 224);}.box3>a:hover {background-color: #eee;}.box3>ul>li>a:hover {background-color: rgb(238, 233, 224);}</style>
</head>
<body><div class="boxbox"><ul class="box"><li class="box1"><a href="JavaScript:;">微博</a><ul><li><a href="#">私信</a></li><li><a href="#">评论</a></li><li><a href="#">@我</a></li></ul></li><li class="box2"><a href="JavaScript:;">博客</a><ul><li><a href="JavaScript:;">博客评论</a></li><li><a href="JavaScript:;">未读提醒</a></li></ul></li><li class="box3"><a href="JavaScript:;">邮箱</a><ul><li><a href="JavaScript:;">免费邮箱</a></li><li><a href="JavaScript:;">VIP邮箱</a></li><li><a href="JavaScript:;">企业邮箱</a></li><li><a href="JavaScript:;">新浪邮箱客户端</a></li></ul></li></ul></div><script>var box = document.querySelector('.box'); //获取父级元素var lis = box.children; //获取三个子元素节点for(var i = 0; i < lis.length; i++) {lis[i].onmouseover = function() {this.children[1].style.display = 'block';}lis[i].onmouseout = function() {this.children[1].style.display = 'none';}} </script>
</body>
</html>

新浪导航栏下拉菜单案例展示相关推荐

CSS3——对齐组合选择符伪类伪元素导航栏下拉菜单
水平&垂直对齐元素居中对齐 .center {margin: auto;width: 50%;border: 3px solid green;padding: 10px; } 文本居中对齐 ...
HTML字母导航栏怎么做,html导航栏下拉菜单怎么制作？这里有详细的代码实例
本篇文章介绍了关于html导航栏下拉菜单的制作,文章一开始就给出了全部的导航栏下拉菜单的代码,没看懂的下面都有详细的解释.下面就让我们一起来看这篇文章吧我们要说的是html导航栏下拉菜单的制作,先看 ...
导航栏下拉菜单的制作
导航栏 , 下拉菜单的制作代码示范 : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &qu ...
html 下拉导航栏源码,html导航栏下拉菜单怎么制作？这里有详细的代码实例
元素来包裹这些元素,并使用CSS来设置下拉内容的样式. html导航栏菜单的CSS部分: .dropdown类使用position:relative,这将设置下拉菜单的内容放置在下拉按钮(使用posi ...
javaScript:操作元素-新浪触碰下拉菜单(3)
效果:触碰一级菜单,二级菜单显示逻辑: 1.使用ul li获得下拉菜单 2.触碰事件使用 onmousemove(鼠标触碰),onmouseout(鼠标离开) 3.触碰显示为块,离开隐藏内容 < ...
导航栏下拉菜单效果代码
导航栏,菜单栏下拉简单实现先看看效果图 <!-- jQuery Drop-down Menu/Navigation bar Copyright 2017-9-21, Jachin QQ: 38 ...
Layui导航栏下拉菜单不显示问题
1.首先检查自己有没有导入layui.js 2.检查是否已经加载element模块 <ul> ....... </ul> //放到你导航栏代码块的后面 <script&g ...
Bootstrap导航栏下拉菜单鼠标滑过展开
boostrap的导航栏不提供鼠标滑过展开,通过给类为dropdown的li标签添加和移除open类实现 $(function () {$(".dropdown").mouseov ...
dw添加下拉菜单_怎样用dw制作导航栏下拉菜单
一.工具:dw工具二.操作步骤: [1]打开dw软件,新建立一个新的文件. [2]点击常用,选择布局,绘制一个层. [3]再点击层,再绘制一个.可以看到,第一个层是layer1,第二个是layer2 ...
html纯css实现导航栏下拉菜单（带下拉三级菜单）
本文转载于:https://blog.csdn.net/qq_30449567/article/details/80548720 <!DOCTYPE html> <html lang ...

新浪导航栏下拉菜单案例展示

新浪导航栏下拉菜单案例展示相关推荐

最新文章

热门文章