I am building a drop down navigation bar, modeled after the one at NASA’s homepage. At the time of writing it is not finished, so don’t expect it to look like it. My problem is that I have an inline list that contains normal lists. When I do not specify that the normal lists should fill 100% of the inline list item, they wrap at odd points. When I do specify it, however, I have found that I have to add !important to the declaration. I would like to find out why this is, because I generally avoid using !important, especially because I do not know what is necessitating it. I’ve included all of my code, because I have no idea what the problem is. The css may seem a little weird because I’m using a modified version of the markup here.
This is my 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>
And my 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;
}
Thanks in advance!
This rule:
has an ID selector
#projects. This makes it a more specific selector, causing its width to overrule yourul.dropDownNav li ul li ulwidth unless you add!important.You can easily fix this and do away with the
!importantby forcing only the immediately-following level ofulchildren to have33.3%width using the child combinator>: