I've got a nav/menu bar that starts like this:
<nav>
<ul class="top-level-menu">
Here is the CSS class:
.top-level-menu {
list-style: none;
padding: 0;
margin-bottom: 12px;
width: 100%;
display:block;
}
However, the 100% width is not working, nor is the margin-bottom setting. There is no space whatsoever between the nav and the next element on the form (vertically); why isn't there 12px of "dead space"?
Also, when I programmatically replace the element below the nav/menu bar (an HTML Table) with a "placeholder" bit of HTML, rather than displaying *beneath* the menu, it displays to the right. Shouldn't the 100% width of the nav/menu prevent anything from being placed to its right?
For those with inquiring minds, here's the entire HTML of the nav/menu bar:
<nav>
<ul class="top-level-menu">
<li>Schedules
<ul class="second-level-menu">
<li id="mniOpenExisting" name="mniOpenExisting">Open Existing</li>
<li>Create New...
<ul class="third-level-menu">
<li id="mniCreateNewScheduleBasedOnExisting" name="mniCreateNewScheduleBasedOnExisting">Based on Existing</li>
<li id="mniCreateNewScheduleFromScratch" name="mniCreateNewScheduleFromScratch">From Scratch</li>
</ul>
</li>
<li id="mniSaveCurrentSchedule" name="mniSaveCurrentSchedule">Save Current</li>
<li id="mniEmailCurrentSchedule" name="mniEmailCurrentSchedule">Email Current</li>
<li id="mniPrintCurrentSchedule" name="mniPrintCurrentSchedule">Print Current</li>
</ul>
</li>
<li>Job/Locations
<ul class="second-level-menu">
<li id="mniAddNewJobLoc" name="mniAddNewJobLoc">Add New</li>
<li id="mniViewOrEditJobLoc" name="mniViewOrEditJobLoc">View or Edit</li>
</ul>
</li>
<li>Workers
<ul class="second-level-menu">
<li id="mniAddNewWorker" name="mniAddNewWorker">Add New</li>
<li id="mniViewOrEditWorker" name="mniViewOrEditWorker">View or Edit</li>
<li id="mniWorkerPreferences" name="mniWorkerPreferences">Preferences</li>
</ul>
</li>
<li>Rules
<ul class="second-level-menu">
<li id="mniSetRules" name="mniSetRules">Establish/Maintain</li>
</ul>
</li>
<li>Help
<ul class="second-level-menu">
<li id="mniAbout" name="mniAbout">About</li>
<li id="mniHowTo" name="mniHowTo">How To...</li>
<li id="mniContact" name="mniContact">Contact Us</li>
<li id="mniAcquireLicense" name="mniAcquireLicense">Acquire License</li>
</ul>
</li>
</ul>
</nav>
...and here's the element that I dynamically add, which ends up to the right of the nav/menu bar rather than below it:
<h2 class="floatleft">Open Existing Schedule</h2>
...and the class it uses:
.floatleft {
float: left;
display: block;
}
For the
really curious, here is all the CSS:
html {
font-family:'Segoe UI Light', 'Bookman Old Style', Calibri, Candara, serif;
}
header {
background: #d2edf4;
background-image: linear-gradient(to bottom, #d0edf5, #e1e5f0 100%);
padding: 20px 15px 15px 15px;
position: relative;
}
body {
font-family: 'Palatino Linotype', 'Bookman Antigua', Palatino, serif;
background-color: lightyellow;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
padding: 0;
margin: 0;
font-size: 14px;
width:80%;
margin-left:auto;
margin-right:auto;
}
nav {
background-color: forestgreen;
}
form {
background-color: lightyellow;
}
h1 {
color: navy;
font-family: "Segoe UI", serif;
font-size: 2.5em;
margin: 0;
margin-bottom: 10px;
display: inline-block;
margin-right: 1em;
}
h2 {
font-family: 'Bookman Old Style', Verdana, sans-serif;
}
table {
width: 1200px;
margin: 0 auto;
background-color: azure;
margin-top: 80px;
}
table, th, td {
border: 1px solid navy;
border-collapse: collapse;
}
th, td {
padding: 5px;
}
input[type="time"] {
margin: 3px;
}
p {
font-size: 14px;
}
.label88 {
width: 88px;
display: inline-block;
}
.hide {
visibility: hidden;
display: none;
}
.smallcaps {
font-variant: small-caps;
}
.container {
max-width: 1200px;
margin: 0 auto;
background: lightyellow;
}
.dateLabel {
font-size: 16px;
font-family: Candara, 'Segoe UI', sans-serif;
color: forestgreen;
}
.shiftLabel {
font-size: 13px;
font-family: Calibri, serif;
color: red;
}
.jobLoc {
margin-right: 16px;
width: 115px;
}
.jobLocCount {
width: 40px;
}
.trabajar {
width: 159px;
margin-right: 16px;
margin-top: 4px;
}
.shortTextInput {
width: 64px;
}
.floatleft {
float: left;
display: block;
}
.third-level-menu {
position: absolute;
top: 0;
right: -150px;
width: 150px;
list-style: none;
padding: 0;
margin: 0;
display: none;
}
.third-level-menu > li {
height: 30px;
background: gray;
}
.third-level-menu > li:hover {
background: white;
}
.second-level-menu {
position: absolute;
top: 30px;
left: 0;
width: 150px;
list-style: none;
padding: 0;
margin: 0;
display: none;
}
.second-level-menu > li {
position: relative;
height: 30px;
background: orange;
color: white;
}
.second-level-menu > li:hover {
background: green;
}
.top-level-menu {
list-style: none;
padding: 0;
margin-bottom: 12px;
width: 100%;
display:block;
}
.top-level-menu > li {
position: relative;
float: left;
height: 30px;
width: 150px;
background: moccasin;
}
.top-level-menu > li:hover {
background: lightgray;
}
.top-level-menu li:hover > ul {
display: inline;
}