Question

I have made a navigation horizontal bar, but I seem to have a following issue with it and not sure what exactly could be causing it. I want the background to extend until the edge of the list.

HTML code…

<li><a href="<?php echo url('/'); ?>">Home</a></li>
<?php
if(!Auth::LoggedIn())
{
?>
    <li><a href="<?php echo url('/login'); ?>">Login</a></li>
    <li><a href="<?php echo url('/registration'); ?>">Register</a></li>
<?php
}
else
{
?>
    <li><a href="<?php echo url('/profile'); ?>">Pilot Center</a></li>

<?php
}
?>
<li><a href="<?php echo url('/acars') ?>">Live Map</a></li>
<li><a href="#">Airline</a>
    <ul id="nav">
    <li><a href="<?php echo url('/pages/about'); ?>">About&nbsp;Us</a></li> 
    <li><a href="<?php echo url('/pages/history'); ?>">History&nbsp;&&nbsp;Milestones</a></li> 
    <li><a href="<?php echo url('/pages/staff'); ?>">Staff</a></li> 
    <li><a href="<?php echo url('/pilots'); ?>">Pilot&nbsp;Roster</a></li> 
    </ul>
</li>
<li><a href="#">Careers</a>
    <ul id="nav">
    <li><a href="<?php echo url('/pages/managementopportunities'); ?>">Management&nbsp;Careers</a></li> 
    <li><a href="<?php echo url('/pages/stepone'); ?>">Pilot&nbsp;Careers</a></li> 
    </ul>
</li>
<li><a href="#">Operations</a>
    <ul id="nav">
    <li><a href="<?php echo url('/pages/fleet'); ?>">Fleet</a></li> 
    <li><a href="<?php echo url('/pages/hubs'); ?>">Hubs</a></li> 
    <li><a href="<?php echo url('/FrontSchedules'); ?>">Schedules</a></li> 
    </ul>
</li>
<li><a href="#">Community</a>
    <ul id="nav">
    <li><a href="#">Forums</a></li> 
    <li><a href="<?php echo url('/contact'); ?>">Contact&nbsp;Us</a></li> 
    </ul>
</li>

This is the CSS code I have.

ul#topnav {
list-style-type: none;
background-image: url(../images/navi_bg.png);
height: 30px;
width: 1020px;
margin:0 auto;
margin-bottom:10px;
margin-top:0px;
padding:0px;
border:2px solid #FF9;
}

ul#topnav li {
float: left;
}

ul#topnav a {
background-repeat: no-repeat;
background-position:right;
padding-right: 14px;
padding-left: 14px;
display: block;
line-height: 30px;
text-decoration: none;
font-family:Arial;
font-size: 13px;
color:#FF9;
}

ul#topnav a:hover {
color: #FFF;
background-image: url(../images/hover_bg.png);
background-repeat: repeat;
}

ul#nav {
margin: 0;
padding: 0;
list-style: none;
width: auto;
line-height:normal;
}

ul li {
position: relative;
}

li ul {
position: absolute;
left: 149;
top: 30;
background: #003663;
display: none;
z-index: 1;
}

ul li a {
display: block;
text-decoration: none;
}

li:hover ul, li.over ul { 
display: block; 
}

Answer 1

You’re floating left your submenu list items as well, which is causing your background image to wrap around your list element instead of displaying as a block item. Modify the following rule to target only the children list items of your main nav ul:

Change this

ul#topnav li {
    float: left;
}

Into this

ul#topnav > li {
    float: left;
}