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. 在Unix系统中执行可执行文件

    这篇文章是我在一个叫做Charlotte数据挖掘的公众号上看到的文章,文首提到转载自"朱小厮的博客",当我今天执行一个自己编译的可执行文件后的运行阶段想到了这篇文章,直接一次成功. ...

  2. gulp压缩html,css,js文件流程、监听任务、使用gulp创建服务器、同时运行多个任务、反向代理

    一.初始化 首先先做一个项目初始化,用来记录你项目中用到的工具 再你项目文件下打开一个控制台,输入命令 yarn init -y 进行初始化 输入命令yarn add gulp -g  --- 全局安 ...

  3. MFC基于CAsyncSocket套接字客户端代码示范

    MFC基于CAsyncSocket套接字客户端代码示范 https://blog.csdn.net/txwtech/article/details/93016190

  4. python基础--函数全解析

    函数(重点) (1)初始函数 在认识函数之前,我们先做如下的需求: 让你打印10次"我爱中国,我爱祖国".我们在接触函数之前是这样写的. print('我爱中国,我爱祖国') pr ...

  5. Azure Monitor(一)Application Insights

    一,引言 Azure Monitor 是 Azure 中的一项完整堆栈监视服务,是一种收集和分析遥测数据的服务.它提供了一组完整的功能来监视 Azure 资源以及其他云中和本地的资源.Azure Mo ...

  6. 慕课网--docker走进第一个javaweb应用

    zh docker镜像就是一系列文件的集合 docker 容器就是一个进程.将docker镜像运行起来就是一个docker容器 docker仓库就是存储docker镜像的 1.docker的安装 do ...

  7. SpringBoot--集成actuator

    actuator是spring boot项目中非常强大一个功能,有助于对应用程序进行监视和管理,通过 restful api 请求来监管.审计.收集应用的运行情况,针对微服务而言它是必不可少的一个环节 ...

  8. Scrapy框架简介及小项目应用

    今天来总结一下Scrapy框架的用法.scrapy的架构如下: Engine  :引擎,处理整个系统的数据流处理.触发事务,是整个框架的核心. Items :项目,它定义了爬取结果的数据结构,爬取的数 ...

  9. Oracle 存储过程中的临时表数据自动清空

    问题叙述: 用 EXECUTE IMMEDIATE 动态往临时表插入数据,跟踪发现插入临时表后数据会立马清空,按理说等存储过程执行完才会清空临时表才对,现在是执行插入语句后下一步验证就发现临时表就没有 ...

  10. Apache POI 操作Excel(1)--POI简介

    Apache POI(http://poi.apache.org/)是一个用于读取和编写Microsoft Office文件格式开源的Java项目,现在已经可以操作Excel,PowerPoint,W ...