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 ...
随机推荐
- matplotlib浅析
首先放出matplotlib的中英文文档: 中文:https://www.matplotlib.org.cn/ 英文:https://matplotlib.org/3.1.1/index.html M ...
- selenium(9)- Xpath的详细使用
什么是Xpath 官方:XPath 是一门在 XML 文档中查找信息的语言.XPath 用于在 XML 文档中通过元素和属性进行导航 [XPath 使用路径表达式来选取 XML 文档中的节点或者节点集 ...
- v-on事件修饰符
.stop阻止冒泡 .prevent阻止默认行为 .capture实现捕获触发事件的机制(从大到小) .self实现只有点击当前元素时,才能出发事件处理函数 .once只触发一次事件函数 .stop和 ...
- C#数据结构与算法系列(十五):排序算法(SortAlgorithm)
1.介绍 排序是将一组数据,以指定的顺序进行排序的过程 2.分类 内部排序法:指将需要处理的所有数据都加载到内部存储器中进行排序 外部排序法:数据量过大,无法全部加载到内存中,需要借助外部存储进行排序
- Github仓库如何选择开源许可证
Github仓库如何选择开源许可证 目录 Github仓库如何选择开源许可证 为什么需要开源许可证? 不使用开源许可证对于开发者有何影响? 不使用开源许可证对于项目的使用者有何影响? Github的开 ...
- MongoDB入门三
MongoDB字段问题 增删查改操作 删除一列操作db.RiderReaTimePositon.update({},{$unset:{'CreateTime':''}},false,true)db. ...
- 推荐一种通过刷leetcode来增强技术功底的方法
背景 如果前人认为这个一种学习提高或者检验能力的成功实践.而自己目前又没有更好的方法,那就不妨试一试. 而不管作为面试官还是被面试者,编码题最近越来越流行.而两种角色都需要思考的问题是希望考察什么能力 ...
- day10,day11—基本数据类型语法
一.整形 1. base #在16进制中的位置 num = "b" v = int(num, base=16) print(v) #11 2. bit_length() # 1 1 ...
- 错误C2280 Union:尝试引用已删除的函数
在编写Union共用体类型的时候,写了如下代码,在第5行出现错误: #include <iostream> #include <string> using namespace ...
- git和github入门指南(3.2)
3.3.解决多人协作开发过程中的代码冲突问题 1.在多人协作开发的项目中,每次开发之前每个人最好先同步更新一下github上最新的代码,可以减少冲突的概率 git pull 2.产生冲突 目前咱们演示 ...