淘宝地区下拉菜单制作

利用display:none隐藏，用display:block显示

将地区想象成一个整体，分为上下两部分

可以利用定位将下边盒子定位到上边盒子的下边

利用display:none隐藏下边的盒子，当鼠标经过整个盒子时显示下边盒子

代码如下

<style>
.dropdown dd ul {position: absolute;top: 35px;left: 0;display: none;width: 200px;background-color: #fff
}.dropdown:hover ul {display: block;
}
</style>

简单滚动条做法

利用overflow:auto;

内容超出高度利用overflow：auto；设置滚动条

整体代码如下

html部分

<!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>Document</title><link rel="stylesheet" href="index1.css">
</head><body><header><div class="w"><div class="fl"><div class="dropdown"><dt>中国大陆</dt><dd><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><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><li><a href="#">越南</a></li><li><a href="#">泰国</a></li><li><a href="#">菲律宾</a></li><li><a href="#"></a></li></ul></dd></div></div></div></header>
</body></html>

css部分

<style>
* {padding: 0;margin: 0;
}a {text-decoration: none;color: #3c3c3c;
}li {list-style: none;
}body {background-color: #f3ecec;position: absolute;left: 0;top: 0;right: -17px;bottom: 0;overflow-x: hidden;overflow-y: scroll;
}.w {width: 1190px;margin: 0 auto;
}header {height: 35px;background-color: #f5f5f5;line-height: 35px;
}.navitems li {float: left;padding: 0 6px;color: #9b9b9b;font-size: 10px;font-weight: 100;
}.fl .navitems,
.fr a {height: 35px;float: left;color: #9b9b9b;
}a:hover {color: #f40;
}.dropdown ul {width: 200px;height: 300px;overflow: auto;
}.dropdown ul a {margin-left: 6px;
}.dropdown:hover ul {background-color: #fff;
}.dropdown:hover dt {background-color: #fff;z-index: 5;
}.dropdown {position: relative;float: left;width: 75px;display: block;z-index: 1;font-size: 14px;
}.dropdown dt {float: left;width: 75px;height: 35px;
}.dropdown dt::after {position: absolute;top: 9px;right: 2px;content: '';width: 1px;height: 1px;border: 1.5px solid gray;border-top-color: transparent;border-left-color: transparent;transform: rotate(45deg);margin: 5px;
}
.dropdown dd ul {position: absolute;top: 35px;left: 0;display: none;width: 200px;background-color: #fff
}.fl .dropdown:hover ul {display: block;
}.dropdown ul li:hover a {color: #666;
}.dropdown ul li:hover {background-color: #f5f5f5;
}.navitems ul:nth-child(1) a {margin-right: 7px;
}
</style>

淘宝地区下拉菜单制作相关推荐

15个精心挑选的 jQuery 下拉菜单制作教程
下拉菜单是网站导航常用的表现形式之一,能够呈现更多的导航内容.如果网站能够设计出有吸引力的网站导航,将会吸引更多的用户去浏览网站的内容.今天本文就为大家挑选了25个非常好的 jQuery 下拉菜单制作 ...
JavaScript（js）网页--下拉菜单制作
JavaScript(js)网页–下拉菜单制作在网页的设计中,经常会出现二级下拉菜单,当鼠标经过时,显示二级菜单,鼠标离开时隐藏.例如新浪网鼠标放到微博.博客或邮箱上面时,会出现一个二级菜单,鼠标 ...
JavaScript（js）网页–下拉菜单制作
JavaScript(js)网页–下拉菜单制作在网页的设计中,经常会出现二级下拉菜单,当鼠标经过时,显示二级菜单,鼠标离开时隐藏.例如新浪网鼠标放到微博.博客或邮箱上面时,会出现一个二级菜单,鼠标 ...
vue.js bootstrap 下拉列表_Excel下拉菜单制作的小技巧
在工作中,常常需要对多行多列的数据设置下拉菜单,但在使用数据验证,设置下拉菜单时,序列来源是不能执行引用多行多列区域的,否则即会出现下图提示框,应该如何进行设置呢? 第一步:定义名称框鼠标依次点击公 ...
html下拉菜单制作方法,CSS3制作Dropdown下拉菜单的方法
:target 是CSS3 中新增的一个伪类,用以匹配当前页面的URI中某个标志符的目标元素(比如说当前页面URL下添加#comment就会定位到id="comment"的位置,俗 ...
Android仿手机淘宝多级下拉菜单
我们在常用的电商或者旅游APP中,例如美团,手机淘宝等等,都能够看的到有那种下拉式的二级列表菜单.具体如图所示: 上面两张图就是美团的一个二级列表菜单的一个展示.我相信很多人都想开发一个跟它一样的功能 ...
Excel多级下拉菜单制作
通过Excel2010中的数据有效性实现多级联动下拉列表的制作,多级联动下拉列表就是第一列选择了某项,第二列则会提供相对应的选项供我们选择. 现在Excel2010可以实现这样的效果,主要利用Indi ...
10个优秀的 HTML5 CSS3 下拉菜单制作教程
下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...
html+css简单下拉菜单制作
额,今天心血来潮做了个简单的下拉菜单,不过用的css操作的,啧! 最终效果: 代码: <!DOCTYPE html> <html> <head><title& ...

淘宝地区下拉菜单制作

整体代码如下

html部分

css部分

淘宝地区下拉菜单制作相关推荐

最新文章

热门文章