0

li ul メニューを作成しましたが、完全に機能しています。ただし、以下のコードの最後の li には別の背景が必要です。

問題の li に style="background-color:#F00" を追加しようとしましたが、うまくいきません。

これを行う方法を知っている人はいますか？

前もって感謝します、

<!DOCTYPE html>

<html>

<head>

<style type="text/css">

#cssmenu {
background:#a8ac9d;
width: 270PX;
}
#cssmenu > ul {
padding:1px 0;
margin:0px;
list-style:none;
width:270px;
height:21px;
font:normal 8pt verdana, arial, helvetica;
}
#cssmenu > ul li {
margin:0;
padding:0;
display:block;
float:left;
position:relative;
width:270px;
}
#cssmenu > ul li a:link, #cssmenu > ul li a:visited {
padding:4px 0;
display:block;
text-align:center;
text-decoration:none;
background:#a8ac9d;
color:#ffffff;
width:270px;
height:13px;
}
#cssmenu > ul li:hover a, #cssmenu > ul li a:hover, #cssmenu > ul li a:active {
padding:4px 0;
display:block;
text-align:center;
text-decoration:none;
background:#a8ac9d;
color:#ffffff;
width:270px;
height:13px;
}
#cssmenu > ul li ul {
margin:0;
padding:0px 0px 0;
list-style:none;
display:none;
background:#a8ac9d;
width:270px;
position:absolute;
top:21px;
left:0px;
}
#cssmenu > ul li:hover ul {
display:block;
width: 270PX;
}
#cssmenu > ul li ul li {
width:146px;
clear:left;
width:270px;
}
#cssmenu > ul li ul li a:link, #cssmenu > ul li ul li a:visited {
clear:left;
padding:4px 0;
width:270px;
position:relative;
z-index:1000;
}
#cssmenu > ul li ul li:hover a, #cssmenu > ul li ul li a:active, #cssmenu > ul li ul li a:hover {
clear:left;
background:#a8ac9d;
padding:4px 0;
width:270px;
position:relative;
z-index:1000;
}
</style>

</head>

<body>

<div id='cssmenu'>
<ul>
<li><a href='#'><span>Products</span></a>
<ul>
<li><a href='#'><span>Product 1</span></a></li>
<li style="background-color="#F00"><a href='#'>Product 2</a></li>
</ul>
</li>
</ul>
</div>

</body>

</html>
4

3 に答える 3

2

a tagの中にあるのためにそれを書く必要がありますli

これを追加

#cssmenu ul li ul li:last-child a{
background:red
}

デモ

于 2013-01-23T10:50:42.733 に答える
2

詳しくは読んでいませんが、一見、この行が問題です。

<li style="background-color="#F00"><a href='#'>Product 2</a></li>

する必要があります

<li style="background-color:#F00"><a href='#'>Product 2</a></li>

編集：上記のコードは機能しません!!! 背景色を持つ要素が であるためです。ですから、これに変更する必要があります。

<li><a href='#' style="background-color:#F00">Product 2</a></li>
于 2013-01-23T10:47:23.620 に答える
0

属性を記述する場合style、従うべき構文は css のとおりです。あなたが書いたstyle="background-color="#F00"、そしてそれはあるべきですstyle="background-color: #F00"

于 2013-01-23T10:49:44.580 に答える