Simple menu with submenu - CSS Only

In this example below you will see how to do a Simple menu with submenu - CSS Only with some HTML / CSS and Javascript

Simple menu with submenu - CSS Only

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

<head>
  <meta charset="UTF-8">
  <title>Simple menu with submenu - CSS Only</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="menu">
  <ul class="menu-list">
    <li><a href="#">Home</a></li>
    <li>
      <a href="#">Servi├žos</a>
       <ul class="sub-menu">
        <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="#">Suporte</a></li>
    <li><a href="#">Sobre</a></li>
    <li><a href="#">Contato</a></li>
  </ul>
</div>

<div class="site-content">
  <h1>Lorem ipsum dolor sit amet</h1>
  <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam mollis blandit dignissim. Proin rutrum fermentum purus, et interdum mauris pretium in. Vivamus ultrices sagittis odio et ornare. Duis tempus ornare tellus, a posuere tortor aliquam eget. Curabitur mi nulla, mattis a laoreet eget, suscipit eu sapien. Vivamus suscipit posuere luctus. Aenean nisl nunc, tincidunt quis libero vitae, varius interdum nisl. Aenean vel libero sit amet urna faucibus interdum. Ut consequat orci non bibendum adipiscing.
</p>
<p>
Etiam tempor pharetra felis nec sagittis. Quisque fermentum nibh et euismod ultrices. Sed rhoncus pharetra pulvinar. Praesent justo justo, viverra a nunc ac, tristique euismod massa. Donec ac laoreet nisi, in dictum erat. Sed sagittis, nisl sollicitudin scelerisque adipiscing, sem orci pretium nunc, sit amet faucibus tortor metus ac magna. Phasellus in adipiscing eros. Aliquam erat volutpat. Nunc auctor justo ut nulla porta tristique vitae sit amet erat. Vestibulum tincidunt arcu mi, eget commodo lectus egestas non.
</p>
<p>
Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse ut molestie orci. Suspendisse id augue dictum, feugiat nisi quis, vehicula purus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut mollis hendrerit consectetur. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non enim quis ipsum varius accumsan. Morbi id adipiscing massa. Mauris felis nulla, venenatis a mauris molestie, suscipit sollicitudin dolor. Phasellus tincidunt a sapien et vestibulum. Integer nisl libero, imperdiet quis varius ut, venenatis sit amet dui.
</p>
<p>
In mattis et est id gravida. Pellentesque nec tortor lectus. Vivamus id vestibulum arcu. Praesent volutpat purus arcu, vel eleifend justo consequat nec. Aenean at mattis augue. Vivamus at tortor nisi. Integer bibendum nulla ac congue imperdiet. Duis interdum lorem sit amet adipiscing egestas. Ut eget auctor turpis. Nullam sit amet urna id erat consectetur sagittis sed sit amet metus. Duis semper euismod fermentum.
</p>
<p>
Aenean rutrum sed neque quis pretium. Nunc laoreet nisl vitae tellus euismod molestie ut vitae turpis. Nunc vitae ultricies mauris. Donec vulputate sagittis aliquam. Aliquam imperdiet dui et ultricies lacinia. Nulla et sollicitudin lorem, ut fringilla leo. Maecenas vestibulum justo facilisis auctor vulputate. Quisque dignissim felis id lacus tempor, ut pretium lacus facilisis. Fusce eget rutrum sem, a scelerisque nibh. Ut ante massa, aliquam vitae consequat ac, malesuada rutrum est. Aliquam dapibus turpis sit amet augue pulvinar, quis eleifend orci consequat. Fusce nibh dui, varius nec mollis sit amet, tincidunt at enim. Vivamus metus orci, pellentesque vitae urna accumsan, malesuada congue odio. Phasellus mattis non turpis et congue. Fusce vitae enim semper, dignissim dolor sed, vehicula lorem. Suspendisse quis feugiat dui.
</p>
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/luizomf/simple-menu-with-submenu-css-only-KqCbE */
*, *:after, *:before{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: sans-serif;
  font-size: 14px;
  line-height: 1.5;
}
.menu{
  background: #000;
}
.menu .menu-list, .menu .sub-menu{
  list-style: none;
}
.menu a{
  color: #fff;
  text-decoration: none;
  display: block;
  cursor: pointer;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 700;
  letter-spacing:0.2em;
}
.menu > .menu-list > li{
  float: left;
  position: relative;
}
.menu > .menu-list > li > a {
  padding: 20px;
  margin: 0 5px;
  background: #000;
}
.menu > .menu-list > li:hover a {
  background: #444;
}
.menu > .menu-list > li:hover > .sub-menu {
  display: block;
}
.menu > .menu-list > li > .sub-menu {
  position: absolute;
  top: 50px;
  left: 5px;
  background: blue;
  min-width: 200px;
  z-index: 1000;
  display: none;
}
.menu > .menu-list > li > .sub-menu > li > a {
	padding: 10px 20px;
}
.menu:after {
  content: '.';
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
.site-content{
  padding: 20px;
}
h1{
  font-size: 22px;
  margin: 0 0 0.6em 0;
  letter-spacing:0.2em;
  color: #444;
}
p{
  margin: 0 0 1.6em 0;
}

Comments