Question

So, a site i’m working on has a horizontal navigation menu. Here is the relevant code.

HTML:

<div class="nav">
<ul>
    <a href="index.html">
        <li>Home</li>
    </a>
    <a href="about.html">
        <li>About Us</li>
    </a>
    <a class="active" href="perspective.html">
        <li>Our Perspective</li>
    </a>
</ul>

CSS:

.nav ul a li{
    padding: 5px 15px;
    list-style: none;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    display: inline-block;
}

.nav ul a{
    color: #1d1d1d;
    text-decoration: none;
    font: bold .8em Georgia, "Times New Roman", Times, serif;
}

.nav ul a:hover li{
    background-color: rgba(0, 0, 0, 0.44);
    opacity: 1;
    -moz-box-shadow: -2px 0 2px rgba(0, 0, 0, 0.31), 2px 0 2px rgba(0, 0, 0, 0.31), 0 -2px 2px rgba(0, 0, 0, 0.31), 0 2px 2px rgba(0, 0, 0, 0.31);
    -webkit-box-shadow: -2px 0 2px rgba(0, 0, 0, 0.31), 2px 0 2px rgba(0, 0, 0, 0.31), 0 -2px 2px rgba(0, 0, 0, 0.31), 0 2px 2px rgba(0, 0, 0, 0.31);
    box-shadow: -2px 0 2px rgba(0, 0, 0, 0.31), 2px 0 2px rgba(0, 0, 0, 0.31), 0 -2px 2px rgba(0, 0, 0, 0.31), 0 2px 2px rgba(0, 0, 0, 0.31);
}

.nav ul a.active li{
    background-color: rgba(0, 0, 0, 0.44);
    opacity: 1;
    -moz-box-shadow: -2px 0 2px rgba(0, 0, 0, 0.31), 2px 0 2px rgba(0, 0, 0, 0.31), 0 -2px 2px rgba(0, 0, 0, 0.31), 0 2px 2px rgba(0, 0, 0, 0.31);
    -webkit-box-shadow: -2px 0 2px rgba(0, 0, 0, 0.31), 2px 0 2px rgba(0, 0, 0, 0.31), 0 -2px 2px rgba(0, 0, 0, 0.31), 0 2px 2px rgba(0, 0, 0, 0.31);
    box-shadow: -2px 0 2px rgba(0, 0, 0, 0.31), 2px 0 2px rgba(0, 0, 0, 0.31), 0 -2px 2px rgba(0, 0, 0, 0.31), 0 2px 2px rgba(0, 0, 0, 0.31);
}

You can view the site here: pc.kraigh.com

So, for some reason, every once in awhile, the list will render vertically, instead of horizontally. Also, sometimes (but not always) there will be bullets on each li, as if the browser is ignoring the list-style:none.

Is there something wrong with my CSS selectors that is causing this? Why would it only happen every once in awhile?

Note: To get the error to reproduce, try changing pages quickly, or refreshing the page a few times. Here is a (link to a) screenshot to prove that it sometimes happens!

Screenshot of Error (Imgur link)

EDIT: Okay, I understand now that it needs to go <ul><li><a>, BUT, I wanted the entire <li> area to be clickable- not just the link text. Is there a way to do this?

Answer 1

<li> need to be direct children of <ul>:

This is correct:

<ul>
  <li><a href="index.html">Home</a></li>
  <li><a href="about.html">About Us</a></li>
  <li><a class="active" href="perspective.html">Our Perspective</a></li>
</ul>

You can assign a width and line-height to the <li> to make it completely clickable. Also, padding helps.