Dropdown Menu 03

In this example below you will see how to do a Dropdown Menu 03 with some HTML / CSS and Javascript

Here I test some Dropdown Menus I found on the net.

Thumbnail
This awesome code was written by markus_z, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright markus_z ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Dropdown Menu 03</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <a href="http://www.antsmagazine.com/web-development/25-free-examples-of-css-drop-down-list-and-menus/">25 Beispiele</a>
<ul class="dropmenu">
  <li><a href="#">Home</a></li>
  <li class="dir"><a href="#">About</a><ul>
    <li><a href="#">Item</a></li>
    <li class="dir"><a href="#">Subs Here</a><ul>
      <li><a href="#">Item</a></li>
      <li><a href="#">Item</a></li>
      <li><a href="#">Item</a></li>
      <li><a href="#">Item</a></li>
    </ul></li>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
  </ul></li>
  <li><a href="#">Portfolio</a></li>
  <li><a href="#">Contact</a></li>
</ul>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/markus_z/dropdown-menu-03-aBblv */
/* basic menu code 1.0 */
.dropmenu ul {
  margin: 0;
  padding: 0;
}

.dropmenu li {
  float: left;
  list-style: none;
	background: #bbb;
	position: relative;
}

.dropmenu li a {
	text-decoration: none;
	color: #fff;
	display: block;
	padding: 0.5em 1em;
}

.dropmenu li ul {
	display: none;
	position: absolute;
	left: 0; top: 100%;
	width: 10em;
	box-shadow: 0 0 2px rgba(0,0,0,0.2);
	z-index: 999;
}

.dropmenu li ul li {
	float: none;
}

.dropmenu li ul li ul {
	left: 100%; top: 0;
}

.dropmenu li:hover {
	background: #aaa;
}

.dropmenu li:hover > ul {
	display: block;
}

.dropmenu li.dir > a:after {
	content: " +";
	color: #fff;
}

.dropmenu:after {
	content: "";
	display: table;
	clear: both;
}

Comments