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导航菜单二级显示的问题的更多相关文章

  1. 在 jQuery 中使用滑入滑出动画效果,实现二级下拉导航菜单的显示与隐藏效果

    查看本章节 查看作业目录 需求说明: 在 jQuery 中使用滑入滑出动画效果,实现二级下拉导航菜单的显示与隐藏效果 用户将光标移动到"最新动态页"或"帮助查询" ...

  2. CSS导航菜单水平居中的多种方法

    CSS导航菜单水平居中的多种方法 在网页设计中,水平导航菜单使用是十分广泛的,在CSS样式中,我们一般会用Float元素或是「display:inline-block」来解决.而今天主要讲解如何让未知 ...

  3. HTML5 div+css导航菜单

    HTML5 div+css导航菜单 视频 音乐 小说   故事 作品 阅读 联系

  4. 强烈推荐一款CSS导航菜单

    强烈推荐一款CSS导航菜单,用到政府学校类网站上超级不错,有点类似站长网菜单的味道,只不过颜色不一样而已,这种菜单还不是真正意义上的“下拉”菜单,应该叫滑出菜单吧?反正比较不错,不多说了. <! ...

  5. css 导航菜单+下拉菜单

    一.导航菜单 1.横向导航 代码如下: <!doctype html> <html> <head> <meta charset="utf-8&quo ...

  6. CSS导航菜单(二级菜单)

    index.html <div class="nav"> <ul> <li> <a href="#">Java& ...

  7. CSS导航菜单(一级菜单)

    index.html <div class="nav"> <ul> <li><a href="#">Java&l ...

  8. 纯CSS实现二级下拉导航菜单

    这是一款纯CSS菜单,二级下拉导航效果,是最简洁的CSS导航菜单,兼容性也很棒,IE7/8.火狐等都支持,而且它还是学习CSS菜单编写的典型教程,让你学会很多CSS技巧. 运行效果截图如下: < ...

  9. jQuery垂直二级导航菜单代码

    http://www.sucaihuo.com/js/395.html 分享一个简单的垂直二级菜单导航.   HTML <div id="my_menu" class=&qu ...

随机推荐

  1. vulstack红队评估(五)

    一.环境搭建: ①根据作者公开的靶机信息整理 虚拟机密码: Win7: heart 123.com    #本地管理员用户 sun\Administrator dc123.com    #域管用户,改 ...

  2. 06 . Jenkins分布式构建和Pipline

    Pipline简介 pipline 是帮助 Jenkins 实现 CI 到 CD 转变的重要角色,是运行在 jenkins 2.X 版本的核心插件,简单来 说 Pipline 就是一套运行于 Jenk ...

  3. 【Spring注解驱动开发】如何使用@Bean注解指定初始化和销毁的方法?看这一篇就够了!!

    写在前面 在[String注解驱动开发专题]中,前面的文章我们主要讲了有关于如何向Spring容器中注册bean的知识,大家可以到[String注解驱动开发专题]中系统学习.接下来,我们继续肝Spri ...

  4. matplotlib 强化学习

    matplotlib 强化学习 import matplotlib.pyplot as plt ...![](https://img2020.cnblogs.com/blog/1642028/2020 ...

  5. python 函数式编程 高阶函数 装饰器

    # -*- coding:gb2312 -*- #coding=utf-8 # 高阶函数 import math def is_sqr(x): y = int(math.sqrt(x)) return ...

  6. Java WebService _CXF、Xfire、AXIS2、AXIS1_四种发布方式(优缺点对比)

    xis,axis2,Xfire以及cxf对比 http://ws.apache.org/axis/ http://axis.apache.org/axis2/java/core/ http://xfi ...

  7. netty解决TCP的拆包和粘包的解决办法

    TCP粘包.拆包问题 熟悉tcp编程的可能知道,无论是服务端还是客户端,当我们读取或者发送数据的时候,都需要考虑TCP底层的粘包个拆包机制. tcp是一个“流”协议,所谓流就是没有界限的传输数据,在业 ...

  8. ECSHOP后台左侧添加菜单栏

    比如我们在后台中增加 “活动管理”功能,方法如下 在ECSHOP 管理中心共用语言文件 language\zh_cn\admin\commn.php ,添加我们的自定义菜单: $_LANG['17_a ...

  9. docker 安装mysql:latest 问题

    背景 周末闲着没事,然后想着在虚拟机用docker装个mysql吧.然后就开始安装了. 正文 打开dockerhub.com,在输入框输入mysql,选择mysql第一个,进入后找到How to us ...

  10. Zookeeper分布式过程协同技术 - 概念及基础

    Zookeeper分布式过程协同技术 - 概念及基础 Zookeeper是什么? Zookeeper是一种分布式过程协同技术,其所提供的客户端API功能强大,其中包括: 保障强一致性.有序性和持久性. ...