How to remove "caret" cursor from HTML/CSS Navigation? -


here's code:

jsfiddle.net/q49hb

<ul id="navigation">   <li><a class="" href="#">home</a></li>   <li><a class="" href="#">blog</a></li>   <li><a class="" href="#">services</a></li>   <li><a class="" href="#">about</a></li> </ul> 

there's little caret cursor in between each list item when hovering over. noticed floating left rid of it, can't center navigation, trying do. help?

so re-cap, i'm looking to:

  1. space out list items, leaving no excess space.
  2. not show carrot cursor when hovering in between items.
  3. centering unordered list nav on page.

you can 1 of 2 things.

you can set parent element (#navigation) cursor: pointer; stop caret showing in between links:

http://jsfiddle.net/q49hb/1/

#navigation {     cursor: pointer; } 

or can remove whitespace between <li>s, what's causing default caret cursor type show.

http://jsfiddle.net/q49hb/2/

<li><a class="" href="#">home</a></li><li><a class="" href="#">blog</a></li><li><a class="" href="#">services</a></li><li><a class="" href="#">about</a></li> 

edit: option 2 better, (but code isn't neat,) because option 1 gives users illusion space clickable when isn't (thanks @joshc)


Comments

Popular posts from this blog

Android layout hidden on keyboard show -

google app engine - 403 Forbidden POST - Flask WTForms -

c - Why would PK11_GenerateRandom() return an error -8023? -