CSS - How to make a tag surrounded li

CSS - How to make a tag surrounded li

i try to make a list Horizontal like

I try to make when hover each item (text and dot) then cursor is the same
when hover <a> tag like

But it's true for hover text not for both dot and text.

Frist problem: i can't make width is auto include both dot and text.
Second: I think a tag must be surrounded li to do: hover both (dot and text).
How to make that work. Thanks
Here is my code http://jsfiddle.net/Q6CZ2/
<div id="wrap">
<ul id="navbar">
<li><a href="#">Exhibits and Events</a>
</li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Press</a></li>
</ul>
</div>