css - 第三层 <ul> 没有响应 CSS

标签 css navigation html-lists

<分区>

你好,我有这段代码,但我无法发现为什么它没有响应我提供的 css,我试过 jsfiddle,但我不知道要寻找什么。

这是 css 也许有人可以告诉我为什么第 3 级和第 2 级 ul 没有响应

.nav-menus {height:auto;float:right;position:absolute;display:block;right:0;clear:both;}
#access {float:right;margin: 0px;right:0;height:78px;   }
#access .menu-header, div.menu {margin-left: 12px;background-color: #fff;}
#access .menu-header ul, div.menu ul {list-style: none outside none;margin: 0;padding: 0;}
#access .menu-header li, div.menu li {display: inline;list-style: none outside none;float: left;margin: 0 .5px;position: relative;}
ul#menu-header-menu li a {display: block;height:43px;padding:30px 15px 0 15px;}
ul#menu-header-menu li a:hover {  box-shadow: 0 20px 40px 0 rgba(255, 255, 255, 0.1) inset, 0 1px 1px 0 rgba(255, 255, 255, 0.05) inset;background-color:#fafafa;}
#access a {display: block;position: relative;height:68px;text-decoration:none;}
#access ul.sub-menu li:first-child {border:none;}
#access ul.sub-menu li { background: linear-gradient(to bottom, rgba(255, 255, 255, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%) repeat scroll 0 0 transparent;box-shadow: 0 1px 1px rgba(255, 255, 255, 0.03) inset; margin-bottom: 1px;border-top:1px solid #ddd;font-size:11.5px;margin:0;line-height:18px; }
#access ul.sub-menu li:last-child {border-bottom:none;}
#access ul ul ul.sub-menu {border:1px solid #ddd;border-radius:2px;margin-left:5px;}
#access ul.sub-menu {border-bottom-left-radius:2px;border-bottom-right-radius:2px;border:1px solid #ddd;display:none;left: 0;position: absolute;top: 78px;} 
#access ul ul {position: absolute;top: -9999em;}
#access ul ul li:hover ul { margin-left:180px;top:0; }
#access ul ul li {min-width: 160px;}
#access ul ul li ul { right: 100%; top: -2px; }
#access ul ul ul {right:160px;top: 0;position:relative;}
#access ul ul a {line-height: 1em;padding: 10px;min-width: 160px;font-weight:normal;text-transform:capitalize;height: auto;display:block;}
#access ul.sub-menu li:hover > a {background-color:#F9f9f9;}
#access ul li:hover > ul {display: block;}
#access ul.sub-menu li.current-menu-item > a, #access ul.sub-menu li.current-page-item > a, #access ul.sub-menu li.current-ancestor-item > a, #access ul.sub-menu li.current-menu-parent > a, #access ul.sub-menu li.current-menu-ancestor > a, #access ul.sub-menu li > a:hover {border-top:1px solid #ececec;border-bottom:1px solid #ececec ;border-right:none;border-left:none;}
#access ul li.current_page_item > a, #access ul li.current-menu-ancestor > a, #access ul li.current-menu-item > a, #access ul li.current-menu-parent > a {z-index:10;  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);background-color:#fafafa;border-top:1px solid #eee;border-right:1px solid #ddd;border-left:1px solid #ddd;}
* html #access ul li.current_page_item a, * html #access ul li.current-menu-ancestor a, * html #access ul li.current-menu-item a, * html #access ul li.current-menu-parent a, * html #access ul li a:hover {}

这是 fiddle

http://jsfiddle.net/qbr8c/

最佳答案

第 3 级和第 2 级 UL 发生了什么变化?它们是否继承了 1st UL 的样式?

这可能是特异性问题。

#access .menu-header ul

更具体
#access ul ul

关于css - 第三层 <ul> 没有响应 CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13413796/

上一篇:javascript - 在网站中设计图像幻灯片

下一篇:html - 导航菜单的选定/当前状态

相关文章:

css - 具有多种背景选择的响应图像

javascript - 动态改变位置angular.js

c# - 读取页面导航上传递的字符串数组

javascript - 使用这个 jQuery 动画菜单悬停超链接?

html - 使用 Chrome/IE 进行奇怪的顶部填充并显示 :inline on ul list

css - CSS按钮悬停动画是如何工作的?

javascript - 尝试使用关键帧动画应用过滤器

html - 如何让我的导航按钮保持事件状态?

css - 无序列表 : Limiting the number of List-items before starting a new column

html - 如何在列表元素中获取 2 个 div 元素以使用页面上的可用宽度?