CSS Menus

Example of Menu without a DropDown (Run Example)

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>
.menu a
{
   text-decoration:none;
}

.menu ul li span, /* span is used to identify drop-down title */
.menu a
{
   display:block;      /* Expand hyperlink to fill container*/
   background-color:#61c6f0;
   color:#ccc;    
}

.menu ul li:hover span,
.menu a:hover,
.menu a:active
{
   background-color:#ddd;
   color:#0ac;
}

.menu ul
{
   list-style:none;  /* Remove the bullet from list items */
   padding:0px;   /* Remove default padding from list items */
   margin:0px;
}

.menu li
{
   width:80px;     /* width for each list item. Not absolutely necessary for horizontal menus. */
   text-align:center;  /* Not needed for either menu. */
}

.menu.horizontal li
{
   display:inline-block;  /* Force list items onto same line. */
   float:left;            /* Force list items tight together. */
}

.menu.vertical li
{
   display:block;   /* Force list items onto seperate lines. */
}
</style>
</head>

<body>
<nav class="horizontal menu">
<ul>
   <li><a href="../home/home.html">Home</a></li>
   <li><a href="../about_us/about_us.html">About Us</a></li>  
</ul>
</nav>

<br>
<br>

<nav class="vertical menu">
<ul>
   <li><a href="../home/home.html">Home</a></li>
   <li><a href="../about_us/about_us.html">About Us</a></li>  
</ul>
</nav>

</body>
</html>

Example of Menu with a DropDown (Run Example)

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>
.menu a
{
   text-decoration:none;
}

.menu ul li span, /* span is used to identify drop-down title */
.menu a
{
   display:block;      /* Expand hyperlink to fill container*/
   background-color:#61c6f0;
   color:#ccc;    
}

.menu ul li:hover span,
.menu a:hover,
.menu a:active
{
   background-color:#ddd;
   color:#0ac;
}

.menu ul
{
   list-style:none;  /* Remove the bullet from list items */
   padding:0px;   /* Remove default padding from list items */
   margin:0px;
}

.menu li
{
   width:80px;     /* width for each list item. Not absolutely necessary for horizontal menus. */
   text-align:center;  /* Not needed for either menu. */
}

.menu.horizontal li
{
   display:inline-block;  /* Force list items onto same line. */
   float:left;            /* Force list items tight together. */
}

.menu.vertical li
{
   display:block;   /* Force list items onto seperate lines. */
}


/* Additional code to have drop-down menus. */
.menu ul li:hover ul
{
   visibility:visible;
}

.menu ul li
{
   position:relative; /* Needed for drop-down menus. */
}

.menu ul li ul
{
   visibility:hidden;
   position:absolute;  /* Needed for drop-down menus. */
   z-index:10;
}

.menu.vertical ul li ul
{
   left:80px;  /* Position vertical drop-down menus */
   top:0px;
}
/* End of additional code for drop-down menus. */

</style>
</head>

<body>
<nav class="horizontal menu">
<ul>
  <li><a href="../home/home.html">Home</a></li>
  <li><span>Drop Down</span>
    <ul>
      <li><a href="../home/home.html">one</a></li>
      <li><a href="../home/home.html">two</a></li>
      <li><a href="../home/home.html">three</a></li>
      <li><a href="../home/home.html">four</a></li>
    </ul>
  </li>
 <li><a href="../about_us/about_us.html">About Us</a></li>
</ul>
</nav>

<br>
<br>

<nav class="vertical menu">
<ul>
  <li><a href="../home/home.html">Home</a></li>
  <li><span>Drop Down</span>
    <ul>
      <li><a href="../home/home.html">one</a></li>
      <li><a href="../home/home.html">two</a></li>
      <li><a href="../home/home.html">three</a></li>
      <li><a href="../home/home.html">four</a></li>
    </ul>
  </li>
 <li><a href="../about_us/about_us.html">About Us</a></li>
</ul>
</nav>

</body>
</html>

Layout

DIV Layout With Menus Example Run Example Code

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style type = "text/css">
div#container
{
  position:relative;
  width:600px;
  margin-left:auto;
  margin-right:auto;
  border:thin red solid;
}

div#banner
{
  width:100%;
  height:100px;
  border:thin orange solid;
}

div#breadcrumb
{
  width:100%;
  height:30px;
  border:thin gray solid;
}

div#pagecontent
{
  border:green solid thin;
  margin-left:90px;
  min-height:300px;
}

div#sidemenu
{
  width:90px;
  float:left;
  background-color:#ddd;
}

div#topmenu
{
  padding-left:90px;  /* move the menu items in 90px from the left edge */
  background-color:#ddd;
}

div#copyright
{
  border:brown thin solid;
  clear:both;
  height:50px;
}

div.menu.horizontal
{
  width:100%;
  display:inline-block;
  background-color:#ddd;
}

.menu a
{
  display:block;
  text-decoration:none;
  color:#3CF;
  background-color:#ddd;
}

.menu a:hover,
.menu a:active
{
  background-color:#bbb;
  color:#3ad;
}

.menu ul
{
  list-style:none;
  padding:0px;
  margin:0px;
}

.menu li
{
  width:90px;
  overflow:hidden;
}

.menu.horizontal li
{
    display:inline-block;
  float:left;
}

.menu.vertical li
{
    display:block;
}

</style>

</head>

<body>

<div id = "container">
  <div id = "banner">
  Banner
  </div>

  <div id = "breadcrumb">
  Breadcrumb
  </div id = "breadcrumb">

  <div id = "topmenu">
    <nav class = "horizontal menu">
      <ul>
        <li><a href="../home/home.html">Home</a></li>
        <li> <a href="../about_us/about_us.html">About Us</a></li>
        <li> <a href="../products/products.html">Products</a></li>
      </ul>
    </nav>
  </div>

  <div id = "sidemenu">
    <nav class = "vertical menu">
      <ul>
        <li><a href="../home/home.html">One</a></li>
        <li> <a href="../about_us/about_us.html">Two</a></li>
        <li> <a href="../products/products.html">Three</a></li>
      </ul>
    </nav>
  </div>

  <div id = "pagecontent">
  Page Content
  </div>

  <div id = "copyright">
  Copyright
  </div>
</div>

</body>
</html>