Decorating list items like buttons - html

Question

I'm wondering what some good practices are for styling li elements like buttons. Any examples would be appreciated. I'm guessing a box shadow and a background color would go a long way, but that alone does not seem to be enough.
Edited the question to make it more useful.

Answer 1

Okay I think what your after is to make the whole link clickable rather than just the text. All you need to do is make your anchor a block element, then it will take the full width of the li:
.nav a {
display:block;
}
<ul class="nav">
<li>Home</li>
<li>About us</li>
</ul>

Answer 2

I assume you try to make menu and want bigger buttons than just link text.
You should set links inside list elements as you shown and then make links as buttons.
Very simple css example for horizontal menu would be something like this:
.nav li {
list-style-type: none;
padding 0px;
margin 0px;
float: left;
}
.nav li a {
text-decoration: none;
display: block;
padding: 0px 15px;
line-height: 25px;
}
For horizontal menu you should make width with padding and height with line-height. Unless you want every button to be same sized, then you just could use width.
More in-depth example would be this one http://medialoot.com/blog/how-to-create-a-responsive-navigation-menu-using-only-css/

Answer 3

I think your issue may be that you have styled the <li> to look like the menu button, but the text is the only part that is clickable, is this correct?
What you need to do, is not style the <li> as the menu button but instead the <a> within it.
Here is a demo: https://jsfiddle.net/arrx7dL7/
As you can see the styles are applied to the links, rather than the li
HTML:
<ul class="menu">
<li><a class="menu-item" href="#">Item 1</a></li>
<li><a class="menu-item" href="#">Item 2</a></li>
<li><a class="menu-item" href="#">Item 3</a></li>
<li><a class="menu-item" href="#">Item 4</a></li>
</ul>
CSS:
.menu {
list-style:none;
}
.menu-item {
color:black;
text-decoration: none;
background: #eee;
border: 1px solid #ccc;
padding:20px 30px;
display:block;
}
I think this is what you mean, if so I hope it is helpful.