Jquery Navigation Menu: Dropdown CSS MENU

Create only index.html

<!DOCTYPE>
<html>
<head>
<meta charset="utf-8" />
<title>Responsive Design</title>
<style>
body {
 font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
 font-size: 13px;
 text-align: center;
 background: #6C6C6C;
}
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 a {
 text-decoration:none;
 color:#303030;
}
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 a {
 color:#FFFFFF;
 text-decoration:none;
}
ul li ul li:hover {
 background: #666;
}
ul li:hover ul {
 display: block;
 opacity: 1;
 visibility: visible;
}
h2 {
 color:#FFFFFF;
}
</style>
</head>
<body>
<h2>Simple Dropdown Menu Using Css</h2>
<ul>
  <li><a href="#">Menu1</a></li>
  <li><a href="#">Menu2</a></li>
  <li>Drop-Down
    <ul>
      <li><a href="#">Menu1.1</a></li>
      <li><a href="#">Menu1.2</a></li>
      <li><a href="#">Menu1.3</a></li>
    </ul>
  </li>
  <li><a href="#">Menu3</a></li>
  <li><a href="#">Menu4</a></li>
  <li><a href="#">Menu5</a></li>
  <li>Drop-Down
    <ul>
      <li><a href="#">Menu2.1</a></li>
      <li><a href="#">Menu2.2</a></li>
      <li><a href="#">Menu2.3</a></li>
    </ul>
  </li>
  <li><a href="#">Menu6</a></li>
  <li><a href="#">Menu7</a></li>
</ul>
</body>
</html>

Thursday, 20 August 2015

Dropdown CSS MENU

Create only index.html

No comments:

Post a Comment