change z-index with javascript

i am making a website in php

i make left menu like this

these menu coming from database in one string. i 开发者_JAVA百科am printing it with echo. i use image as a background to each menu.

now i want like this

i have a arrow image.

i know i can do it with z-index. but i cant do it with only css. so i need a help to do it with javascript. i want to change the html using javascript or jquery

For an all CSS solution try to building your menu like this...

<style type="text/css">
  .menu li {
    background:url(path/to/gradient.png) top left repeat-x;
  }
  .menu li a {
    display:block;
    padding:2px 5px;
    backround:url(path/to/arrow.png) bottom right no-repeat;
  }
</style>


<ul class="menu">
  <li><a href="fanclub.php">Fan Club</a></li>
  <li><a href="blog.php">Blog</a></li>
  <li><a href="poll.php">Poll</a></li>
</ul>

If you must do your solution in JavaScript (which I suggest you avoid) you can access the z-index property of any element (that supports it) like so:

// DOM Scripting Example (Single Element)
myElement.style.zIndex = 1000;

// jQuery Example (All elements with the "arrow" class)
$('.arrow').css('z-index', 1000);

Using jquery:

$(function() {
    $('.myselectorclass').css('z-index','1000');
});

Replace '1000' with your desired z-index value, of course