Fixed Vertical Menu with Submenus

HTML, CSS - 1 level of submenu

by Ovi Stof

HTML

<div id="meniu">
  <ul>
    <li class="activ submnu"><a href="#">Option 1 </a>
      <ul>
        <li><a href="#">Option 1.1</a></li>
        <li><a href="#">Option 1.2</a></li>
      </ul>   
    </li>       
    <li class="submnu"><a href="#">Option 2</a>
      <ul>
        <li><a href="#">Option 2.1</a></li>
        <li><a href="#">Option 2.2</a></li>
      </ul>
    </li>
    <li><a href="#">Option 3</a></li>		
    <li class="submnu"><a href="#">Option 4</a>
      <ul>
        <li><a href="#">Option 4.1</a></li>
        <li><a href="#">Option 4.2</a></li>
        <li><a href="#">Option 4.3</a></li>
        <li><a href="#">Option 4.4</a></li>
      </ul>
    </li>
  </ul>
</div>
<div class="div_drt">
  <h1>Fixed Vertical Menu with Submenus</h1>
  <p style="text-align:right;"><a href="https://www.w3schools.com/code/tryit.asp?filename=GLH2UEG23BWD" target="_blank"> Sursa <i class="fa fa-external-link"></i></a></p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc hendrerit sapien vel lacus laoreet, et mattis eros ornare. Etiam eu dui velit. Proin turpis est, posuere sodales turpis eget, gravida malesuada turpis. Proin in nisl mattis, porttitor eros eu, accumsan velit. Nullam laoreet ante vel est luctus, id cursus ligula iaculis. Vestibulum consequat nulla et lorem tincidunt scelerisque. Suspendisse pulvinar dui odio, vel euismod enim accumsan vestibulum.</p>
  <p>Phasellus non lectus magna. Pellentesque elementum, elit ac luctus feugiat, erat turpis dignissim velit, ac ullamcorper lectus diam quis risus. Sed congue mauris sapien, sed sagittis quam porttitor eu. Praesent hendrerit tristique mi, eu euismod ipsum hendrerit eu. In condimentum ultrices mattis. Maecenas lobortis, quam eget lobortis rutrum, eros neque dapibus lacus, vel sollicitudin felis odio non lorem. Nunc ut malesuada mauris, ac aliquet leo. Sed dolor magna, feugiat interdum tempus ut, vulputate id libero. Duis vitae pulvinar ex, ut bibendum nibh. Pellentesque eget libero vel leo...

CSS

:root {
  --culMnu: Turquoise;
  --culSubMnu:Teal;
  --culPlana:LightBlue;
  --culMnuActiv: DarkTurquoise;
  --culTxt:LightYellow;
  --bordura:white;
  --marTxt:14px;
  --latMnu:200px;
}
#meniu {width:var(--latMnu);float:left;}
#meniu ul {margin:0px; padding:0px;}
#meniu > ul > li.activ a {background: var(--culMnuActiv);}
#meniu li {list-style: none;}
#meniu ul {background: var(--culMnu);}
#meniu ul li {
  border-bottom: 1px dashed var(--bordura);
  border-top: 1px dashed var(--bordura);
  height:30px;
}
#meniu a {
  color:  var(--culTxt);
  cursor: pointer;
  display:block;
  height:25px;
  font-family: 'Arial Narrow', Tahoma, Arial, sans-serif;
  font-size:var(--marTxt); 
  line-height: 25px;
  text-indent: 10px;
  text-decoration:none;
  width:100%;
}
#meniu li:hover {
  background: var(--culPlana);
  position: relative;
} 
#meniu ul li.submnu:hover ul li a {color:var(--culTxt);}
#meniu ul li.submnu ul {
  display: none;
}
#meniu ul li.submnu:hover ul {
  background: var(--culSubMnu);
  border: 1px solid var(--bordura);
  display: block;
  position: absolute;
  left: 20px;
  top: 5px;
}
#meniu ul li.submnu:hover ul li {
  border-bottom: 1px dashed var(--bordura);
  float:left;
  width:var(--latMnu);
}
#meniu ul li.submnu:hover ul {
  background: var(--culSubMnu);
  border: 1px solid var(--bordura);
  display: block;
  position: absolute;
  left: var(--latMnu);
  top: 3px;
  z-index:999999;
}
#meniu ul li.submnu > a:after {
  content: '❯';
  float:right;
  margin-right: 5px;
}
.div_drt {
  width:calc(99% - var(--latMnu));
  border:1px dashed var(--bordura);
  float:right;
  top:0;
}