Question

the text within the li is a link, where as the entire li item including the text should work as a link. How can I get it so that the entire li item operates as link as opposed to just the text within the li?

CSS:

#navbar {
    width: 900px;
    height: 50px;
    background-image: url(http://iforce.co.nz/i/chiislxt.mp4.png);
}

#navbar ul {
    list-style-type:none;
    margin:0px;
    padding:0px;
    text-align: center;
}

#navbar ul li {
    height: 50px;
    width: auto;
    float: left;
    padding-left: 20px;
    padding-right: 20px;
    line-height: 50px;
    border-right: 1px solid black;
}

#navbar ul li a {
    display: block;
    height: 100%;
}

#navbar a:link {
    font-weight:bold;
    color: black;
    font-family: Franklin Gorthic Heavy, Helvetica, sans-serif;
    text-decoration: none;
}

#navbar a:hover {
    background-color: #003300;
    color: gold;
}

#navbar a:visited {
    color: black;
}

a:active {
    background-color: #003300; 
    color: gold;
}

HTML:

    <div id="navbar">
        <ul>
            <li><a href="#home">HOME</a></li>
            <li><a href="#about">ABOUT</a></li>
            <li><a href="#news">NEWS</a></li>
            <li><a href="#reading">READING</a></li>
            <li><a href="#store">STORE</a></li>
            <li><a href="#contact">CONTACT</a></li>
        </ul>
    </div>

Here’s a screenshot for reference: (home has my cursor over)

Cheers

Answer 1

You then should move some of the li css to the a css – like so

#navbar ul li {
    height: 50px;
    width: auto;
    float: left;

}

#navbar ul li a {
    display: block;
    height: 100%;
   padding-left: 20px;
    padding-right: 20px;
    line-height: 50px;
    border-right: 1px solid black;
}