html - 如何将css id保留为css中的 'li'

Question

下面的垂直导航工作完美但是。我想更改 html 代码从

<ul id="menu">
<li ><a href=""><span>Hello</span></a></li>
<li ><a href=""><span>Hello</span></a></li>
<li ><a href=""><span>Hello</span></a></li>
<li ><a href=""><span>Hello</span></a></li>
</ul>

到

<ul>
<li id="menu" ><a href=""><span>Hello</span></a></li>
<li id="menu"><a href=""><span>Hello</span></a></li>
<li id="menu"><a href=""><span>Hello</span></a></li>
<li id="menu"><a href=""><span>Hello</span></a></li>
</ul>

这是行不通的。我想保留 li 的 id 而不是 ul 。如果我将 id 传递给 li，它不会显示图像。

http://jsfiddle.net/Z7hdB/

#menu ul
{
margin: 0px;
padding: 0px;
list-style-type: none;
}

#menu a
{
display: block;
color: #333;
height:30px;
font-size:12px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  background: #ffffff;

border-bottom: 1px solid #ccc;
overflow:hidden;
width: 100%;
height: 2.72em;
line-height: 2.75em;
text-indent: 2em;
text-decoration: none;
}

#menu a:hover
{

background:#ffffff;
background:-moz-linear-gradient(top,  #ffffff 0%, #f6f6f6 47%, #ededed 100%); 
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff),  color-stop(47%,#f6f6f6), color-stop(100%,#ededed)); 
background:-webkit-linear-gradient(top,  #ffffff 0%,#f6f6f6 47%,#ededed 100%); 
background:-o-linear-gradient(top,  #ffffff 0%,#f6f6f6 47%,#ededed 100%); 
background:-ms-linear-gradient(top,  #ffffff 0%,#f6f6f6 47%,#ededed 100%);
background:linear-gradient(to bottom,  #ffffff 0%,#f6f6f6 47%,#ededed 100%); 
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff',  endColorstr='#ededed',GradientType=0 ); 
 color:#266CAE
}
#menu li a{ background:url('http://s11.postimg.org/dmj1ubnrz/button22.png') no-repeat ;
 background-position:0% 50%;
}

#menu li a:hover{ background:url('http://s7.postimg.org/ajm07zk2v/button33.png') no-repeat   ;
background-position:0% 50%;
}

Answer 1

您不能有超过 1 个具有相同 ID 的元素，您需要给 li 一类“菜单”...然后在您的 css 中将“#menu li a”更改为“.menu a”