<header> <img src="bla.png" /> <nav> <ul class="top-level-menu"> <li> <a href="#">Schedules</a> <ul class="second-level-menu"> <li name="mniOpenExisting" id="mniOpenExisting">Open Existing</li> <li>Create New... <ul class="third-level-menu"> <li name="mniCreateNewScheduleBasedOnExisting" id="mniCreateNewScheduleBasedOnExisting">Based on Existing</li> <li name="mniCreateNewScheduleFromScratch" id="mniCreateNewScheduleFromScratch">From Scratch</li> </ul> </li> <li name="mniSaveCurrentSchedule" id="mniSaveCurrentSchedule">Save Current</li> <li name="mniEmailCurrentSchedule" id="mniEmailCurrentSchedule">Email Current</li> <li name="mniPrintCurrentSchedule" id="mniPrintCurrentSchedule">Print Current</li> </ul> </li> <li><a href="#">Job/Locations</a> <ul class="second-level-menu"> <li name="mniAddNewJobLoc" id="mniAddNewJobLoc">Add New</li> <li name="mniViewOrEditJobLoc" id="mniViewOrEditJobLoc">View or Edit</li> </ul> </li> <li><a href="#">Workers</a> <ul class="second-level-menu"> <li name="mniAddNewWorker" id="mniAddNewWorker">Add New</li> <li name="mniViewOrEditWorker" id="mniViewOrEditWorker">View or Edit</li> <li name="mniWorkerPreferences" id="mniWorkerPreferences">Preferences</li> </ul> </li> <li><a href="#">Rules</a> <ul class="second-level-menu"> <li name="mniSetRules" id="mniSetRules">Establish/Maintain</li> </ul> </li> <li><a href="#">Help</a> <ul class="second-level-menu"> <li name="mniAbout" id="mniAbout">About</li> <li name="mniHowTo" id="mniHowTo">How To...</li> <li name="mniContact" id="mniContact">Contact Us</li> <li name="mniAcquireLicense" id="mniAcquireLicense">Acquire License</li> </ul> </li> </ul> </nav> <header> <div> <h2 class="floatleft">bla</h2> </div> <footer class="floatleft">Bla footer</footer>
.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: 0;*/ margin-bottom: 12px; width: 100vw; /* display: block; */ } .top-level-menu > li { position: relative; float: left; height: 30px; width: 150px; background: black; } .top-level-menu > li:hover { background: lightgray; } .top-level-menu li:hover > ul { /* On hover, display the next level's menu */ display: inline; } /* Menu Link Styles */ .top-level-menu a /* Apply to all links inside the multi-level menu */ { font: bold 16px Candara, Calibri, 'Segoe UI', serif; color: white; text-decoration: none; padding: 0 0 0 10px; /* Make the link cover the entire list item-container */ display: block; line-height: 30px; margin-bottom: 12px; } .top-level-menu a:hover { color: black; }
<header></header>
<header> </header>
var
This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)