ul＃topnav背景问题

Question

我已经制作了导航水平条，但我似乎有一个以下问题，并且不确定究竟是什么导致它。我希望背景延伸到列表的边缘。

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>

这是我的CSS代码。

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

<li><a href="#">Careers</a></li>

<li>
    <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>

你没有将<ul id="nav">包裹在列表元素<li>中，你的html中有多个元素，id =“nav”id只能用于唯一标识单个元素。您需要将这些更改为类，它将使您更清楚地了解错误的原因

Answer 2

您也会浮动您的子菜单列表项，这会导致您的背景图像环绕列表元素而不是显示为块项。修改以下规则，仅定位主导航ul的子项列表项：

更改此

ul#topnav li {
    float: left;
}

进入

ul#topnav > li {
    float: left;
}