css - user menu - two issues

when I hover the mouse over it, the cursor doesn't change into hand until you actually over over the text. (For example, if you pay attention to SO navigation, your cursor changes into hand as soon as you touch the gray area. I am talking about Questions, Tags, Users, Badges, Unanswered navigation)

when I click on it, it borders the link开发者_如何转开发-text.. like it's dotted border or something by default. How do I get rid of that?

---

There are two ways of getting the hand cursor on the entire area; either you make the link take up the entire area (perhaps by being the entire area), or you add the style cursor:pointer; to the area. (Making the link cover the whole area is usually the better option, as that also make the entire area clickable.)

To get rid of the dotted border on links when they‘re clicked:

a:active {
    outline: none;
}

---

For SO navigation, it is done in following way:

<li class="nav">
    <a href="...">Questions</a>
</li>

.nav a {
    padding: 6px 12px;
}

The gray area you see is actually the link itself (achieve by setting the padding). To get rid of the border, you should specify by a:link:

.nav a:active { outline: none; }

---

For (1), use the <a> around your whole <div>, not just the text, and that will make the cursor change to the hand cursor when entering the div. Another way is to change the <a> to have a style similar to

a { display: block; width: 300px; height: 100px; background: orange }

the background is just for trying it here. It can be removed.

For (2), use

a { outline: none }

---

Try using the following in your CSS.

a:focus {outline: none;}

However, I believe older versions of IE will not honor this code.