Core CSS

Dropdown Menus

This CSS Reference section displays example code that shows how to style list tags to create dropdown menus.

DropDownMenu.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net</title>
    <style type="text/css">
      ul.cHorizMenu {
        list-style-type: none;
        overflow: hidden;
        background-color: #BBCC90;
      }
      ul.cHorizMenu > li {
        float: left;
      }
      ul.cHorizMenu > li a {
        display: block;
        color: #AA4422;
        text-align: center;
        padding: 5px 10px;
        text-decoration: none;
      }
      ul.cHorizMenu > li a:hover {
        background-color: #CCDDAA;
      }
      ul.cDropMenu {
        display: none;
        position: absolute;
        background-color: #eeeeee;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.7);
        padding: 0px;
        z-index: 1;
      }
      .cDrop:hover ul.cDropMenu {
        display: block;
      }
  </style>
  </head>
  <body>
    <ul class="cHorizMenu">
	  <li class="cDrop"><a href="#h1">H1</a>
	    <ul class="cDropMenu" style="list-style-type: none;">
	      <li><a href="#h1d1">H1D1</a></li>
	      <li><a href="#h1d2">H1D2</a></li>
	      <li><a href="#h1d3">H1D3</a></li>
	    </ul>
	  </li>
	  <li class="cDrop"><a href="#h2">H2</a>
	    <ul class="cDropMenu" style="list-style-type: none;">
	      <li><a href="#h2d1">H2D1</a></li>
	      <li><a href="#h2d2">H2D2</a></li>
	    </ul>
	  </li>
	  <li class="cDrop"><a href="#h3">H3</a>
	    <ul class="cDropMenu" style="list-style-type: none;">
	      <li><a href="#h3d1">H3D1</a></li>
	    </ul>
	  </li>
	  <li class="cDrop"><a href="#h4">H4</a>
	    <ul class="cDropMenu" style="list-style-type: none;">
	      <li><a href="#h4d1">H4D1</a></li>
	      <li><a href="#h4d2">H4D2</a></li>
	      <li><a href="#h4d3">H4D3</a></li>
	    </ul>
	  </li>
	</ul>
  </body>
</html>
 

Output

 
 

© 2007–2025 XoaX.net LLC. All rights reserved.