网易商城CSS下拉菜单导航 [收藏]

最新推荐文章于 2022-07-08 18:27:11 发布
最新推荐文章于 2022-07-08 18:27:11 发布
阅读量2k 收藏 1
点赞数
分类专栏： 点点滴滴 文章标签： 网易 商城 css class 照片 scroll 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>网易商城CSS下拉菜单导航</TITLE>
<META http-equiv=Content-Type content="text/html; charset=utf-8">
<STYLE>.nav {
	CLEAR: both; Z-INDEX: 10; BACKGROUND: #b91313; MARGIN-LEFT: 40px; WIDTH: 800px; POSITION: relative; HEIGHT: 40px
}
.nav LI {
	FLOAT: left; PADDING-TOP: 13px; LIST-STYLE-TYPE: none; POSITION: relative; HEIGHT: 27px
}
.nav .layout LI A {
	BORDER-RIGHT: #cd5a5a 1px solid; PADDING-RIGHT: 29px; PADDING-LEFT: 30px; FONT-SIZE: 14px; PADDING-BOTTOM: 0px; COLOR: #fff; LINE-HEIGHT: 16px; PADDING-TOP: 0px; HEIGHT: 16px
}
.nav .layout LI A:hover {
	COLOR: #fff
}
.nav .layout #active {
	BACKGROUND: #970000
}
.nav .layout #active A {
	BORDER-RIGHT: medium none; BORDER-TOP: medium none; BORDER-LEFT: medium none; COLOR: #fff; BORDER-BOTTOM: medium none; ZOOM: 1
}
.nav .layout LI.current A {
	PADDING-RIGHT: 27px; MARGIN-TOP: -11px; PADDING-LEFT: 28px; FONT-WEIGHT: bold; BACKGROUND: #fff; PADDING-BOTTOM: 12px; COLOR: #000; PADDING-TOP: 10px; ZOOM: 1
}
.nav .layout LI.current A:hover {
	BACKGROUND: #fff; COLOR: #000; TEXT-DECORATION: none
}
.nav .layout LI.other A:hover {
	PADDING-RIGHT: 27px; PADDING-LEFT: 28px; PADDING-BOTTOM: 10px; PADDING-TOP: 10px
}
.nav .layout #active A:hover {
	PADDING-RIGHT: 29px; PADDING-LEFT: 30px; FONT-WEIGHT: 500; BACKGROUND: #970000; PADDING-BOTTOM: 10px; MARGIN: -10px 0px 0px; PADDING-TOP: 10px
}
.nav .layout LI .snav {
	BORDER-TOP-WIDTH: 0px; BORDER-RIGHT: #b91313 2px solid; PADDING-RIGHT: 0px; DISPLAY: none; PADDING-LEFT: 0px; FONT-SIZE: 12px; BACKGROUND: #fff; LEFT: -2px; PADDING-BOTTOM: 10px; OVERFLOW: hidden; BORDER-LEFT: #b91313 2px solid; WIDTH: 480px; PADDING-TOP: 0px; BORDER-BOTTOM: #b91313 2px solid; POSITION: absolute; TOP: 40px
}
.nav .layout LI.current .snav {
	DISPLAY: block
}
.nav .layout LI .snav DL {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 10px; PADDING-TOP: 0px
}
.nav .layout LI .snav DT {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-WEIGHT: bold; PADDING-BOTTOM: 5px; PADDING-TOP: 5px
}
.nav .layout LI .snav P {
	PADDING-LEFT: 80px; MARGIN: 0px; OVERFLOW: hidden; LINE-HEIGHT: 30px; BORDER-BOTTOM: #bebebe 1px dotted; ZOOM: 1; POSITION: relative
}
.nav .layout LI .snav P:hover {
	BACKGROUND: #f2f2f2
}
.nav .layout LI .snav STRONG {
	DISPLAY: inline-block; PADDING-LEFT: 10px; MARGIN-LEFT: -80px; WIDTH: 80px; LINE-HEIGHT: 30px; POSITION: absolute; HEIGHT: 30px
}
.nav .layout LI .snav P A {
	BORDER-TOP-WIDTH: 0px; PADDING-RIGHT: 0px; DISPLAY: inline-block; PADDING-LEFT: 0px; FONT-WEIGHT: 500; BORDER-LEFT-WIDTH: 0px; FONT-SIZE: 12px; BACKGROUND: none transparent scroll repeat 0% 0%; BORDER-BOTTOM-WIDTH: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; OVERFLOW: hidden; WIDTH: 82px; COLOR: #686868; LINE-HEIGHT: 30px; PADDING-TOP: 0px; HEIGHT: 30px; TEXT-ALIGN: left; BORDER-RIGHT-WIDTH: 0px
}
.nav .layout LI.current .snav A:hover {
	BACKGROUND: none transparent scroll repeat 0% 0%; COLOR: #aa2e44; TEXT-DECORATION: underline
}
.nav .layout LI .tuan P {
	PADDING-LEFT: 50px; ZOOM: 1
}
.nav .layout LI .tuan STRONG {
	MARGIN-LEFT: -50px; WIDTH: 50px
}
.nav .layout LI .tuan P A {
	WIDTH: 60px
}
.nav .layout LI .snav P.hot A {
	WIDTH: auto; MARGIN-RIGHT: 10px
}
H1 {
	PADDING-RIGHT: 10px; PADDING-LEFT: 10px; FONT-SIZE: 18px; BACKGROUND: #f1f1f1; PADDING-BOTTOM: 10px; PADDING-TOP: 10px
}
#vimei {
	CLEAR: both; FONT-SIZE: 14px
}
</STYLE>

<META content="MSHTML 6.00.2900.6129" name=GENERATOR></HEAD>
<BODY>
<H1>网易商城CSS下拉菜单导航</H1>
<DIV class=nav><!-- 主导航开始 -->
<DIV class=layout>
<UL>
  <LI οnmοusemοve='this.className="current other"' 
  οnmοuseοut='this.className=""'><A href="http://mall.163.com/">首页</A> </LI>
  <LI οnmοusemοve='this.className="current other"' id=active 
  οnmοuseοut='this.className=""'><A 
  href="http://mall.163.com/mobile/fill.jsp">话费充值</A> </LI>
  <LI οnmοusemοve='this.className="current"' οnmοuseοut='this.className=""'><A 
  href="http://l.163.com/" target=_blank>网易尚品</A> 
  <DIV class=snav>
  <P class=hot><STRONG>最新</STRONG><A 
  href="http://caipiao.163.com/activity/icbcactivity.jsp" 
  target=_blank>工行活动</A><A href="http://l.163.com/brand/10.html" 
  target=_blank>GUCCI新款</A><A href="http://l.163.com/brand/6.html" 
  target=_blank>LV新款</A><A href="http://l.163.com/brand/14.html" 
  target=_blank>PARAD新款</A></P>
  <P><STRONG>手袋皮具</STRONG><A href="http://l.163.com/goods/type/12.html" 
  target=_blank>女包手袋</A><A href="http://l.163.com/goods/type/13.html" 
  target=_blank>男士箱包</A><A href="http://l.163.com/goods/type/14.html" 
  target=_blank>功能包袋</A><A href="http://l.163.com/goods/type/15.html" 
  target=_blank>皮带腰带</A><A href="http://l.163.com/goods/type/16.html" 
  target=_blank>其他</A></P>
  <P><STRONG>手表</STRONG><A href="http://l.163.com/goods/type/23.html" 
  target=_blank>机械表</A><A href="http://l.163.com/goods/type/24.html" 
  target=_blank>石英表</A><A href="http://l.163.com/goods/type/29.html" 
  target=_blank>时尚手表</A><A href="http://l.163.com/goods/type/25.html" 
  target=_blank>其他</A></P>
  <P><STRONG>珠宝饰品</STRONG><A href="http://l.163.com/goods/type/18.html" 
  target=_blank>时尚饰品</A><A href="http://l.163.com/goods/type/19.html" 
  target=_blank>户外用品</A><A href="http://l.163.com/goods/type/20.html" 
  target=_blank>工艺饰品</A><A href="http://l.163.com/goods/type/21.html" 
  target=_blank>其他</A></P>
  <P><STRONG>服装服饰</STRONG><A href="http://l.163.com/goods/type/2.html" 
  target=_blank>潮流女装</A><A href="http://l.163.com/goods/type/3.html" 
  target=_blank>时尚男装</A><A href="http://l.163.com/goods/type/4.html" 
  target=_blank>服装配饰</A><A href="http://l.163.com/goods/type/5.html" 
  target=_blank>其他</A></P>
  <P><STRONG>酒品</STRONG><A href="http://l.163.com/goods/type/34.html" 
  target=_blank>红葡萄酒</A><A href="http://l.163.com/goods/type/35.html" 
  target=_blank>白葡萄酒</A><A href="http://l.163.com/goods/type/38.html" 
  target=_blank>洋酒</A><A href="http://l.163.com/goods/type/39.html" 
  target=_blank>起泡酒</A><A href="http://l.163.com/goods/type/28.html" 
  target=_blank>其他红酒</A><A href="http://l.163.com/goods/type/40.html" 
  target=_blank>酒具</A></P>
  <P class="bd_none hot"><STRONG>热门</STRONG><A 
  href="http://l.163.com/goods/34980.html" target=_blank>爱马仕Evelyne</A><A 
  href="http://l.163.com/goods/34843.html" target=_blank>达利恩骑士</A><A 
  href="http://l.163.com/goods/34973.html" target=_blank>赛琳笑脸包</A><A 
  href="http://l.163.com/goods/type/27.html" target=_blank>酒品</A></P></DIV></LI>
  <LI οnmοusemοve='this.className="current"' οnmοuseοut='this.className=""'><A 
  class=bd_none href="http://yxp.163.com/" target=_blank>网易印象派</A> 
  <DIV class=snav style="RIGHT: -2px; LEFT: auto">
  <P class=hot><STRONG>最新</STRONG><A 
  href="http://yxp.163.com/store/photobook/ep.html?sss=fromshop163dh#s=5" 
  target=_blank>轻照片书</A><A 
  href="http://yxp.163.com/store/homephoto/ep.html?sss=fromshop163dh #s=2" 
  target=_blank>无框画</A><A 
  href="http://yxp.163.com/designer/store/?pt=10920&cp=250" 
  target=_blank>玩味T恤</A><A href="http://yxp.163.com/designer/?sss=fromshop163dh" 
  target=_blank>设计师潮品</A></P>
  <P><STRONG>精品推荐</STRONG><A 
  href="http://yxp.163.com/photo/ep.html?sss=fromshop163dh" 
  target=_blank>照片冲印</A><A 
  href="http://yxp.163.com/store/calendar/ep.html?sss=fromshop163dh" 
  target=_blank>2012照片台历</A><A 
  href="http://yxp.163.com/store/photobook/ep.html?sss=fromshop163dh#s=0" 
  target=_blank>照片书定制</A><A 
  href="http://yxp.163.com/store/silver/ep.html?sss=fromshop163dh#s=1" 
  target=_blank>纯银项链</A></P>
  <P><STRONG>影集定制</STRONG><A 
  href="http://yxp.163.com/store/pvcphotobook/ep.html?sss=fromshop163dh#s=0" 
  target=_blank>精装照片书</A><A 
  href="http://yxp.163.com/store/photobook/ep.html?sss=fromshop163dh#s=0" 
  target=_blank>简装照片书</A><A 
  href="http://yxp.163.com/store/album/ep.html?sss=fromshop163dh#s=0&m=0" 
  target=_blank>精品画册</A><A 
  href="http://yxp.163.com/store/dalbum/ep.html?sss=fromshop163dh" 
  target=_blank>桌面相册</A></P>
  <P><STRONG>纯银饰品</STRONG><A 
  href="http://yxp.163.com/store/silver/ep.html?sss=fromshop163dh#s=1" 
  target=_blank>时尚项链</A><A 
  href="http://yxp.163.com/store/silver/ep.html?sss=fromshop163dh#s=2" 
  target=_blank>精品戒指</A><A 
  href="http://yxp.163.com/store/silver/ep.html?sss=fromshop163dh#s=3" 
  target=_blank>手镯手链</A><A 
  href="http://yxp.163.com/store/silver/ep.html?sss=fromshop163dh#s=4" 
  target=_blank>流行脚链</A></P>
  <P><STRONG>家装画饰</STRONG><A 
  href="http://yxp.163.com/store/homephoto/ep.html?sss=fromshop163dh#s=2" 
  target=_blank>无框画</A><A 
  href="http://yxp.163.com/store/homephoto/ep.html?sss=fromshop163dh#s=1" 
  target=_blank>木版画</A><A 
  href="http://yxp.163.com/store/homephoto/ep.html?sss=fromshop163dh#s=3" 
  target=_blank>实木照片墙</A></P>
  <P><STRONG>生活家居</STRONG><A 
  href="http://yxp.163.com/store/pillow/ep.html?sss=fromshop163dh#s=0" 
  target=_blank>时尚抱枕</A><A 
  href="http://yxp.163.com/store/ep.html?sss=fromshop163dh#m=10&s=1" 
  target=_blank>马克杯</A><A 
  href="http://yxp.163.com/store/ep.html?sss=fromshop163dh#m=10&s=2" 
  target=_blank>魔术杯</A> <A 
  href="http://yxp.163.com/store/ep.html?sss=fromshop163dh#m=10&s=3" 
  target=_blank>骨瓷杯</A><A 
  href="http://yxp.163.com/store/ep.html?sss=fromshop163dh#m=10&s=4" 
  target=_blank>情侣杯</A></P>
  <P><STRONG>台历挂历</STRONG><A 
  href="http://yxp.163.com/store/calendar/ep.html?sss=fromshop163dh#s=1" 
  target=_blank>小巧台历</A><A 
  href="http://yxp.163.com/store/calendar/ep.html?sss=fromshop163dh#s=2" 
  target=_blank>8寸横款台历</A><A 
  href="http://yxp.163.com/store/calendar/ep.html?sss=fromshop163dh#s=3" 
  target=_blank>8寸竖款台历</A><A 
  href="http://yxp.163.com/store/wallcal/ep.html?sss=fromshop163dh#s=0" 
  target=_blank>新年挂历</A><A 
  href="http://yxp.163.com/store/spcal/ep.html?sss=fromshop163dh" 
  target=_blank>海报年历</A></P>
  <P><STRONG>创意玩意</STRONG><A 
  href="http://yxp.163.com/store/lomocard/ep.html?sss=fromshop163dh" 
  target=_blank>LOMO卡片</A><A href="http://yxp.163.com/store/ep.html#m=9" 
  target=_blank>鼠标垫</A><A 
  href="http://yxp.163.com/store/ep.html?sss=fromshop163dh#m=6" 
  target=_blank>笔记本</A><A href="http://yxp.163.com/store/ep.html#m=5" 
  target=_blank>贴贴纸</A><A href="http://yxp.163.com/store/gcard/ep.html" 
  target=_blank>贺卡</A></P>
  <P class="bd_none hot"><STRONG>热门</STRONG><A 
  href="http://yxp.163.com/action/ep.html?sss=fromshop163dh" 
  target=_blank>促销信息</A><A href="http://yxp.163.com/vpshop/?sss=fromshop163dh" 
  target=_blank>积分兑奖</A><A 
  href="http://yxp.163.com/theme/ep.html?sss=fromshop163dh" 
  target=_blank>给力主题</A></P></DIV></LI></UL></DIV><!--主导航结束--></DIV><BR><BR>
</BODY></HTML>

Enna
关注
专栏目录
CSS 下拉菜单
weixin_43535265的博客
03-11 925
使用 CSS 创建可悬停的下拉列表。 1. 基础的下拉菜单 创建当用户将鼠标移到元素上时出现的下拉框。 代码如下： <!DOCTYPE html> <html> <head> <style> .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; background-co
商城左侧分类下拉菜单
03-15
商城左侧分类下拉菜单
jQuery购物商城导航下拉菜单.zip
05-24
jQuery购物商城导航下拉菜单基于jquery-1.4.2.min.js制作，鼠标移动到一级导航菜单，下拉显示图文混排商品分类菜单，包括首页、女鞋馆、男鞋馆、女装馆、男装馆、箱包馆、儿童馆、户外馆、运动馆等菜单栏目。
jQuery购物商城导航下拉菜单
11-19
jQuery购物商城导航下拉菜单 jQuery购物商城导航下拉菜单 jQuery购物商城导航下拉菜单 jQuery购物商城导航下拉菜单
css 商城 两列_面试官让我用纯css做一个下拉菜单，一分钟搞定！！
weixin_39724009的博客
11-04 137
导语：这几天看面试题目的时候，经常能够看到用css去实现一个下拉菜单，但是我发现很多人却没能够做出来，最后只能勉强用js做出来。实话实说，我很震惊，这个功能实现起来很简单，甚至可以说是入门题目，怎么这么多人不会呢？所以今天来个面试干货，带大家直接手撸css做下拉菜单。还是一样，话不多说，直接上效果图。1，一个按钮，没点击前（手机端）或者鼠标没指向时（pc端）2，点击后，或者鼠标指向后。就能够显示下...
web-综合 商城下拉菜单的制作
m0_60416689的博客
01-08 3042
第1关：商城下拉菜单颜色样式的制作 任务描述 本关任务： 实现对a标签字体背景颜色的修改，要求颜色型号（#06F）。 选择鼠标指针浮动在a标签上的颜色样式，要求颜色样式（#FF3）。 相关知识 为了完成本关任务，你需要掌握：a标签样式设置 a标签样式设置 a:link {color: blue} /* 未被访问的链接 蓝色 */ a:visited {color: blue} /*已被访问过的链接 蓝色 */ a:hover {color: blue} /*鼠标悬浮在上的链接 蓝色 */ a:a
CSS仿网易首页的头部菜单栏按钮和三角形制作方法
01-19
 网易首页的头部菜单栏中，也会有这样的三角形 当鼠标经过时，三角形会垂直翻转，如下 现在我分享制作三角形的做法，主要是利用边框做成的 首先，四个三角形合并在一起的正方形，也就是正方形的四条边框形成的四...
网页设计期末作业，使用HTML、CSS、Jquery模仿网易云网页
06-14
在模仿过程中，学生可以使用JQuery来实现网页的交互功能，如音乐播放、暂停、前进、后退，以及滚动监听、下拉菜单的展开与关闭等动态效果。 Bootstrap则是一个前端开发框架，集成了HTML、CSS和JavaScript，提供了...
原生JS实现点击下拉菜单
waiwai1010的博客
09-15 4753
接上一篇博文，这里实现点击下拉菜单。 与悬停不同的是，悬停的操作都是hover，直接写入CSS即可，这里需要将静态和动态样式分离，再JS添加点击事件，使用排他法绑定给目标元素特定的样式。 具体实现见下，其中需要注意的地方包括。 添加点击事件注意添加到父盒子section上，点击section，head和menu都会产生动态的样式变化（其实head可以添加点击事件来改变head的样式，但是head的点击事件无法改变menu的样式，所以这里统一选择绑定点击事件给父盒子section）。 其中sectio
JS仿京东商城菜单，下拉弹出框菜单
05-26
这是用js实现的 仿京东的下拉弹出框菜单----类似于京东商城左侧的导航栏
下拉刷新 水平滑动 仿商城
11-10
自定义RecyclerView 下拉刷新 水平滑动，自定义背景 需要的同学可以下载，自定义RecyclerView 下拉刷新 水平滑动，自定义背景 需要的同学可以下载，自定义RecyclerView 下拉刷新 水平滑动，自定义背景 需要的同学可以下载，自定义RecyclerView 下拉刷新 水平滑动，自定义背景 需要的同学可以下载，自定义RecyclerView 下拉刷新 水平滑动，自定义背景 需要的同学可以下载，自定义RecyclerView 下拉刷新 水平滑动，自定义背景 需要的同学可以下载，自定义RecyclerView 下拉刷新 水平滑动，自定义背景 需要的同学可以下载，自定义RecyclerView 下拉刷新 水平滑动，自定义背景 需要的同学可以下载，自定义RecyclerView 下拉刷新 水平滑动，自定义背景 需要的同学可以下载，自定义RecyclerView 下拉刷新 水平滑动，自定义背景 需要的同学可以下载，
html和css实现 网易严选移动端页面
12-10
网易严选移动端页面，实现自适应布局
仿网易侧滑导航二级导航
11-26
- **下拉列表**：二级导航通常表现为一级菜单项下拉出的子菜单，可以使用CSS的`position`属性实现，也可以通过JavaScript动态加载子菜单内容。 - **抽屉式展开**：另一种常见形式是点击一级菜单后，右侧滑出一个...
CSS实现精美导航
02-27
如果“163css”包含了下拉菜单的设计，那么我们可能需要用到CSS的伪类和jQuery来控制子菜单的显示和隐藏。例如，当鼠标悬停在主菜单项上时，显示对应的下拉菜单： ```css .nav-list .dropdown { position: ...
CSS样式：小米商城导航栏及下拉菜单小项目
那人独钓寒江雪
07-08 1307
CSS样式
商城头部分类下拉功能
qq_20876425的博客
03-20 319
html代码： <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="../css/common.css" /> <link r...
CSS 如何制作下拉菜单
CyberPlayer的博客
02-23 3594
下拉菜单 .dropdown类使用position:relative，当我们希望将下拉内容放置在下拉按钮的正下方（使用position:absolute）时，需要使用该类。 .dropdown-content类保存实际的下拉菜单内容。默认情况下它是隐藏的，并将在悬停时显示（请看下文）。请注意，min-width设置为 160px。可随时更改此设置。提示：如果您希望下拉内容的宽度与下拉按钮的宽度一样，请将宽度设置为 100％（设置overflow:auto可实现在小屏幕上滚动...
网易严选html+css
l18434374757的博客
08-03 947
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0px; padding: 0px; } div.ym { ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值