ul＃topnav背景问题

我做了一个导航水平栏，但我似乎有一个以下问题，并不知道究竟是什么原因造成它。我想让背景延伸到列表的边缘。ul＃topnav背景问题

enter image description here

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

来源

2012-03-19 HighFlyerPL185

哪里HTML？ – ncremins 2012-03-19 21:46:09

对不起，只是实际检查它，编辑了这篇文章。 – HighFlyerPL185 2012-03-19 21:49:01

@ HighFlyerPL185你没有包含你的subnav的CSS。 – 2012-03-19 21:55:17

你漂浮离开你的子菜单项目，以及这是导致你的背景图像环绕你的列表元素，而不是显示为一个块项目。修改下面的规则仅定位到你的主要资产净值ul的孩子列表项：

更改此

ul#topnav li { 
    float: left; 
}

进入这个

ul#topnav > li { 
    float: left; 
}

来源

2012-03-19 22:09:18

粉碎，谢谢。我不知道>可以在CSS中使用，很高兴知道。 – HighFlyerPL185 2012-03-19 22:13:00

@ HighFlyerPL185它被称为[子选择器]（http://www.w3.org/TR/CSS2/selector.html#child-selectors），它只用于定位元素的子元素，在这种情况下，它是用于定位您的第一级列表项目而不是您的子菜单项目。 – 2012-03-19 22:14:36

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

你不是在一个列表元素<li>包装你<ul id="nav">，也必须在用id =“导航” ID你的HTML多个元素只能用来唯一标识一个元素。你需要将它们更改为类，它会给你一个更清晰的图像

来源

2012-03-19 22:00:10 ncremins

ul＃topnav背景问题

回答

相关问题