css导航菜单二级显示的问题
m项目中出现了二级菜单的标签是在导航的里面,用css
ul>li:hover ul>li>ul>li
这样子实现不了鼠标经过时导航里二级菜单的显示,这里个人感觉是冲突了。最后通过在二级菜单添加类名“nar”
.nav>ul>li:hover .nar{
display: block;
background-color: salmon;
}
这才实现了这个效果

完成后的css片段代码
.nav{
width: 1180px;
height:44px;
line-height: 44px;
background:-webkit-linear-gradient(left,#034DA4,#7B99DA,#034DA4);
margin: 0 auto;
position: relative;
z-index:;
}
.nav>ul>li{
float: left;
}
.nav>ul>li>a{
display: block;
width: 118px;
text-align: center;
font-size: 14px;
font-weight: bold;
color: #fff;
}
.nav>ul>li>ul{
position: absolute;
z-index:;
display: none;
}
.nav>ul>li:hover .nar{
display: block;
background-color: salmon;
}
html代码:
<ul class="nav">
<li>
<a href="">首页</a>
</li>
<li>
<a href="">概况</a>
<ul class="nar">
<li><a href="#">学校</a></li>
<li><a href="#">机构</a></li>
<li><a href="#">校务</a></li>
<li><a href="#">荣誉</a></li>
</ul>
</li>
</ul>
css导航菜单二级显示的问题的更多相关文章
- 在 jQuery 中使用滑入滑出动画效果,实现二级下拉导航菜单的显示与隐藏效果
查看本章节 查看作业目录 需求说明: 在 jQuery 中使用滑入滑出动画效果,实现二级下拉导航菜单的显示与隐藏效果 用户将光标移动到"最新动态页"或"帮助查询" ...
- CSS导航菜单水平居中的多种方法
CSS导航菜单水平居中的多种方法 在网页设计中,水平导航菜单使用是十分广泛的,在CSS样式中,我们一般会用Float元素或是「display:inline-block」来解决.而今天主要讲解如何让未知 ...
- HTML5 div+css导航菜单
HTML5 div+css导航菜单 视频 音乐 小说 故事 作品 阅读 联系
- 强烈推荐一款CSS导航菜单
强烈推荐一款CSS导航菜单,用到政府学校类网站上超级不错,有点类似站长网菜单的味道,只不过颜色不一样而已,这种菜单还不是真正意义上的“下拉”菜单,应该叫滑出菜单吧?反正比较不错,不多说了. <! ...
- css 导航菜单+下拉菜单
一.导航菜单 1.横向导航 代码如下: <!doctype html> <html> <head> <meta charset="utf-8&quo ...
- CSS导航菜单(二级菜单)
index.html <div class="nav"> <ul> <li> <a href="#">Java& ...
- CSS导航菜单(一级菜单)
index.html <div class="nav"> <ul> <li><a href="#">Java&l ...
- 纯CSS实现二级下拉导航菜单
这是一款纯CSS菜单,二级下拉导航效果,是最简洁的CSS导航菜单,兼容性也很棒,IE7/8.火狐等都支持,而且它还是学习CSS菜单编写的典型教程,让你学会很多CSS技巧. 运行效果截图如下: < ...
- jQuery垂直二级导航菜单代码
http://www.sucaihuo.com/js/395.html 分享一个简单的垂直二级菜单导航. HTML <div id="my_menu" class=&qu ...
随机推荐
- python_lesson1 数学与随机数 (math包,random包)
math包 math包主要处理数学相关的运算.math包定义了两个常数: math.e # 自然常数e math.pi # 圆周率pi 此外,math包还有各种运算函数 (下面函数的功能可以 ...
- 这一次搞懂Spring代理创建及AOP链式调用过程
文章目录 前言 正文 基本概念 代理对象的创建 小结 AOP链式调用 AOP扩展知识 一.自定义全局拦截器Interceptor 二.循环依赖三级缓存存在的必要性 三.如何在Bean创建之前提前创建代 ...
- ubuntu启动打开终端快捷键
ubuntu启动打开终端快捷键 CTRL+ALT+T
- ca13a_c++_顺序容器的操作6删除元素
/*ca13a_c++_顺序容器的操作6删除元素c.erase(p) //删除迭代器p指向的位置c.erase(b,e) //删除b to e之间的数据,迭代器b包括,e不包括c.clear()//删 ...
- Meteva——让预报检验不再重复造轮子
更多精彩,请点击上方蓝字关注我们! 检验是什么?****预报准确率的客观表达 说到天气预报,你最先会想到什么? 早上听了预报,带了一天伞却没下一滴雨的调侃? 还是 "蓝天白云晴空万里突然暴风 ...
- Dubbo的使用及原理
Dubbo是什么? Dubbo是阿里巴巴SOA服务化治理方案的核心框架,每天为2,000+个服务提供3,000,000,000+次访问量支持,并被广泛应用于阿里巴巴集团的各成员站点. Dubbo[]是 ...
- skywalking的核心概念
在 SkyWalking 中,TraceSegment 是一个介于 Trace 与 Span 之间的概念,它是一条 Trace 的一段,可以包含多个 Span.在微服务架构中,一个请求基本都会涉及跨进 ...
- Python初识类与对象
Python初识类与对象 类与对象 世界观角度分析类与对象 类是一个抽象的概念,而对象是一个实体的存在,对象由类创造而出,每个对象之间互相独立互不影响,一个对象可以同时拥有多个类的方法,实例化就是通过 ...
- python 给视频添加马赛克
用法: 1. 创建空文件夹:imgs 2. 将倒数第三行中的"222056.mov"改为你的视频路径,如:"a.mov" 3. 运行以下代码 4. 稍等片刻,鼠 ...
- dart快速入门教程 (8)
9.dart中的库 9.1.自定义库 自定义库我们在前面已经使用过了,把某些功能抽取到一个文件,使用的时候通过import引入即可 9.2.系统内置库 以math库为例: import "d ...