Question

我有一个主菜单，我在悬停状态下出现下划线。但是我不希望它出现在子菜单类别中。

这是我的代码：

#menu_container { padding: 0px 0; text-align: center;  }
#menu_container a:hover{background: url("/main/nav.gif") repeat-x scroll 0px 20px transparent;}
#menu_container ul { list-style-type: none; margin: 0; padding: 0;  text-align: center; }
#menu_container ul li { margin-left: 15px; font-family: 'Lato', sans-serif; font-weight: 900;  font-size: 1.2em; color: #000; position: relative; padding-bottom: 10px; text-transform: uppercase; display: inline-block; letter-spacing:1px; }
#menu_container ul li:first-child { margin-left: 0; }
#menu_container ul li a { color: #000; text-decoration: none; display:inline-block; padding-bottom: 5px;  padding:10px; border-radius: 0px;}
#menu_container ul li a:hover { color: #000; -webkit-transition: background 0.5sease;-moz-transition: background 0.5sease;-ms-transition: background 0.5sease;-o-transition: background 0.5sease;transition: background 0.5sease;}
#menu_container ul li.current-menu-item a, 
#menu_container ul li.current_page_item a { color: #b9b9b9;}
#menu_container ul li ul { position: absolute; top: 35px; left: 0;   padding: 1px 1px; z-index: 25; display: none; border-radius: 3px; text-align: left; }

Answer 1

我认为你要求这个：

#menu_container ul li a { text-decoration: none; ...}
#menu_container ul li a:hover { text-decoration: underline; ... }    
#menu_container ul li li a:hover { text-decoration: none; ... } /* no hover underline on sublinks */

基本思想是选择者特异性。特定的上下文选择器（#menu_container ul li li a）会覆盖更通用的定义（#menu_container ul li a）。

参见CSS优先级方案：
http://en.wikipedia.org/wiki/Cascading_Style_Sheets#CSS_Priority_scheme_.28highest_to_lowest.29

悬停样式仅出现在主菜单而不是子菜单上？

1 个答案: