2013-10-04 79 views
0

我有這樣的代碼:CSS - 如何解決只有父母,而不是孩子

/*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。

在此先感謝!

+0

請發表您的最小HTML ,並且絕對確定你已經發布了只有最低要求的CSS([sscce](http://sscce.org/))來重現你的問題。 –

回答

2

沒有它是困難的,但是,你將需要使用CSS直接選擇的HTML ..

如果你想在矩形只適用於父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; 
} 
+0

ul會解決整個菜單的寬度,這會導致整個事物出現一個大的矩形,而不僅僅是我懸停的菜單項。 – robotturtle

+0

@yahyanono理想情況下,你就是這麼做的 - 你能提供一個生動的例子..?鏈接 - 任何東西。 –

+0

從我發佈的鏈接中得到了什麼? – robotturtle

相關問題