Create buttons where clicked anywhere do navigation - html

Question

This is probably a very simple question for many of you, but I can't seem to figure it out and I've been at it for about an hour now.
I'm trying to create a navigation bar with buttons. I'd like the buttons to have the following features, but I can't figure out how to implement them:
Clicking anywhere on the button will activate the button redirection.
The font is not underlined or recolored like a regular text hyperlink.
The font is much more "fat" (I don't know how else to describe it.
In the picture, I put small red cross to signal that I'd like to be able to click in those locations for it to work.
I've included a jsfiddle with what I've been able to accomplish thusfar.
My html:
<ul>
<li><a id="nav" href="#">Page1</a></li>
<li><a id="nav" href="#">Page2</a></li>
<li><a id="nav" href="#">Page3</a></li>
<li><a id="nav" href="#">Page4</a></li>
</ul>
My CSS:
body {
margin: 0px
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
ul li {
float:left;
overflow: auto;
padding: 6px 12px 6px 12px;
background-color: grey;
border: 1px solid #000;
text-decoration: none;
margin: 0;
border: 0;
margin-right: 3px;
font-weight: bolder;
color: yellow;
}
ul li:hover{
background-color: black;
}
}

Answer 1

replace ul li { with ul li a{ and ul li:hover{ with ul li a:hover{
http://jsfiddle.net/vxre4x2k/2/

Answer 2

Simply replace ul li with ul li a and ul li:hover with ul li a:hover.
To make the font thicker or thinner change your font-weight

Answer 3

You need to make you anchors work like block elements. The LI's will contain the anchor.
ul li a {
display: block;
text-decoration: none;
padding: 6px 12px 6px 12px;
}
ul li a:hover {
background-color: black;
}

Answer 4

You can use display: inline-block to a(anchor element) and give it some padding for your first request(Clicking anywhere on the button will activate the button redirection.). Also you can remove underline with text-decoration: none; and reduce "fat" from font with font-weight: 100;:
body {
margin: 0px
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
ul li {
float: left;
padding: 6px 12px 6px 12px;
background-color: grey;
border: 1px solid #000;
text-decoration: none;
margin: 0;
border: 0;
margin-right: 3px;
font-weight: bolder;
color: yellow;
}
ul li:hover {
background-color: black;
}
ul li {
padding: 0;
}
ul li a {
display: inline-block;
padding: 5px;
text-decoration: none;
color: white;
font-weight: 100;
}
<ul>
<li><a id="nav" href="#">Page1</a>
</li>
<li><a id="nav" href="#">Page2</a>
</li>
<li><a id="nav" href="#">Page3</a>
</li>
<li><a id="nav" href="#">Page4</a>
</li>
</ul>
References:
font-weight
text-decoration

Answer 5

Clicking anywhere on the button will activate the button redirection.
to do this, wrap your list elements with the anchor elements instead.
ex.
<a href='#'><li>foo</li></a>
The font is not underlined or recolored like a regular text hyperlink.
for the links you gave them each an id of "nav". This isn't recommended as its commonplace to set id's to individual elements. I would look up the difference between CSS id's and classes. In short, classes are used for multiple elements that share the same styles. In this case you would use a class so it should be:
<a class="nav" href="#"><li>Page1</li></a>
The styles for the class to remove the underline would be:
.nav{
text-decoration:none;
color: black;
}
The font is much more "fat" (I don't know how else to describe it.
are you saying you want it to be fat?
if so then try this:
<a class="nav" href="#"><strong><li>Page1</li></strong></a>
or you could also set the css style font-weight property
the font-weight property can be used to increase or decrease the "fattness" of the font.
if that doesn't do it for you i'd suggest using a different font.