0
我正在构建一个下拉式导航栏，仿照NASA主页上的下拉导航栏。在撰写本文时尚未完成，所以不要指望它看起来像它。我的问题是我有一个内联列表，其中包含正常列表。当我没有指定普通列表应该填充内联列表项目的100％时，它们会以奇数点换行。但是，当我指定它时，我发现我必须添加！对声明很重要。我想知道这是为什么，因为我通常避免使用！重要的，特别是因为我不知道什么是必要的。我已经包含了我的所有代码，因为我不知道问题是什么。该CSS可能看起来有点不可思议，因为我使用了标记here的修改版本。！重要的是需要指定宽度
这是我的html：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dt>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Team 422 | Mech Tech Dragons</title>
<link rel="stylesheet" type="text/css" href="standardLayout.css" />
</head>
<body>
<div class="header">
<img src="./MTDLogoHeader.png" alt="Team 422 Logo" class="team422Logo headerElement"/>
<div class="navigation">
<ul class="mainNavBar headerElement">
<li> <!--The odd-looking closing tags on the list items are intentional. They fix cross-browser compatability issues-->
<div> <!--These divs are unfortunately non-semantic. They allow the nvigation bar to resize properly-->
<h1>Home</h1>
<h2>Welcome</h2>
</div>
</li
><li>
<div>
<h1>About</h1>
<h2>Our Vision</h2>
</div>
</li
><li>
<div>
<h1>Team</h1>
<h2>Who We Are</h2>
</div>
</li
><li>
<div>
<h1>Projects</h1>
<h2>What We Do</h2>
</div>
</li
><li>
<div>
<h1>Media</h1>
<h2>Pics & Blog</h2>
</div>
</li
><li>
<div>
<h1>Resources</h1>
<h2>Documents, Etc.</h2>
</div>
</li>
</ul>
<ul class="dropDownNav headerElement">
<li id="home">
</li
><li id="about">
<ul>
<li>
<h1>About FIRST</h1>
</li
><li>
<h1>About The Team</h1>
</li
><li>
<h1>About This Site</h1>
</li
><li>
<h1>FIRST Resources</h1>
</li>
</ul>
</li
><li id="team">
<ul>
<li>
<h1>Structure</h1>
</li
><li>
<h1>Subteams</h1>
<ul>
<li>
<h2>Mechanical</h2>
</li
><li>
<h2>Electrical</h2>
</li
><li>
<h2>Programming</h2>
</li
><li>
<h2>Non-Tech</h2>
</li
><li>
<h2>Spirit</h2>
</li
><li>
<h2>Awards</h2>
</li>
</ul>
</li
><li>
<h1>Members</h1>
</li
><li>
<h1>Mentors</h1>
</li
><li>
<h1>Sponsors</h1>
</li>
</ul>
</li
><li id="projects">
<ul>
<li>
<h1>Robots</h1>
<ol>
<li>
<h2>2011- Geoffery</h2>
</li
><li>
<h2>2010- Ahab</h2>
</li
><li>
<h2>2009- Redemption</h2>
</li
><li>
<h2>More Robots...</h2>
</li>
</ol>
</li
><li>
<h1>Competition</h1>
<ul>
<li>
<h2>Schedule</h2>
</li
><li>
<h2>The Game</h2>
</li
><li>
<h2>The Rules</h2>
</li
><li>
<h2>Scouting</h2>
</li
><li>
<h2>Awards</h2>
</li>
</ul>
</li
><li>
<h1>Outreach</h2>
<ul>
<li>
<h2>FLL Competition</h2>
</li
><li>
<h2>Mentoring</h2>
</li
><li>
<h2>Service</h2>
</li>
</ul>
</li>
</ul>
</li
><li id="media">
<ul>
<li>
<h1>Blog</h1>
</li
><li>
<h1>Photos</h1>
</li
><li>
<h1>Videos</h1>
</li
><li>
<h1>In the News</h1>
</li>
</ul>
</li
><li id="resources">
<ul>
<li>
<h1>Documents</h1>
</li
><li>
<h1>Robot Manual</h1>
</li
><li>
<h1>Calendar</h1>
</li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>
而且我的CSS：
body {
background-color:#ffffff;
}
div.header {
padding-left:150px;
padding-right:0px;
background-color:#003d00;
margin:0px;
height:160px;
}
div.header .headerElement {
float:left;
position:relative;
}
div.header img.team422Logo {
height:150px;
width:150px;
right:150px;
top:5px;
}
ul.mainNavBar {
padding:0px;
margin:0px;
margin-left:-150px;
border-top:2px solid #003d00;
width:100%;
clear:right;
}
ul.mainNavBar li {
min-width:140px;
height:75px;
width:16.7%;
padding:0px;
margin-right:-2px;
display:inline-block;
position:relative;
}
ul.navBarMain li:hover {
background-image:url('./mainNavBarBackgroundSelected.png');
background-color:#006600;
}
ul.mainNavBar li:first-child {
width:16.5%;
margin-left:1px;
}
ul.mainNavBar li div {
position:absolute;
top:0px;
border-left:2px solid #003d00;
border-right:2px solid #003d00;
margin:0px;
padding-left:5px;
margin-right:-2px;
height:100%;
width:100%;
background-image:url('./mainNavBarBackground.png');
}
ul.mainNavBar li div:hover {
color:#ffffff;
background-image:url('./mainNavBarBackgroundSelected.png');
}
ul.mainNavBar li:first-child div {
border:none;
}
ul.mainNavBar li div h1 {
font-size:22px;
margin-top:4px;
}
ul.mainNavBar li div h2 {
font-size:14px;
}
ul.dropDownNav {
margin:0px;
padding:0px;
width:100%;
}
ul.dropDownNav li {
margin:0px;
padding:0px;
list-style-type:none;
}
ul.dropDownNav li ul {
width:100%;
margin:0px;
padding:0px;
}
ul.dropDownNav li ul li {
display:inline-block;
vertical-align:top;
}
#about li {
width:25%;
}
#team li {
padding:0px;
margin:0px;
width:20%;
}
#projects li ul {
width:33.3%;
padding:0px;
margin:0px
}
#projects li {
padding:0px;
margin:0px;
width:33.3%;
}
#projects li:first-child {
width:33.4%;
}
#media li {
width:25%;
}
#resources li {
width:33.3%;
}
#resources li:first-child {
width:33.4%;
}
ul.dropDownNav li ul li h1 {
font-size:20px;
}
ul.dropDownNav li ul li ol,
ul.dropDownNav li ul li ul {
width:100% !important;
padding:0px;
margin:0px;
}
ul.dropDownNav li ul li ul li,
ul.dropDownNav li ul li ol li {
position:relative;
display:block;
text-indent:5px;
text-align:left;
width:100% !important;
}
ul.dropDownNav li ul li ul li h2,
ul.dropDownNav li ul li ol li h2 {
font-size:16px;
}
提前感谢！
谢谢！我没有想到这一点。 – 2011-04-17 18:07:12