CSS Menu Flyout Left

A simple vertical Flyout Left CSS menu, compatible with all major browsers, no images or javascript.

Demo:

How to use:

Open text editor like Notepad or any other.
Copy HTML code and paste into the text editor.
Save file as anyname.html or anyname.htm
Create new document.
Copy and paste CSS code into text editor.
Save file as menu.css

HTML code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="menu.css" />
<title>CSS Menu Flyout Left</title>
</head>
<body>

<div id='flyout_menu'>
<ul>
   <li><a href='#'><span>Link 1</span></a></li>
   <li><a href='#'><span>Link 2</span></a>
      <ul>
         <li><a href='#'><span>Product 1</span></a>
            <ul>
               <li><a href='#'><span>Sub Product</span></a></li>
               <li><a href='#'><span>Sub Product</span></a></li>
            </ul>
         </li>
         <li><a href='#'><span>Product 2</span></a>
            <ul>
               <li><a href='#'><span>Sub Product</span></a></li>
               <li><a href='#'><span>Sub Product</span></a></li>
            </ul>
         </li>
      </ul>
   </li>
   <li><a href='#'><span>Link 3</span></a></li>
   <li><a href='#'><span>Link 4</span></a></li>
</ul>
</div>

</body>
</html>

CSS code:

/* CSSTerm.com Flyout CSS menu */

#flyout_menu {
	font-weight: 600;
	width: 200px; }

#flyout_menu ul, li {
  list-style: none;
  margin: 0;
  padding: 0; 
}

#flyout_menu ul li.hover,
#flyout_menu ul li:hover { position: relative; z-index: 599; }

#flyout_menu ul ul{
	visibility: hidden;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 598;
}

#flyout_menu ul li:hover > ul { visibility: visible; }

#flyout_menu ul ul { top: 0; left: 100%; }

#flyout_menu span, #flyout_menu a {
	display: inline-block;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-decoration: none; }

#flyout_menu li { background: #005555; }
#flyout_menu li:hover, #flyout_menu li.active { background: #5FD367; }

#flyout_menu a {
    color: #FFF;
    line-height: 160%;
    padding: 16px 8px 16px 28px;
    width: 164px; }

#flyout_menu ul ul li {
	background: #006C6C;
	border-bottom: 1px solid #007171; }

#flyout_menu ul ul li:hover { background: #5FD367; }

Previous page: CSS Vertical Menu with description

Next page: CSS layouts