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 ...
随机推荐
- 【JMeter_22】JMeter逻辑控制器__录制控制器<Recording Controller>
录制控制器<Recording Controller> 个人感觉录制的脚本缺陷太明显,没有研究过,暂不做介绍,等后续空了研究后再写
- Linux 查看日志的时候常用命令总结
Linux ~ 查看日志的常用命令总结 1.tail -n <行数>,显示文件的尾部n行内容. -f 循环读取,常用于查阅正在改变的日志文件. ① tail -f test.log ...
- ThinkPHP5使用PHPExcel实现数据导出功能
1.将PHPExcel类库文件夹放入extend目录下 2.导出功能实现 public function download(){ if(request()->isPost()){ $val = ...
- IOC/DI概念简述及基本应用
早几年面试时,面试官经常问我依赖注入的概念,但有面试官自己都不是很清楚ioc和di的区别,而是草草归于一类,今天翻了翻以前写的demo,顺便把这部分概念整理出来,加深一下印象. 先科普一下,IOC是什 ...
- Python-argparse模块-获取命令行参数
#!/usr/bin/python3 """ Author : Jet Bi License : www.cyeap.com Summary : 获取命令行的参数 Not ...
- EnvironmentPostProcessor
概览 SpringBoot支持动态的读取文件,留下的扩展接口 org.springframework.boot.env.EnvironmentPostProcessor,进行配置文件的集中管理,从而避 ...
- 堆/题解 P3378 【【模板】堆】
概念: 堆就是一颗二叉树,满足父亲节点总是比儿子节点大(小).因此,堆也分为大根堆和小根堆,大根堆就是父亲节点比儿子节点大,小根堆正好相反.注意加粗的地方,是每一个节点哦!!!!! 还是直接看例题吧, ...
- win中mysql安装
mysql安装: https://www.mysql.com/>官网 下载 [DOWNLOADS]----[MySQL Community Server]社区版---5.6---No thank ...
- JavaScript图形实例:Koch曲线
Koch曲线的构造过程是:取一条长度为L0的直线段,将其三等分,保留两端的线段,将中间的一段改换成夹角为60度的两个等长直线:再将长度为L0/3的4个直线段分别进行三等分,并将它们中间的一段均改换成夹 ...
- 腾讯T8纯手写66个微服务架构设计模式,全部学会真的“变强”了
微服务的概念虽然直观易懂,但“细节是魔鬼”,微服务在实操落地的环节中存在诸多挑战.我们在为企业提供PaaS.人工智能.云原生平台等数字化转型解决方案时也发现,企业实现云原生,并充分利用PaaS能力的第 ...