Welcome to WebmasterWorld Guest from 18.232.99.123

Forum Moderators: not2easy

Message Too Old, No Replies

Phantom list items in nav menu

blank list items showing in menu

     
10:21 am on Jun 15, 2015 (gmt 0)

New User

joined:June 15, 2015
posts: 2
votes: 0


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]

1:04 pm on June 15, 2015 (gmt 0)

Junior Member

5+ Year Member

joined:June 6, 2012
posts: 104
votes: 0


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>
4:03 pm on June 15, 2015 (gmt 0)

New User

joined:June 15, 2015
posts: 2
votes: 0


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!
4:13 pm on June 15, 2015 (gmt 0)

Junior Member

5+ Year Member

joined:June 6, 2012
posts: 104
votes: 0


Yep

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