Simple Grid System with Nav Bar

by clayshannon

HTML

<h1>Simple Grid System</h1>

<div class="grid">
    
    <div class="col-All">
     <div class="module">
  <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>
...

CSS

body {
  padding: 10px 50px 200px;
  background: forestgreen;
}
h1 {
  color: white;  
}
[class*='col-'] {
	float: left;  
    margin: 4px;
}
.grid {
  background: white;  
}
.module {  
  background: lightyellow;
}
.col-All {
	width: 90%;
}
.col-2-3 {
	width: 60%;
}
.col-1-3 {
	width: 30%;
}
.col-1-2 {
	width: 45%;
}
.col-1-4 {
	width: 22.5%;
}
/* Menu-specific styles/rules, adapted from  */
.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;
    /*border: 1px; <= not working*/
}
.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 {
    /* On hover, display the next level's menu */
    display: inline;
}
/* End of Menu-specific Styles */