5

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

Votes + Comments
Excellent and so muhc better than all that nasty JavaScript
Nice example with useful fiddle
Simple and useful
<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>

I enjoy being challanged on a daily basis. I love all aspects of technology and business.

1
Contributor
0
Replies
36
Views
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.