CSS-如何只针对父母而不是孩子

CSS-如何只针对父母而不是孩子,css,menu,hover,parent,Css,Menu,Hover,Parent,我有以下代码: /*TOPMENU*/ #menu_wrap{height: 80px; width:80%; float: left; position:relative;} #topmenu{width:100%; float:left; } #topmenu ul{ height: 70px; padding:0; position:relative; border-style:solid; border-width: 1px 0px 1px 0px;} /* height determ

我有以下代码:

/*TOPMENU*/
#menu_wrap{height: 80px; width:80%; float: left; position:relative;}
#topmenu{width:100%; float:left; }
#topmenu ul{ height: 70px; padding:0; position:relative; border-style:solid;
 border-width: 1px 0px 1px 0px;} /* height determines distance between 2 border lines               */
#topmenu ul li{ float:left; list-style-type:none; margin:15px;} 
#topmenu ul li a{ width: 100px; line-height: 22px; text-align:center; display: block; text-decoration:none; color:#a7a9ac; font-size:25px; text-transform:uppercase} /
#topmenu ul.menu > li a:hover{ height: 50px; background:#C8C1B7; color: #fff} //when you hover on menu items
//The line above this is what I'm working on

#topmenu ul .current-menu-item a{ color:#a7a9ac;} // color of HOME font
#topmenu ul .current-menu-item ul li{ background:#1e1e1e;padding:1px 0px;}
#topmenu ul .current-menu-item ul li a{padding:4px; background:none;color:#fff;}
#topmenu ul .current-menu-parent ul .current-menu-item{background:#3e3e3e repeat;}
#topmenu ul .current-menu-parent ul .current-menu-item a{ padding:4px; background:none;}
#topmenu ul .current-menu-parent ul .current-menu-item ul .menu-item a{ padding:4px;}
#topmenu ul .current-menu-item .current-menu-item .sub-menu li a{ padding:4px;background:none;}

#topmenu ul li ul{ position:absolute;width:200px; z-index:999999; display:none; padding-left:0; margin-left:-10px;}
#topmenu ul li ul li{ float:none; margin:0; padding:0px 0px; background:#9F988F ;  display:block; }
#topmenu ul li ul li a{ color:#fff; width: 186px;font-size:10px; font-weight:normal; padding:4px;}

/* #topmenu ul li ul li a, #topmenu ul li .sub-menu .current-menu-item a:hover:hover{background:#C8C1B7; color:#ffffff;  } */
#topmenu ul li ul li ul{left: 100%; margin-top:-10px; float:none; margin-left:0px; display:none;}
所以当我将鼠标悬停在主菜单项上时,我试图让主菜单项周围有一个矩形,但子菜单项也会出现这种情况。如何修改代码,使其只影响主菜单?我使用的是一个主题模板,所以我没有HTML,只有CSS


提前谢谢

没有HTML是很困难的,但是,您需要在CSS中使用直接选择器

如果您试图仅将矩形应用于父级
ul
,请使用:

#topmenu > ul:hover {
    /* style */
}
这将把CSS应用于
ul
,它是
#topmenu
的直接子菜单。因此,它不会将其应用于其他子项
ul

已更新..

添加以下内容

#topmenu ul.menu > li li a:hover {
    background: red;
}
如果您希望它与背景颜色相同

#topmenu ul.menu > li li a:hover {
    background: #C8C1B7;
}

ul将处理整个菜单宽度,这将在整个菜单上形成一个大矩形,而不仅仅是我悬停在上面的菜单项。@yahyanono理想情况下,这就是您的操作方式-您能提供一个实例吗。。?链接-任何内容。从我发布的链接中得到任何内容吗?@yahyanono链接在哪里?@yahyanono查看我的更新。。添加CSS-让我知道它是否有效。请发布您的最小HTML,并绝对确保您只发布了重现问题所需的最小CSS(在这两种情况下)。