How to keep css id to the 'li' in css


Tags: html,css,css3

Problem :

The below vertical navigation work perfect but. i would like to change the html code from

<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>

to

<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>

It doesn't works. I would like to keep the id for li not for ul . Is i pass id to li ,it doesn't show the image.

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


Solution :

You cant have more than 1 item with the same id, you will want to give the li a class of "menu"... then in your css change "#menu li a" to ".menu a"


    CSS Howto..

    How to add style or put a class in a php form_submit button

    How to get different style in nested element depending to depth level?

    How to get glyphicons working in twitter-bootstrap?

    Rails 4 - how to write a helper method

    How to show hidden div when javascript is disabled?

    How to restrict ol, ul css to a div?

    How to make label inside div to be in the same position as lower ones

    W3.CSS how to get a standard header-[left-right]footer layout?

    How to get the kendo NumericalTextBox to share the width of a table cell the same way the kendo DropDownList does?

    CSS+HTML: How to draw table/cell border

    How do I get the height to the full page height?

    Show div when hover another div using only css

    What's the idea behind image sprites, how to approach it?

    How to make CSS file more important than another CSS file? [closed]

    How can I override an inline CSS rule using an external file?

    How to use :before for the third
  • element?
  • How to center a IMG tag horizontaly and vertically using html and css in ie7?

    How to fade out text on top of semi-transparent div using CSS?

    How to put text over Image

    How do CSS radio tabs work?

    css - why my text box is not showing up?

    How to make the gif photo to be same width as the table?

    How can I add some css to center certain divs if they are using the same css style? [duplicate]

    how to make a left aligned navigation with dropdown elements

    How can I edit adjacent selector to a nested one

    How to center post title in blogger. (tried applying CSS)

    How to use CSS calc according to a certain amount of li's?

    How to adjust the width of a DIV per height using CSS

    How to chose which CSS rule to use from multiple style sheets

    How to pass array from method to property using PHP