Creating a Simple CSS Navigation Menu

JorgeM 5 444 Views

I have seen several posts through the years with questions about navigation menus. Menus can be built using different approaches. This example is easy to build and simple to integrate with your site. The menu is built only using HTML and CSS so you don't have to have a lot of web development experience, and still enjoy a nice and clean navigation menu on your site.

A working demo can be found on JSFiddle.net

With some minor updates, you can easily change the size and color of the items.

menu.png

AleMonteiro commented: Simple and useful +8
diafol commented: Nice example with useful fiddle +15
DaveAmour commented: Excellent and so muhc better than all that nasty JavaScript +8 
<style>

* {
  margin: 0;
  padding: 0; 
}

body {
  background-color: #e5e5e5;
}

#menu {
  list-style: none;
  position: relative;
}

#menu ul {
  position: absolute;
  left: 0;  
  top: 100%;
  display: none;
}

#menu li {
  float: left;
  position: relative
}

#menu a {
  text-decoration: none;
  padding: 10px 0px;
  width: 7.5em;
  background-color: #604080;
  color: #ffffff;
  float: left;
  text-align: center;
  border: 1px solid #ffffff;
  cursor: context-menu;
}

#menu a:hover {
  background-color: #ecbf41;
  color: #333;
}

#menu li:hover ul {
  display: block;
}

#menu ul a {
  width: 10em;
}

#menu ul li {
  display: block;
}

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

#menu li:hover ul ul {
  display: none;
}

#menu ul li:hover ul {
  display: block;
}

</style>

<body>

<ul id="menu">
  <li><a href="#">Home</a></li>
    <li><a>OS</a>
    <ul>
      <li><a href="#">Linux</a></li>
      <li><a href="#">Windows</a></li>
    </ul>
  </li>
  <li><a>Dev</a>
    <ul>
        <li><a href="#">JSP</a></li>
        <li><a href="#">PHP</a></li>
        <li><a>ASP.NET »</a>
          <ul>
            <li><a href="#">C#</a></li>
            <li><a href="#">VB.NET</a></li>
          </ul>
        </li>
    </ul>
  </li>
  <li><a>Support</a>
    <ul>
      <li><a href="#">Register</a></li>
      <li><a href="#">Contact Us</a></li>
    </ul>
  </li>
</ul>

</body>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Edit Preview