如何设置的图像时，我们选择子菜单

我有一个任务来创建菜单。这里我想在选择其子菜单时将箭头图像设置为菜单。我用这个图像做了一个例子，但我想从那个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

如何设置的图像时，我们选择子菜单

回答

相关问题