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 ...
随机推荐
- 这一次搞懂Spring自定义标签以及注解解析原理
前言 在上一篇文章中分析了Spring是如何解析默认标签的,并封装为BeanDefinition注册到缓存中,这一篇就来看看对于像context这种自定义标签是如何解析的.同时我们常用的注解如:@Se ...
- APP——python——自动化环境搭建01
前提:python以及pycharm安装完成. ---------------------------------------------------------------------------- ...
- MyBatis一对多嵌套list返回结果集以及分页查询问题处理
这两天在整理原有系统接口时,遇到后端的人员-角色-菜单的权限接口没有进行连表的关联查询操作,前端拿数据非常不方便,现在将接口相关sql进行修改并让前端可以一次性拿到想要的数据 原有的单表简单sql: ...
- JavaWeb网上图书商城完整项目-数据库操作工具类
1.首先安装数据库,在windows上安装和在unix上面安装环境不一样,我在自己的本地电脑上安装,安装成功之后,如果使用navicat远程工具访问,需要允许mysql远程能被访问 方法二.直接授权( ...
- 【SpringMVC】
前言
- 入门大数据---Flume的搭建
一.下载并解压到指定目录 崇尚授人以渔的思想,我说给大家怎么下载就行了,就不直接放连接了,大家可以直接输入官网地址 http://flume.apache.org ,一般在官网的上方或者左边都会有Do ...
- 入门大数据---PySpark
一.前言 前面我们学习的是使用Scala和Java开发Spark.最近补充了下Python基础,那么就用Python开发下Spark.Python开发Spark简称PySpark. 二.环境准备 1. ...
- Shader专题:卡通着色(一)控制颜色的艺术
什么是 Shader? 关于什么是 Shader ,各种百科各种教程都有说过,但是今天我们就从一个另一个角度去试着理解什么是 Shader? 我们先看下 Shade 的英文意思,如下: v.给...遮 ...
- C# 接口(interface) 抽象类(abstract)
类代码: interface Employee { void ShowEmp(); } abstract class EmployeeInPostion: Employee { public abst ...
- js统计字符
问题: var str1 = "abcdabcabcaabeeeeeee"; var str2 = "fhjdiovjdasklgudsaklfgdaskl ...