1

下面的垂直导航工作完美但是。我想从

<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%;
}
4

3 回答 3

0

一开始id应该是独一无二的

你正在寻找的是class

于 2013-06-16T10:39:12.890 回答
0

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

于 2013-06-16T10:40:49.277 回答
0

这是错误的，ID必须使用一次！

但看到这个：http: //jsfiddle.net/Z7hdB/4/

于 2013-06-16T10:50:43.410 回答