Combining Drop-down and Flyout Menus - Exercise

Contact Us or call 1-877-932-8228
Combining Drop-down and Flyout Menus - Exercise

Combining Drop-down and Flyout Menus

Duration: 20 to 30 minutes.

In this exercise, you'll modify a working drop-down menu so that third-level options will flyout to the right as shown in the screenshot below: CSS Mixed Menus

  1. Open CssListMenus/Exercises/CssMenu-mixed.html in your browser.
    1. Hover over the About menu. You should see this: About Menu
    2. Notice the third-level menu. It is currently not functional.
  2. Open CssListMenus/Exercises/CssMenu-mixed.html in your editor.
  3. Change the CSS so that the third-level menu is functional and flies out to the right.

The full code is shown below:

Code Sample:

CssListMenus/Demos/CssMenu-flyout.html
---- C O D E   O M I T T E D ----
<link type="text/css" rel="stylesheet" href="../reset-meyer.css">
<style type="text/css">
	#mainMenu {
		margin:10px;
		width:120px;
		font-family: "Trebuchet MS";
	}
	#mainMenu li {position:relative;display:block;
		border:1px solid #000;
		border-top:0px;
	}
	#mainMenu li:first-child {
		border-top:1px solid #000;
	}
	
	#mainMenu a {position:relative;	/*for IE7*/display:block;
		padding:3px;
		text-decoration:none;
		color:#009;
	}
	
	#mainMenu a:hover {
		background-color:#009;
		color:#fff;
	}#mainMenu li ul {
		position:absolute;
		width:150px;
		left:118px;
		top:5px;
		display:none;
	}
	
	#mainMenu li ul li {
		font-size:smaller;
	}
	
	#mainMenu li:hover ul {
		display:block;
	}</style>
---- C O D E   O M I T T E D ----

Code Explanation

Open CssListMenus/Demos/CssMenu-flyout.html in your browser to see it in action.

Challenge

  1. In the HTML, you'll notice the "Corporate Governance" bullet has a submenu that is commented out. Uncomment it.
  2. Modify your CSS so that this new submenu is also a function and flies out when the user hovers over "Corporate Governance", but not before: CSS Menus Exercise Challenge
  3. Hint: you will only need to change one character.

Solution:

CssListMenus/Solutions/CssMenu-mixed.html
---- C O D E   O M I T T E D ----
<link type="text/css" rel="stylesheet" href="../reset-meyer.css">
<style type="text/css">
	#mainMenu {
		margin:10px;
		width:900px;
		font-family: "Trebuchet MS";
	}
	
	#mainMenu li {
		position:relative;	
		display:block;
		width:120px;
		float:left;
		border:1px solid #000;
		margin-left:2px;
	}
	
	#mainMenu a {
		display:block;
		padding:3px;
		text-decoration:none;
		background-color:#fff;
		color:#009;
	}
	
	#mainMenu a:hover {
		background-color:#009;
		color:#fff;
	}
	
	#mainMenu li ul {
		position:absolute;
		margin:0px;
		padding:0px;
		left:-3px;
		top:22px;
		display:none;	
	}
	
	#mainMenu li ul li {
		width:150px;
		font-size:smaller;
		border-top:none;
	}
	
	#mainMenu li ul li:first-child {
		border-top:1px solid #000;
	}
	
	#mainMenu li:hover ul {
		display:block;	
	}
	
	/*third level*/#mainMenu li ul ul {
		position:absolute;
		width:150px;
		left:148px;
		top:-1px;
		display:none;
	}
	
	#mainMenu li:hover ul ul {
		display:none;	
	}
	
	#mainMenu li:hover ul li:hover ul {
		display:block;	
	}</style>
---- C O D E   O M I T T E D ----

Code Explanation

Challenge Solution:

CssListMenus/Solutions/CssMenu-mixed-challenge.html
---- C O D E   O M I T T E D ----
/*third level*/
	#mainMenu li ul ul {
		position:absolute;
		width:150px;
		left:148px;
		top:-1px;
		display:none;
	}
	
	#mainMenu li:hover ul ul {
		display:none;	
	}
	
	#mainMenu li:hover ul li:hover>ul {
		display:block;	
	}
---- C O D E   O M I T T E D ----

Code Explanation

Adding the > to the selector changes this from a descendant selector to a child selector, so only the child ul is changed to display.

Next