title: Sidebar menu and hover submenus with CSS
body: <p>I'm looking for improve my <code>sidebar menu</code> in my <code>Django application</code>. I would like to display submenus with a hover effect when users put their mouses on each menu titles.</p>
  
  <p>This is my script :</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@import url(//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css);
  
  }
  @import url(https://fonts.googleapis.com/css?family=Titillium+Web:300);
  .fa-2x {
    font-size: 2em;
  }
  .fa {
    position: relative;
    display: table-cell;
    width: 60px;
    height: 36px;
    text-align: center;
    vertical-align: middle;
    font-size: 20px;
  }
  .main-menu:hover,
  nav.main-menu.expanded {
    width: 250px;
    overflow: visible;
  }
  .main-menu {
    background: #0083A2;
    border-top: 1px solid black;
    border-right: 1px solid black;
    border-left: 1px solid black;
    border-bottom: 1px solid black;
    position: absolute;
    top: 170px;
    bottom: 0;
    height: 80%;
    left: 0;
    width: 60px;
    overflow: hidden;
    -webkit-transition: width .05s linear;
    transition: width .05s linear;
    -webkit-transform: translateZ(0) scale(1, 1);
    z-index: 1000;
  }
  .main-menu&gt;ul {
    margin: 7px 0;
  }
  .main-menu li {
    position: relative;
    display: block;
    width: 250px;
  }
  .main-menu li&gt;a {
    position: relative;
    display: table;
    border-collapse: collapse;
    border-spacing: 0;
    color: white;
    font-family: Helvetica;
    font-weight: bolder;
    font-size: 14px;
    text-decoration: none;
    -webkit-transform: translateZ(0) scale(1, 1);
    -webkit-transition: all .1s linear;
    transition: all .1s linear;
  }
  .main-menu .nav-icon {
    position: relative;
    display: table-cell;
    width: 60px;
    height: 36px;
    text-align: center;
    vertical-align: middle;
    font-size: 18px;
  }
  .main-menu .nav-text {
    position: relative;
    display: table-cell;
    vertical-align: middle;
    width: 190px;
    font-family: 'Helvetica Neue', sans-serif;
  }
  .main-menu&gt;ul.logout {
    position: absolute;
    left: 0;
    bottom: 0;
  }
  .no-touch .scrollable.hover {
    overflow-y: hidden;
  }
  .no-touch .scrollable.hover:hover {
    overflow-y: auto;
    overflow: visible;
  }
  a:hover,
  a:focus {
    text-decoration: none;
  }
  nav {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
  }
  nav ul,
  nav li {
    outline: 0;
    margin: 0;
    padding: 0;
  }
  .main-menu li:hover&gt;a,
  nav.main-menu li.active&gt;a,
  .dropdown-menu&gt;li&gt;a:hover,
  .dropdown-menu&gt;li&gt;a:focus,
  .dropdown-menu&gt;.active&gt;a,
  .dropdown-menu&gt;.active&gt;a:hover,
  .dropdown-menu&gt;.active&gt;a:focus,
  .no-touch .dashboard-page nav.dashboard-menu ul li:hover a,
  .dashboard-page nav.dashboard-menu ul li.active a {
    color: #fff;
    background-color: #5fa2db;
  }
  .area {
    float: left;
    background: #e2e2e2;
    width: 100%;
    height: 100%;
  }
  @font-face {
    font-family: 'Helvetica Neue';
    font-style: normal;
    font-weight: 300;
    src: local('Helvetica Neue'), local('Helvetica Neue'), url(http://themes.googleusercontent.com/static/fonts/titilliumweb/v2/anMUvcNT0H1YN4FII8wpr24bNCNEoFTpS2BTjF6FB5E.woff) format('woff');
  }
  nav.main-menu&gt;ul&gt;li.has-subnav&gt;ul&gt;li {
    margin-left: 100px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
  
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
    &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
    &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
  
  &lt;/head&gt;
  
  
  
  &lt;div class="area"&gt;&lt;/div&gt;
  &lt;nav class="main-menu"&gt;
    &lt;ul&gt;
      &lt;li&gt;
        &lt;a href="{% url " accueil " %}"&gt;
          &lt;i class="fa fa-home fa-2x"&gt;&lt;/i&gt;
          &lt;span class="nav-text"&gt;
             Accueil
          &lt;/span&gt;
        &lt;/a&gt;
      &lt;/li&gt;
      &lt;li class="has-subnav"&gt;
        &lt;a href="#"&gt;&lt;i class="fa fa-file-text-o fa-2x"&gt;&lt;/i&gt;
          &lt;span class="nav-text"&gt;Fiches Identifications&lt;/span&gt;&lt;/a&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;a href="#"&gt;Accueil&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Individus&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Sociétés&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;a href="#"&gt;
          &lt;i class="fa fa-bar-chart-o fa-2x"&gt;&lt;/i&gt;
          &lt;span class="nav-text"&gt;
             Statistiques
          &lt;/span&gt;
        &lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;a href="#"&gt;
          &lt;i class="fa fa-folder fa-2x"&gt;&lt;/i&gt;
          &lt;span class="nav-text"&gt;
             DatasystemsDOC
          &lt;/span&gt;
        &lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;a href="#"&gt;
          &lt;i class="fa fa-cog fa-spin fa-2x fa-fw"&gt;&lt;/i&gt;
          &lt;span class="nav-text"&gt;
             Configurations
          &lt;/span&gt;
        &lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;a href="#"&gt;
          &lt;i class="fa fa-life-ring fa-2x"&gt;&lt;/i&gt;
          &lt;span class="nav-text"&gt;
            Aide et Support
          &lt;/span&gt;
        &lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;a href="#"&gt;
          &lt;i class="fa fa-info fa-2x"&gt;&lt;/i&gt;
          &lt;span class="nav-text"&gt;
             Documentation
          &lt;/span&gt;
        &lt;/a&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  
    &lt;ul class="logout"&gt;
      &lt;li&gt;
        &lt;a href="#"&gt;
          &lt;i class="fa fa-power-off fa-2x"&gt;&lt;/i&gt;
          &lt;span class="nav-text"&gt;
             Logout
          &lt;/span&gt;
        &lt;/a&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/nav&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>My preview is available there : <a href="https://www.w3schools.com/code/tryit.asp?filename=FH9559C57CNU" rel="nofollow noreferrer">see preview</a></p>
  
  <p>I would like to display submenus <code>Accueil</code> <code>Individus</code> <code>Sociétés</code> when I put my mouse on <code>Fiches Identifications</code> with a vertical hover effect.</p>
  
  <p>Do you have any idea to do that ?</p>