Another Responsive Menu with Awesome Hover Effect

Ganpati Bappa Morya...Happy Ganesh Chaturthi and also Happy Samvantsari...
# Today I will talk about a responsive menu which is not so hard to create and not so hard to understand..:)
# So let's start with a image.

Click to Zoom

# You can see the menu in the picture that it looks good and also something like professional.
# We are going to make it with simple css and html.
# First of all I want to tell you that we'll take a ul and 5 li(s) inside it.
# We'll use 'Open sans' font from google web fonts.
# Don't worry about background it's just generated using css. ( linear-gradient property and Of course by me. ).
# May be only one question is coming to your mind that how it will look in real?

Live Preview:

See the Pen Another responsive css menu by kaushalya (@kman) on CodePen

# You can hover for checking the hover effect. You can also resize browser to check responsiveness of the menu. It'll look like this:

Let's start coding :)

# First of all, We'll take a ul with 5 li(s). And import 'Open sans' from Google web fonts.

@import url(http://fonts.googleapis.com/css?family=Open+Sans);
<ul class="menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">Clients</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Help</a></li>
    <li><a href="#">Contact</a></li>
</ul>

# Then just style each and every li with a simple background and some other properties.

ul.menu {
    font: bold 1em 'Open sans',sans-serif;
    color: white;
    list-style: none;
    padding: 0;
    border: none;
    margin: 1em auto;
}
ul.menu li {
    transition: .4s ease-in-out;
    -moz-transition: .4s ease-in-out;
    -webkit-transition: .4s ease-in-out;
    -ms-transition: .4s ease-in-out;
    -o-transition: .4s ease-in-out;
    display: inline-block;
    background: rgb(150,60,25);
    opacity: 0.7;
    padding: 1em;
    border: none;
    -webkit-border-radius: 10%;
    -moz-border-radius: 10%;
    border-radius: 10%;
    -webkit-box-shadow: 0 0.2em 0.5em grey;
    -moz-box-shadow: 0 0.2em 0.5em grey;
    box-shadow: 0 0.2em 0.5em grey;
}
ul.menu li a {
    color: inherit;
    text-decoration: none;
} 

# We've added some useful properties to ul.menu. # Then we've added transition to ul.menu li because we want it in hover state. Then displayed inline-block because It's look better in it.Then added background, opacity, padding, border. Then added border-radius and box-shadow for best look.And we've added color: inherit for inheriting the color from parent tag and text-decoration: none because we don't want underline.
# Afterwards, we are going to add hover state to the li(s).

ul.menu:hover li {
    opacity: 0.5;
}
ul.menu li:hover {
    cursor: pointer;
    opacity: 1;
    -webkit-border-radius: 0%;
    -moz-border-radius: 0%;
    border-radius: 0%;
    -webkit-box-shadow: 0 0 0.5em 0.1em maroon;
    -moz-box-shadow: 0 0 0.5em 0.1em maroon;
    box-shadow: 0 0 0.5em 0.1em maroon;
}

# There should be a question in your mind that why we've added that first block.(opcacity: 0.5 's)
# Because we want to transfer all li's opacity to half one when menu hovered(Awesome effect). And added opacity: 1 to the second block because we want to see the active/hover li in full opacity.
# Now, It'll look this when a tab is actived/hovered. # Then we have to add media queries for responsiveness.

@media (max-width: 29em)
  {
    ul.menu li {
      display: block;
    }
    ul.menu li {
      -webkit-border-radius: 0;
      -moz-border-radius: 0;
      border-radius: 0;
      margin: 0.3em 0;
    }
  }

# I've used em in all the sizing because it's better then px. And you should also start using em for sizing.
# So now it's all done. let's look at preview:

See the Pen Another responsive css menu by kaushalya (@kman) on CodePen

# Any queries or questions??? Please drop in comments. :)