如何設置的圖像時，我們選擇子菜單

我有一個任務來創建菜單。這裏我想在選擇其子菜單時將箭頭圖像設置爲菜單。我用這個圖像做了一個例子，但我想從那個onload中刪除那個圖像，並在我們選擇它的子菜單時顯示它。只應顯示選定的菜單圖像。如何設置的圖像時，我們選擇子菜單

我的CSS文件

#menu { 
    font-family: Arial; 
    font-size: 12px; 
    //background: #F8F8F8; 
} 
#menu > li > a { 
    font-family: Verdana, Arial, sans-serif; 
    font-style: normal; 
    color:#787878; 
    font-weight: bold; 
} 
#menu > li > a:hover { 
    color: #000; 
} 
#menu ul { 
    background: none repeat scroll 0 0 #FFFFFF; 
    border-radius: 0 0 5px 5px; 
    margin-top: 1px; 
} 
#menu ul li a { 
    color: #000; 
} 
#menu ul li a:hover { 
    background: #E0E0E0; 
} 
.logout { 
    float:right; 
    width:300px; 
} 
.title { 
    float:left; 
    width:300px; 
} 
#footer { 
    width:100%; 
    height:100px; 
    float:left; 
} 
.subchild-list { 
    margin:0; 

    position: absolute !important; 
    top:0; 
    right:-87px; 
    //border-color: #ccC#FFFFFF #ccC#FFFFFF; 
} 
.child-list ul { 
    display: none !important; 
    position: absolute !important; 
    z-index: 999 !important; 
} 
.child-list li { 
    position:relative !important; 

} 
.child-list li:hover ul { 
    display: block !important; 
} 

.child-list li{ 

    border-left:1px solid #C0C0C0; 
    border-right:1px solid #C0C0C0; 
} 

.child-list ul{ 
    border-top:1px solid #C0C0C0; 
    border-bottom:5px solid #C0C0C0; 
} 

.child-list{ 
    border-bottom:5px solid #C0C0C0; 
} 
.nav-subchild 
{ 
    border-color: #ccC#FFFFFF #ccC#FFFFFF; 
} 
#nav > ul > li:hover { 
border-color: #ccC#ccC#FFFFFF; 
border-style: solid; 
border-width: 1px; 
padding-bottom: 0; 
border-radius:1px; 
} 

#menu > li { 
border-bottom:#ccc; 
border-left: 1px solid #fff; 
border-right: 1px solid #fff; 
border-top: 1px solid #fff; 
} 
#nav ul li:hover ul { margin-left:-1px; } #nav ul li ul:hover { margin-left:-1px; } 
ul li ul li 
{ 
    width: 180px; 
} 
.subchild-list { 
    margin:0; 
    right:-183px; 
    position: absolute !important; 
    top:0; 
} 
.hassub { 
    background: url('arrow.gif') right no-repeat; 
} 
#menu li:hover > a { 
    color: #000; 
     font-weight:bold; 
}

我怎樣才能解決這個問題？

來源

2013-03-04 Niths

所以基本上你想要它做的就是它的關於'>'現在在做相反？ – 2013-03-04 05:44:02

我沒有得到你... – Niths 2013-03-04 05:45:44

現在只要定義這個CSS

#menu .child-list > li:hover > a { 
background: #E0E0E0 url(http://www.coeliac.org.uk/sites/coeliac.org.uk/themes/coeliac/images/icon_arrow_small_right.gif) right no-repeat; 
}

Live Demo

來源

2013-03-04 05:46:33

您的代碼right.But我不希望這樣。當我選擇'主'的孩子時，那麼箭頭圖像應該出現在'主'菜單上。否則沒有圖像。 – Niths 2013-03-04 05:49:48

查看我的回答.. – 2013-03-04 05:56:29

@Nithu你好我更新了我的安塞爾，請檢查它... – 2013-03-04 06:00:11

這是爲數不多的變化

#menu ul li a:hover { 
    // background: #E0E0E0; 
    background:url(http://www.coeliac.org.uk/sites/coeliac.org.uk/themes/coeliac/images/icon_arrow_small_right.gif) right no-repeat; 
} 

.hassub { 
// background: //url(http://www.coeliac.org.uk/sites/coeliac.org.uk/themes/coeliac/images/i//con_arrow_small_right.gif) right no-repeat; 
}

Live Demo

來源

2013-03-04 05:54:11

當我選擇subchild我不明白哪一個是它的父母菜單。所以當我選擇該菜單時，箭頭必須出現在父菜單上 – Niths 2013-03-04 05:57:25

看一看這個..

#menu ul li a:hover { 
    background:url(http://www.coeliac.org.uk/sites/coeliac.org.uk/themes/coeliac/images/icon_arrow_small_right.gif) right no-repeat #E0E0E0; 
    }

Live Demo

來源

2013-03-04 06:19:32

您知道如何將箭頭圖像設置在菜單的中心嗎？ – Niths 2013-03-04 06:23:06

你有沒有嘗試過CSS屬性BACKGROUND-POSITION？ – 2013-03-04 06:30:07

如何設置的圖像時，我們選擇子菜單

回答

相關問題