Drop down menu on pure css

There are a lot of examples of drop down menus written on JS in the internet. But it is also possible to create a drop down menu without using javascript. This method has one huge benefit – your site will work faster without loading extra JS code.

HTML

<menu>
  <div class="menu-item">
    <a href="#">item-1</a>
    <div class="menu-submenu">
      <p><a href="#">subitem-1</a></p>
      <p><a href="#">subitem-2</a></p>
      <p><a href="#">subitem-3</a></p>
    </div>
  </div>
  <div class="menu-item">
    <a href="#">item-2</a>
    <div class="menu-submenu">
      <p><a href="#">subitem-1</a></p>
      <p><a href="#">subitem-2</a></p>
      <p><a href="#">subitem-3</a></p>
    </div>
  </div>
  <div class="menu-item">
    <a href="#">item-3</a>
    <div class="menu-submenu">
      <p><a href="#">subitem-1</a></p>
      <p><a href="#">subitem-2</a></p>
      <p><a href="#">subitem-3</a></p>
      <p><a href="#">subitem-4</a></p>
      <p><a href="#">subitem-5</a></p>
    </div>
  </div>
</menu>

CSS

.menu-item {
  position: relative;
  display: inline-block;
}

.menu-submenu {
  padding: 10px 0;
  border: 1px solid #473F3C;
  background: #fff;
  display: none;
  position: absolute;
  top: 18px;
  left: 0;
  white-space: nowrap;
} 

.menu-item:hover .menu-submenu {
  display: block; /* here we show submenu on hover event */
}

This is how our menu will looks like.

The menu will work with all modern browsers.

How to create percentage bar

Hello, here is example of how create a percentage bar by using only HTML and CSS.

In the final we are going to have this:

We should be able to change the brown background part to illustrate percentage rate.

And it could be easily created by using only HTML and CSS lets see the code.

HTML

<div class="post-percentage-bar">
  <div class="post-percentage-bar-filled"></div>
</div>

CSS

  .post-percentage-bar {
    width: 200px;
    height: 17px;
    background: #d25349;
    border: 1px solid #6a524a;
    border-radius: 10px;
    color: #fff;
  }

  .post-percentage-bar-filled {
    width: 30%;
    height: 17px;
    background: #6a524a;
    border-radius: 10px;
    text-align: center;
    font: Tahoma;
    font-size: 12px;
  }

All that we need is only two blocks and simple CSS code for them.
We can simple change the brown background by changing parameter width for .post-percentage-bar-filled
Lets put width as 80%.

As we can see, now indicator shows 80% filled bar. You can put there a variable from programming language or JS. So with two divs and simple CSS code we can create a nice looking percentage bar. I hope this post was helpful. Good luck.