如何用自己的图像设置按钮样式？ 如何删除图像之间的空白 <li> 和 <li> 码？

Question

I want to made a 3-line navigation menu.

This is my fiddle, http://fiddle.jshell.net/ds325/3/

I want to style my button, the original image do not have the grey color background, I want to use my own image.

Beside, why there are white space between my image? How can I remove the white space? So that my image can connect nicely.

my coding

<script src="http://code.jquery.com/jquery-1.7.1.js"></script>
<button class="menu" ><img src="http://i.stack.imgur.com/EkwMp.png" width="40" height="40" /></button>
<div id="navbar" style="display:none;">
    <nav>
        <ul>
            <li>
             <div id="wrapper">
             <img src="http://www.weatherclipart.net/free_weather_clipart/umbrellas_page_border_graphic_0515-0908-2220-2617_SMU.jpg" width="35" height="52" class="hover" />
            <p class="text"><a href="#">Home</a></p>
            </div>
            </li>
            <li>
            <div id="wrapper">
             <img src="http://www.weatherclipart.net/free_weather_clipart/umbrellas_page_border_graphic_0515-0908-2220-2617_SMU.jpg" width="35" height="52" class="hover" />
            <p class="text"><a href="#">About</a></p>
            </div>
            </li>
            <li>
            <div id="wrapper">
             <img src="http://www.weatherclipart.net/free_weather_clipart/umbrellas_page_border_graphic_0515-0908-2220-2617_SMU.jpg" width="35" height="52" class="hover" />
            <p class="text"><a href="#">Contact</a></p>
            </div>
            </li>
        </ul>
    </nav>
</div>

CSS

#wrapper .text {
position:relative;
bottom:50px;
left:50px;
visibility:hidden;
}

#wrapper:hover .text {
visibility:visible;
}

ul {
    list-style:none;
}

Javascript

$('.menu').click(function() {
    $('#navbar').toggle('slow');
});

If can, please give me a demo, so that it will be more easy for me to understand, thanks.

this is exactly what I want, thanks for helping http://fiddle.jshell.net/ds325/5/

Answer 1

Have you tried to use the list-style-image on your li elements ? Like this :

ul li {
    list-style-image: url('path/of/image/file');
}

(Sorry but i'm not sure to understand the question if my answer is not what you're waiting for).

Answer 2

you need to use anchor instead of button like following

<a class="menu" ><img src="http://i.stack.imgur.com/EkwMp.png" width="40" height="40" /></a>

Here is the working demo

http://fiddle.jshell.net/ds325/3/

and if you talking about the space between the home link and the image you can simple update your css as

#wrapper .text {
    position:relative;
    bottom: 42px;
    left: 34px;
    visibility:hidden;
    }

Updated

Add this to your css

#navbar div {
    height: 53px;
}