Question

The menu itself:

<ul id="menu">
        <li class=""><a href="home.asp">Home</a> </li>
</ul>

The CSS that is attached to the menu:

#menu li {
    border-right: 1px solid white;
    cursor: pointer;
    display: block;
    float: left;
    font-size: 12px;
    padding: 7px 25px;
    z-index: 100;
}
newMenu.css (line 36)
#menu > li {
    text-align: center !important;
    width: 85px !important;
}
newMenu.css (line 31)
#menu a, #menu a:visited, #menu a:hover, #menu li {
    color: White;
    display: block;
    text-decoration: none;
    z-index: 100;
}

Here is an image to better describe what is happening:

What I need to happen is when someone clicks on the purple section to take them to the appropriate link. Right now the blue rectangle is the only way to activate the link.

Answer 1

DEMO

to increase the click area of a link, add padding to the a element rather than giving width to the li.

instead of using width and height to determine the size of the links, let padding do it for you too, making the li stretch to fit. just make sure you set a to display:block so that it will expand.

if your links have a pre-determined width, it’s best you set the width to the a element also (preferrably min-width so that the cell can expand to the text)

and to add to that, elements that have float:left are already display:block, so no need to define display:block if it has float:left