css制作导航

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播</title>
<style>
body,ul,li{
margin: 0;
padding: 0;
font-size: 13px;
font-family: "微软雅黑";
list-style: none;
}

.usernav>li{
list-style: none;
float: left;
position: relative;
}
.useraictive{
color: #D00000;
}

.usernav>li>a{
text-decoration:none;
color: #fff;
line-height: 40px;
text-align: center;
border-right: 1px solid #fff;
padding: 0 32px;

}
.usernav-wrap{
width: 1920px;
height: 40px;
background: #000;
}
.usernav{

margin-left: 200px;

}
.usernav .userlast{
border-right: none;
}
.usernav li ul{
position: absolute;
z-index: 3;
font-weight:bold;
background:#dedede;
max-height:0px;
transition:max-height 0.35s;
overflow:hidden;
}
.usernav>li:hover ul{
max-height:160px;
transition: ease 0.5s all;
}
.usernav li ul li{
width: 90px;
height: 40px;
text-align: center;
border-bottom: 1px solid #bbb ;
}
.usernav li ul a{
text-decoration: none;
color: #000000;
line-height: 40px;
}

</style>

</head>
<body>
<div class="usernav-wrap">
<ul class="usernav">
<li ><a href="">全部商品</a></li>
<li><a href="">首页</a></li>
<li ><a href="" class="useraictive">活动</a></li>
<li><a href="">客厅</a>
<ul>
<li><a href="">沙发</a> </li>
<li><a href="">茶几</a> </li>
<li><a href="">电视柜</a> </li>
<li style="border-bottom: none"><a href="">隔断柜</a> </li>
</ul>

</li>
<li><a href="">卧室</a>
<ul>
<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>
<li><a href="">餐桌</a> </li>
<li><a href="">餐椅</a> </li>
<li><a href="">餐边柜</a> </li>
</ul>

</li>
<li><a href="">书房</a>
<ul>
<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="" class="userlast">品牌历程</a></li>
</ul>
</div>

</body>
</html>

转载于:https://www.cnblogs.com/zhaocong/p/7324127.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/268699.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

IDEA 出现 java.lang.OutOfMemoryError: Java heap space 解决方式

File–>settings–>Build,Execution,Deployment–>Compiler 把图中700修改为4096

使用Exchange 的SMTP连接器路由/中继邮件的设定图例

博主的话&#xff1a;在钉子的博客上看到的文章&#xff0c;觉得很实用&#xff0e;因为公司有多个分公司&#xff0c;且邮件系统的域名不一样&#xff0c;对于特定的域名&#xff0c;我们觉得文中说的新建SMTP连接器,来实现对个别域名从专线发送.特别是对于国外的分公司,应该不…

java记事本课程设计,java记事本课程设计

java记事本课程设计 一、 设计内容和要求1、 设计一个具有 GUI 界面的记事本 含有简单的文字编辑功能 如 剪切、复制、粘贴、删除 还能实现保存、另存为、设置字体和颜色等功能。2、 本程序要构建的记事本程序参照了 Windows 操作系统的记事本工具 其功能有以下几个方…

响应式网页设计

viewport 定义 可视区域移动端:布局视口(大部分980px)/理想视口(视口宽度设备宽度)设置 <meta name"viewport" content"widthdevice-width,initial-scale1.0"> 设置选项 width 视口宽度 通常设置为device-widthheight 视口高度initical-calse 初始化…

MQFaultStrategy主要是用来规划消息发送时的延迟策略

这个类主要是用来规划消息发送时的延迟策略 package com.aliyun.openservices.shade.com.alibaba.rocketmq.client.latency;import com.aliyun.openservices.shade.com.alibaba.rocketmq.client.impl.producer.TopicPublishInfo; import com.aliyun.openservices.shade.com.ali…

[原创]Zenoss配置入门-邮件短信通知

前言&#xff1a;Zenoss提供了强大的事件告警通知功能&#xff0c;它提供两种方式&#xff0c;Email和pages(短信还是BB机&#xff1f;&#xff09;。Email实时性不强&#xff0c;Pages又不知道怎么去配置&#xff0c;可能需要短信网关之类的吧。如何让zenoss的事件能第一时间通…

img=img%3e128 matlab,Matlab中一般的数值计算和使用

前言Matlab中的计算可以分为符号计算和数值计算前面所讲的都是数值计算,今天我们来讲关于符号计算符号计算的第一步就是定义符号syms a,b,c %定义多个符号变量a,b,csym(a) %定义单个符号变量一些常用的函数limitlimit(f):x趋于0时,函数f(x)的极限limit(f,x,a)或limit(f,a) :x趋…

spring boot 读取 application.properties 初始化bean

application.properties bean1.hello 你好~bean2.name name bean2.title titlebean3.info[name] name bean3.info[title] title bean3.info[age] agebean4.info[0] name0 bean4.info[1] name1 bean4.info[2] name2 bean4.info[3] name3BeanController Rest…

基于SOA的体系架构设计

当我在为全球酒店在线预订系统做架构设计时&#xff0c;我发现一个头疼的问题是如何保证系统与分布在全球各地的酒店之间完成消息的交互&#xff1f; 一个妥协的办法是&#xff0c;我们为酒店管理者提供管理功能入口&#xff0c;管理人员可以将酒店的客房及客房类型的数据输入到…

k8s pod MySQL环境变量,如何使用Kubernetes的configmap通过环境变量注入到pod里

在Kubernetes官网里&#xff0c;有这样一篇文章&#xff0c;提到了Kubernetes里的一个最佳实践就是把应用代码同配置信息分开&#xff0c;一种方式就是使用Kubernetes 1.2里引入的configmap概念。configmap实际上就是一系列键值对&#xff0c;存储于etcd里。etcd的官网有这样一…

将tomcat添加到服务中

转载自&#xff1a;http://blog.csdn.net/zjd934784273/article/details/47701011&#xff08;windows&#xff09; &#xff1a;http://www.cnblogs.com/ilahsa/p/linux.html(linux) (windows)一定要以管理员的身份启动cmd dos窗口进行操作如何将解压缩版的tomcat加入windows系…

软件开发者面试百问

想雇到搞软件开发的聪明人可不容易。万一一不小心&#xff0c;就会搞到一堆低能大狒狒。我去年就碰到这种事了。你肯定不想这样吧。听我的&#xff0c;没错。在树上开站立会议门都没有。问点有难度的问题能帮你把聪明人跟狒狒们分开。我决定把我自己整理出来的软件开发者面试百…

matlab模糊推理,模糊推理系统的matlab代码

【实例简介】该文件包中包含了6个文件&#xff0c;分别为不同的模糊推理系统&#xff0c;主要是用matlab编写的【实例截图】【核心代码】fuzzy└── fuzzy├── 158113737anfisExample_book-│ ├── anfisExample_book.m│ └── ANFIS.pdf├── 794830365fuzzpid│ …

编译原理 实例

http://www.cnblogs.com/nzhl/category/824732.html转载于:https://www.cnblogs.com/zengkefu/p/7337226.html

你不了解PHP的10件事情

你不了解PHP的10件事情,转自http://www.ccvita.com/302.html 看到有人翻译的《10 things you (probably) didn’t know about PHP》&#xff0c;发现在此次之前2、8两条并不知道&#xff0c;1、3虽然熟知但是去没有实际应用。由于阅读本blog的绝大多数朋友都是有PHP基础的&…

Node mysql

const mysql require("mysql");var conn mysql.createConnection({ host:"127.0.0.1", user:root, password:, database:jd, port:3306});//2:发送sql//conn.query("INSERT INTO jd_user VALUES(null,?,?)",[tom,123],(err,result)>{ //i…

matlab中提取裂缝图像,灰度图像中裂缝自动识别和检测方法与流程

本发明属于测绘科学与图像处理的交叉领域&#xff0c;特别是涉及一种灰度图像中裂缝自动识别和检测方法。主要应用于桥墩表面裂缝自动识别和检测&#xff0c;也可应用于隧道衬砌、大坝表面的裂缝检测和识别。背景技术&#xff1a;桥墩在使用过程中在载荷和自然环境的共同作用下…