ul＃topnav背景の問題

Question

ナビゲーションバーを作成しましたが、次のような問題があり、正確に何が原因であるのかわかりません。私はバックグラウンドをリストの端まで伸ばしてほしい。

HTMLコード...

<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

サブメニューの項目を残しておくと、背景の画像がリスト要素を囲むように表示されますブロック項目。次のルールメインナビゲーションulの子供たちだけのリスト項目ターゲットに変更します。

変更をHTMLだこの

ul#topnav > li { 
    float: left; 
} 

Answer 2

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

また、あなたは=「NAV」idは唯一のユニークな単一の要素を識別するために使用できるIDを持つあなたのhtml内に複数の要素を持っている、あなたのリスト要素<li>で<ul id="nav">をラップしていません。これらをクラスに変更する必要があります。何が間違っているのかをより明確に把握できます。