Phantom list items in nav menu

blank list items showing in menu

[RodneyB]

I am having problems displaying a site menu. This menu is two levels, and worked correctly until testing the second level. Under the sublevels, it also displays one blank sublevel list item and three blank first level items. What can be causing this?

Here is the html:

<nav>
<div id="menuwrap">
 <ul class="menu">
 <li><a href="http://www.example.net/">Dog Information Home</a></li>
 <li><a href="blog/">Dog Information Blog</a></li>
 <li><a href="/dog-behavior/">Dog Behavior</a>
  <ul class="sub1">
  <li><a href="#">Test sub1</a></li>
  <li><a href="#">Test sub1 2a></li>
  </ul>
 </li>
 <li><a href="dog-breeds/">Dog Breeds</a></li>
 <li><a href="dog-health/">Dog Health</a></li>
 <li><a href="dog-nutrition/">Dog Nutrition</a></li>
 <li><a href="dog-store/">Dog Supplies</a></li>
 <li><a href="dog-training/">Dog Training</a></li>
 <li><a href="dog-travel/">Dog Travel</a></li>
 <li><a href="dog-sites/">Dog Websites I Link To</a></li>
 <li><a href="dog-rescue-contest/">Dog Rescue Contest</a></li>
 </ul>
</div>
</nav>

and here is the css for the menu:

#menuwrap{
 width: 240px;
height: auto;
 margin: 10px auto;
}
#menuwrap ul {
 margin: 0;
 padding: 0;
 list-style: none;
 font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 font-weight: bold;
}
#menuwrap li {
margin: 0 0 2px 0;
}
#menuwrap a {
 width: 100%;
 height: 2.75em;
 line-height: 2.75em;
display: block;
 text-indent: .5em;
 background-color: #c98322;
 color: #fff;
 border-top: 1px solid #fff;
 border-left: 1px solid #fff;
 border-bottom: 1px solid #33373d;
 border-right: 1px solid #33373d;
}
#menuwrap a:hover {
 color: #fff;
 background-color: #FF9F19;
 border-top: 1px solid #33373d;
 border-left: 1px solid #33373d;
 border-bottom: 1px solid #fff;
 border-right: 1px solid #fff;
}
#menuwrap ul ul li {
margin: 0 0 2px 0;
}
#menuwrap ul ul a {
 background-color: #FF9F19;
 border-top: 1px solid #fff;
 border-left: 1px solid #fff;
 border-bottom: 1px solid #33373d;
 border-right: 1px solid #33373d;
 width: 100%;
 height: 2.75em;
 line-height: 2.75em;
 text-indent: 1.5em;
 display: block;
 color: #fff;
}
#menuwrap ul ul a:hover {
 color: #fff;
 background-color: #c98322;
 border-top: 1px solid #33373d;
 border-left: 1px solid #33373d;
 border-bottom: 1px solid #fff;
 border-right: 1px solid #fff;
}

[edited by: not2easy at 12:46 pm (utc) on Jun 15, 2015]
[edit reason] unlinked with "example.net". [/edit]

[brandozz]

There is a mistake in your html, in the list sub1 your second list item the "a" element is not closed properly:

<ul class="sub1">
<li><a href="#">Test sub1</a></li>
<li><a href="#">Test sub1 2a></li>
</ul>

[RodneyB]

That was quick. I don't know how many times I poured over the code, and kept on seeing all closing tags properly done. Fresh eyes do wonders!

[brandozz]

Yep

Also make sure you are using the DevTools in Chrome or Firebug in Firefox to inspect your code in the browser.