HTML / CSS / PHP子菜单着色(HTML/CSS/PHP Submenu coloring)

HTML / CSS / PHP子菜单着色(HTML/CSS/PHP Submenu coloring)

找不到我的菜单有什么问题。 我希望当你悬停子菜单项时，背景颜色仅适用于子菜单而不适用于菜单项。 我试过这里的一切都是菜单css。

我试过#menu ul li a:hover但仍影响菜单项和子项.....我只需要子项目。

#menu { list-style: none; padding-right: 8%; float: right; padding-top: 3.5%; clear: right; text-indent: 10px; } #menu ul { list-style:none; position:relative; float:left; margin:0; padding:0 } #menu ul a { display: block; color: #FFF; text-decoration: none; font-weight: 700; font-size: 12px; line-height: 32px; padding: 0 15px; font-family: "HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif } #menu ul li { position: relative; float: left; margin: 0; padding: 0; } #menu ul li.current-menu-item { } #menu ul li:hover { } #menu ul ul { display: none; position: absolute; top: 92%; left: -64%; padding: 0; background-color: #4d4d4d; } #menu ul ul li { float: none; width: 190px; } #menu ul ul a { line-height: 120%; padding: 10px 15px; } #menu ul ul ul { top: 0; left: 100%; } #menu ul li:hover > ul { display: block; }

<?php $args = array( 'theme_location' => 'pre_primary' ); ?> <?php wp_nav_menu( $args); ?>

Can't find what is wrong with my menu. I want that when you hover a sub menu item background color would be only for submenu not for menu items. I tried everything here is menu css.

I tried #menu ul li a:hover but still affect menu items and sub items..... And I need only subitems.

#menu { list-style: none; padding-right: 8%; float: right; padding-top: 3.5%; clear: right; text-indent: 10px; } #menu ul { list-style:none; position:relative; float:left; margin:0; padding:0 } #menu ul a { display: block; color: #FFF; text-decoration: none; font-weight: 700; font-size: 12px; line-height: 32px; padding: 0 15px; font-family: "HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif } #menu ul li { position: relative; float: left; margin: 0; padding: 0; } #menu ul li.current-menu-item { } #menu ul li:hover { } #menu ul ul { display: none; position: absolute; top: 92%; left: -64%; padding: 0; background-color: #4d4d4d; } #menu ul ul li { float: none; width: 190px; } #menu ul ul a { line-height: 120%; padding: 10px 15px; } #menu ul ul ul { top: 0; left: 100%; } #menu ul li:hover > ul { display: block; }

<?php $args = array( 'theme_location' => 'pre_primary' ); ?> <?php wp_nav_menu( $args); ?>

最满意答案

使用直接子选择器！

#menu > ul > li > a:hover
Use immediate child selector!
 
#menu > ul > li > a:hover