PHP HTML CSS

CSS3 Simple Dropdown Menu

css3 menu
Dropdown menus are an excellent feature in website because it helps to clean up a busy layout. If structured correctly, drop-down menus can be a great navigation tool and user friendly. The dropdown menu structure should be clear especially the root item as it need to represent what are the items it contains.
 
With a nice combination of box-shadow, transition and text-shadow in CSS3, I will create a simple CSS3 Dropdown menu. I use ordered list to create a list of menu and use the CSS3 to transform it to dropdown menu. Here the HTML code for ordered list and external CSS link:
<!DOCTYPE html>
<html>
<head>
<title>Dropdown Menu</title>
<link rel="stylesheet" type="text/css" href="/style.css"> <!--external CSS link for dropdown menu-->
</head>
<body>
<ul> <!--unordered list-->
  <li>Home</li>
  <li>Web Tutorial
	<ul> <!--sub for web tutorial-->
      <li>HTML5</li>
      <li>CSS3</li>
      <li>PHP</li>
    </ul>
  </li>
  <li>MVC <!--sub for MVC-->
    <ul>
      <li>CakePHP</li>
      <li>Laravel</li>
      <li>FuelPHP</li>
    </ul>
  </li>
  <li>Blog</li>
  <li>Contact</li>
</ul>
</body>
</html>

 

Save the file as index.html and the basic view for above code is shown as below:
bullet
 
Now, create a CSS file to give a dropdown menu style to the unordered list. I decided to use external CSS as it is easier to manage and clean. The CSS file should rename as style.css because in index.html, the external link has been rename to style.css name. The code in style.css is as shown below:
body {
  font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  padding: 20px 50px 150px;
  font-size: 13px;
  text-align: center;
  background: #CCCCFF;
}

ul {
  text-align: left;
  display: inline;
  margin: 0;
  padding: 15px 4px 17px 0;
  list-style: none;
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}
ul li {
  font: bold 12px/18px sans-serif;
  display: inline-block;
  margin-right: -4px;
  position: relative;
  padding: 15px 20px;
  background: #fff;
  cursor: pointer;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}
ul li:hover {
  background: #555;
  color: #fff;
}
ul li ul {
  padding: 0;
  position: absolute;
  top: 48px;
  left: 0;
  width: 150px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  display: none;
  opacity: 0;
  visibility: hidden;
  -webkit-transiton: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -ms-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  -transition: opacity 0.2s;
}
ul li ul li {
  background: #555;
  display: block;
  color: #fff;
  text-shadow: 0 -1px 0 #000;
}
ul li ul li:hover { background: #666; }
ul li:hover ul {
  display: block;
  opacity: 1;
  visibility: visible;
}

 

Save your CSS file and refresh your index.html page to see the result as shon below:
output-dropdown-menu
Download the source file from download section and good luck!
Author Information
Muhammad Asyraf bin Wahi Anuar
Web Administrator
Asyraf enjoys life and has great enthusiasm for all outdoors activities especially MTB! Don't Follow Me. I'm Lost Too -_-

Muhammad Asyraf bin Wahi Anuar | Copyright 2017 | Informatic Trooper