Html Vertical Menu's, Sub menus are appearing not below parent

vertical menu css with submenus
drop down menu bar in html
html sidebar menu
css sidebar navigation menu
bootstrap vertical navbar responsive
how to create menu in html
responsive navigation menu css
menu and submenu in html examples

I have created one vertical menu bar with multiple sub menus but it's sub menus are appearing not below to parent menu. Html code given below

.vertical-menu {
  width: 400px;
  /* Set a width if you like */
}

.vertical-menu a {
  background-color: #eee;
  /* Grey background color */
  color: black;
  /* Black text color */
  display: block;
  /* Make the links appear below each other */
  padding: 12px;
  /* Add some padding */
  text-decoration: none;
  /* Remove underline from links */
}

.vertical-menu a:hover {
  background-color: #ccc;
  /* Dark grey background on mouse-over */
}

.vertical-menu a.active {
  background-color: #4CAF50;
  /* Add a green color to the "active/current" link */
  color: white;
}

#menu-v li ul {
  position: absolute;
  width: 200px;
  /*Sub Menu Items width */
  visibility: hidden;
}

#menu-v li a {
  font: normal 12px Arial;
  border-top: 1px solid #ccc;
  display: block;
  /*overflow: auto; force hasLayout in IE7 */
  color: black;
  text-decoration: none;
  line-height: 26px;
  padding-left: 26px;
}

#menu-v li,
#menu-v a {
  zoom: 1;
}


/* Hacks for IE6, IE7 */

#menu-v,
#menu-v ul {
  width: 180px;
  /* Main Menu Item widths */
  border: 1px solid #ccc;
  border-top: none;
  position: relative;
  font-size: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  display: block;
  z-index: 9;
}
<div class="vertical-menu">
  <ul id="menu-v" class="main">
    <li><a href="#">BIZ OPS -> </a>
      <ul class="menu">
        <li><a href="#">UPLOAD DATA -></a>
          <ul class="sub-menu">
            <li><a href="x1.jsp">UPLOAD x1</a></li>
            <li><a href="x2.jsp">UPLOAD x2</a></li>
            <li><a href="x3.jsp">UPLOAD x3</a></li>
          </ul>
        </li>
        <!--             <li><a href="worklist.jsp">WORK LIST</a></li> -->
        <li><a href="#">IOT -></a>
          <ul class="sub-menu">
            <li><a href="europe.jsp">EUROPE</a></li>
            <li><a href="apac.jsp">APAC</a></li>
            <li><a href="ag.jsp">AG</a></li>
            <li><a href="internalt.jsp">INTERNAL MOVEMENT</a></li>
            <li><a href="supportiotworklist.jsp">SUPPORT</a></li>
          </ul>

        </li>
      </ul>
    </li>
    <li><a href="#">GENERATE REPORTS-> </a>
      <ul class="sub">
        <li><a href="downloadexcel.jsp">x1 REPORT</a></li>
        <li><a href="downloadhc.jsp">x2 REPORT</a></li>
        <li><a href="error.jsp">x3 REPORT</a></li>
      </ul>
    </li>
    <li><a href="#">COST CASE -></a>
      <ul class="sub">
        <li><a href="index1.jsp">ADD CCN/PCR</a></li>
        <li><a href="viewcostcase.jsp">DEBAND COST CASE</a></li>
        <li><a href="cirelease.jsp">CI RELEASE</a></li>
        <li><a href="simplecc.jsp">VIEW COST CASE</a></li>
        <li><a href="IotCostCaseView.jsp">IOT COST CASE VEIW & EDIT</a></li>
      </ul>
    </li>
    <li><a href="#">HIRE EMPLOYEE -></a>
      <ul class="sub">
        <li><a href="#">GRB -></a>
          <ul class="sub">
            <li><a href="int.jsp">INTERNAL HIRE</a></li>
            <li><a href="ext.jsp">EXTERNAL HIRE</a></li>
          </ul>
        </li>
        <li><a href="#">PROMOTIONS -></a>
          <ul class="sub">
            <li><a href="promolist.jsp">PROMOTIONS WORKLIST</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="#">WORK LIST -></a>
      <ul class="sub">
        <li><a href="GrbPage.jsp">GRB WORKLIST</a></li>
        <li><a href="CcnPcrWorklist.jsp">CCN/PCR WORKLIST</a></li>
        <li><a href="DebandWorklist.jsp">DEBAND WORKLIST</a></li>
        <li><a href="LowUtemForm.jsp">LOW UTE WORKLIST</a></li>
        <li><a href="nvp.jsp">NEGATIVE VACANT POSITION WL</a></li>
      </ul>
    </li>
    <li><a href="GrbList">GRB STATUS</a></li>

    <li><a href="#">USER MANAGEMENT</a></li>
  </ul>
</div>

i did something like this recently for an internship try this out. PS: you will need to edit it according to your problem statement

This is the html section

<div id="topnav">
      <ul>
        <li class="active"><div class="dropdown"><a href="index.html" class="dropbtn">Home</a>
        <div class="dropdown-content">
                <a href="#">Link 1</a>
                 <a href="#">Link 2</a>
                  <a href="#">Link 3</a>
          </div>
          </div>
          </li>
        <li><div class="dropdown"><a href="pages/style-demo.html" class="dropbtn">About Us</a>
         <div class="dropdown-content">
                <a href="#">Link 1</a>
                 <a href="#">Link 2</a>
                  <a href="#">Link 3</a>
          </div>
          </div>
          </li>
        <li><div class="dropdown"><a href="pages/full-width.html" class="dropbtn">Admissions</a>
        <div class="dropdown-content">
                <a href="#">Link 1</a>
                 <a href="#">Link 2</a>
                  <a href="#">Link 3</a>
          </div>
          </div>
          </li>
        <li><div class="dropdown"><a href="pages/3-columns.html" class="dropbtn">Rules</a>
        <div class="dropdown-content">
                <a href="#">Link 1</a>
                 <a href="#">Link 2</a>
                  <a href="#">Link 3</a>
          </div>
          </div>
          </li>
        <li><div class="dropdown"><a href="pages/portfolio.html" class="dropbtn">Achievements</a>
        <div class="dropdown-content">
                <a href="#">Link 1</a>
                 <a href="#">Link 2</a>
                  <a href="#">Link 3</a>
          </div>
          </div>
          </li>
        <li><div class="dropdown"><a href="pages/gallery.html" class="dropbtn">Gallery</a><div class="dropdown-content">
                <a href="#">Link 1</a>
                 <a href="#">Link 2</a>
                  <a href="#">Link 3</a>
          </div>
          </div>
          </li>
        <li><div class="dropdown"><a href="#" class="dropbtn">Information Coner</a><div class="dropdown-content">
                <a href="#">Link 1</a>
                 <a href="#">Link 2</a>
                  <a href="#">Link 3</a>
          </div>
          </div>
          </li>
        <li class="last"><div class="dropdown"><a href="#" class="dropbtn">Contact us</a><div class="dropdown-content">
                <a href="#">Link 1</a>
                 <a href="#">Link 2</a>
                  <a href="#">Link 3</a>
          </div>
          </div>
          </li>

here is the css

    .dropdown {
        float: left;
        overflow: visible;
    }

    .dropdown .dropbtn {
        font-size: 16px;    
        border: none;
        outline: none;

        padding: 12px 12px;
        background-color: inherit;
    }

    .dropdown:hover .dropbtn {
        background-color: #white;
    }

    .dropdown-content {
        display: none;
        position: absolute;
        background-color: #grey;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1;
    }

    .dropdown-content a {
        float: none;
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
        text-align: left;
    }

    .dropdown-content a:hover {
        background-color: #ddd;
    }

    .dropdown:hover .dropdown-content {
        display: block;
    }

#topnav{display:block; clear:both; width:960px; margin:0; padding:15px 0; text-align:center;}
#topnav, #topnav a{text-transform:uppercase; color:#FFFFFF; background-color:black;}
#topnav a:hover, #topnav li.active a{color:#c0c0c0; background-color:#33333;}
#topnav ul, #topnav li{margin:0; padding:0; list-style:none;}
#topnav li{display:inline; margin-right:30px;}
#topnav li.last{margin:0;}

CSS Navigation Bar, Learn how to create a vertical tab menu with CSS and JavaScript. Vertical Tabs. Tabs are perfect Create Togglable Vertical Tabs. Step 1) Add HTML: Example. This tutorial shows how to create a menu in HTML. Usually to create a menu we use an onordered list. You can for sure use the div, span, p or other tags but unordered list gives you more flexibility in future stling of the menu.


Just refer below example with code

ul {
    width: 180px; /* Ширина меню */
    list-style: none; /* Убираем маркеры */
    margin: 0; /* Нет отступов вокруг */
    padding: 0; /* Убираем поля вокруг текста */
    font-family: Arial, Verdana, Tahoma; /* Шрифт для текста меню */
    font-size: 8pt; /* Размер текста в пунктах меню */
}
li ul {
    position: absolute; /* Подменю позиционируются абсолютно */
    display: none; /* Скрываем подменю */
    margin-left: 165px; /* Сдвигаем подменю вправо */
    margin-top: -2em; /* Сдвигаем подменю вверх */
}

li a {
    display: block; /* Ссылка как блочный элемент */
    padding: 25px; /* Поля вокруг надписи */
    text-decoration: none; /* Подчеркивание у ссылок убираем */
    color: #666; /* Цвет текста */
    border: 1px solid #ccc;/* Рамка вокруг пунктов меню */
    background-color: #f0f0f0; /* Цвет фона */
    border-bottom: none; /* Границу снизу не проводим */
}
li a:hover {
    color: #ffe; /* Цвет текста активного пункта */
    background-color: #207cca; /* Цвет фона активного пункта */
}
@keyframes move {
    0% {margin-left: 0px; margin-right: 0px;}
    50% {margin-left: -2.5px; margin-right: -2.5px; color:#53cbf1;}
    100% {margin-left: 0px; margin-right: 0px;}
}
li a:hover {
    animation-name: move;
    /* Задержка до начала анимации */
    animation-delay: 0s;
    /* Длительность анимации */
    animation-duration: 2s;
}
li:hover ul {
    display: block; /* Делает видимым блок с меню путем подмены состояния отображения display:none на display:block */
}
li:last-child {
    border-bottom: 1px solid #ccc; /* Нижняя линия у последнего пункта меню */
}
<div  class="vertical-menu">
<ul id="menu-v" class="main">
    <li><a href="#">BIZ OPS -> </a>
        <ul class="menu">
            <li><a href="#">UPLOAD DATA -></a>
                <ul class="sub-menu">
                    <li><a href="x1.jsp">UPLOAD x1</a></li>
                    <li><a href="x2.jsp">UPLOAD x2</a></li>
                    <li><a href="x3.jsp">UPLOAD x3</a></li>
                </ul>
            </li>
<!--             <li><a href="worklist.jsp">WORK LIST</a></li> -->
            <li><a href="#">IOT -></a>
                <ul class="sub-menu">
                    <li><a href="europe.jsp">EUROPE</a></li>
                    <li><a href="apac.jsp">APAC</a></li>
                    <li><a href="ag.jsp">AG</a></li>
                    <li><a href="internalt.jsp">INTERNAL MOVEMENT</a></li>
                    <li><a href="supportiotworklist.jsp">SUPPORT</a></li>
                </ul>

            </li>
        </ul>
    </li>
    <li><a href="#">GENERATE REPORTS-> </a>
        <ul class="sub">
            <li><a href="downloadexcel.jsp">x1 REPORT</a></li>
            <li><a href="downloadhc.jsp">x2 REPORT</a></li>
            <li><a href="error.jsp">x3 REPORT</a></li>
        </ul>
    </li>
    <li><a href="#">COST CASE -></a>
        <ul class="sub">
            <li><a href="index1.jsp">ADD CCN/PCR</a></li>
            <li><a href="viewcostcase.jsp">DEBAND COST CASE</a></li>
            <li><a href="cirelease.jsp">CI RELEASE</a></li>
            <li><a href="simplecc.jsp">VIEW COST CASE</a></li>
            <li><a href="IotCostCaseView.jsp">IOT COST CASE VEIW & EDIT</a></li>
        </ul>
    </li>
    <li><a href="#">HIRE EMPLOYEE -></a>
        <ul class="sub">
            <li><a href="#">GRB -></a>
                <ul class="sub">
                    <li><a href="int.jsp">INTERNAL HIRE</a></li>
                    <li><a href="ext.jsp">EXTERNAL HIRE</a></li>
                </ul>
            </li>
            <li><a href="#">PROMOTIONS -></a>
                <ul class="sub">
                    <li><a href="promolist.jsp">PROMOTIONS WORKLIST</a></li>
                </ul>
           </li>
        </ul>
    </li>
    <li><a href="#">WORK LIST -></a>
        <ul class="sub">
            <li><a href="GrbPage.jsp">GRB WORKLIST</a></li>
            <li><a href="CcnPcrWorklist.jsp">CCN/PCR WORKLIST</a></li>
            <li><a href="DebandWorklist.jsp">DEBAND WORKLIST</a></li>
            <li><a href="LowUtemForm.jsp">LOW UTE WORKLIST</a></li>
            <li><a href="nvp.jsp">NEGATIVE VACANT POSITION WL</a></li>
        </ul>
    </li>
    <li><a href="GrbList">GRB STATUS</a></li>

    <li><a href="#">USER MANAGEMENT</a></li>
</ul>
</div>

How To Create Vertical Tabs, Learn how to add a dropdown menu inside a side navigation. Dropdown Menu in Sidenav. Try it Yourself ». Create A Dropdown Sidebar. Step 1) Add HTML:  We position it left:200px so it comes in view side by side to the parent menu, and we also give it a height of 100% so it remains equal. You must set the z-index to -1 so that the menu is underneath the parent menu. This will allow it to slide properly without any jerking.


@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Oxygen+Mono);
/* Starter CSS for Flyout Menu */
#cssmenu {
  padding: 0;
  margin: 0;
  border: 0;
  line-height: 1;
}
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
#cssmenu ul {
  position: relative;
  z-index: 597;
  float: left;
}
#cssmenu ul li {
  float: left;
  min-height: 1px;
  line-height: 1em;
  vertical-align: middle;
  position: relative;
}
#cssmenu ul li.hover,
#cssmenu ul li:hover {
  position: relative;
  z-index: 599;
  cursor: default;
}
#cssmenu ul ul {
  visibility: hidden;
  position: absolute;
  top: 100%;
  left: 0px;
  z-index: 598;
  width: 100%;
}
#cssmenu ul ul li {
  float: none;
}
#cssmenu ul ul ul {
  top: -2px;
  right: 0;
}
#cssmenu ul li:hover > ul {
  visibility: visible;
}
#cssmenu ul ul {
  top: 1px;
  left: 99%;
}
#cssmenu ul li {
  float: none;
}
#cssmenu ul ul {
  margin-top: 1px;
}
#cssmenu ul ul li {
  font-weight: normal;
}
/* Custom CSS Styles */
#cssmenu {
  width: 200px;
  background: #999999;
  font-family: 'Oxygen Mono', Tahoma, Arial, sans-serif;
  font-size: 12px;
  zoom: 1;
}
#cssmenu:before {
  content: '';
  display: block;
}
#cssmenu:after {
  content: '';
  display: table;
  clear: both;
}
#cssmenu a {
  display: block;
  padding: 15px 20px;
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
}
#cssmenu > ul {
  width: 200px;
}
#cssmenu ul ul {
  width: 200px;
}
#cssmenu > ul > li > a {
  border-right: 4px solid #666666;
  color: #fff;
}
#cssmenu > ul > li > a:hover {
  color: #fff;
}
#cssmenu > ul > li.active a {
  background: #666666;
}
#cssmenu > ul > li a:hover,
#cssmenu > ul > li:hover a {
  background: #666666;
}
#cssmenu li {
  position: relative;
}
#cssmenu ul li.has-sub > a:after {
  content: '+';
  position: absolute;
  top: 50%;
  right: 15px;
  margin-top: -6px;
}
#cssmenu ul ul li.first {
  -webkit-border-radius: 0 3px 0 0;
  -moz-border-radius: 0 3px 0 0;
  border-radius: 0 3px 0 0;
}
#cssmenu ul ul li.last {
  -webkit-border-radius: 0 0 3px 0;
  -moz-border-radius: 0 0 3px 0;
  border-radius: 0 0 3px 0;
  border-bottom: 0;
}
#cssmenu ul ul {
  -webkit-border-radius: 0 3px 3px 0;
  -moz-border-radius: 0 3px 3px 0;
  border-radius: 0 3px 3px 0;
}
#cssmenu ul ul {
  border: 1px solid #4d4d4d;
}
#cssmenu ul ul a {
  font-size: 12px;
  color: #fff;
}
#cssmenu ul ul a:hover {
  color: #fff;
}
#cssmenu ul ul li {
  border-bottom: 1px solid #4d4d4d;
}
#cssmenu ul ul li:hover > a {
  background: #808080;
  color: #fff;
}
#cssmenu.align-right > ul > li > a {
  border-left: 4px solid #666666;
  border-right: none;
}
#cssmenu.align-right {
  float: right;
}
#cssmenu.align-right li {
  text-align: right;
}
#cssmenu.align-right ul li.has-sub > a:before {
  content: '+';
  position: absolute;
  top: 50%;
  left: 15px;
  margin-top: -6px;
}
#cssmenu.align-right ul li.has-sub > a:after {
  content: none;
}
#cssmenu.align-right ul ul {
  visibility: hidden;
  position: absolute;
  top: 0;
  left: -100%;
  z-index: 598;
  width: 100%;
}
#cssmenu.align-right ul ul li.first {
  -webkit-border-radius: 3px 0 0 0;
  -moz-border-radius: 3px 0 0 0;
  border-radius: 3px 0 0 0;
}
#cssmenu.align-right ul ul li.last {
  -webkit-border-radius: 0 0 0 3px;
  -moz-border-radius: 0 0 0 3px;
  border-radius: 0 0 0 3px;
}
#cssmenu.align-right ul ul {
  -webkit-border-radius: 3px 0 0 3px;
  -moz-border-radius: 3px 0 0 3px;
  border-radius: 3px 0 0 3px;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Icon Library -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<meta charset="UTF-8">
<title>Title</title>
</head>

<body>
<div id="cssmenu">
  <ul>
     <li class="active has-sub"><a href="#" target="_blank"><i class="fa fa-fw fa-exchange"></i> BIZ OPS</a>
        <ul>
           <li class="has-sub"><a href="#">UPLOAD DATA</a>
              <ul>
                 <li><a href="#">UPLOAD x1</a></li>
                 <li><a href="#">UPLOAD x2</a></li>
                 <li><a href="#">UPLOAD x3</a></li>
              </ul>
           </li>
           <li class="has-sub"><a href="#">IOT</a>
              <ul>
                 <li><a href="#">EUROPE</a></li>
                 <li><a href="#">APAC</a></li>
                 <li><a href="#">AG</a></li>
                 <li><a href="#">INTERNAL MOVEMENT</a></li>
                 <li><a href="#">SUPPORT</a></li>
              </ul>
           </li>
        </ul>
     </li>
     <li class="has-sub"><a href="#"><i class="fa fa-fw fa-bars"></i> GENERATE REPORTS</a>
        <ul>
           <li><a href="#">x1 REPORT</a></li>
           <li><a href="#">x2 REPORT</a></li>
           <li><a href="#">x3 REPORT</a></li>
        </ul>
     </li>
     <li class="has-sub"><a href="#"><i class="fa fa-fw fa-money"></i> COST CASE</a>
        <ul>
           <li><a href="#">ADD CCN/PCR</a></li>
           <li><a href="#">DEBAND COST CASE</a></li>
           <li><a href="#">CI RELEASE</a></li>
           <li><a href="#">VIEW COST CASE</a></li>
           <li><a href="#">IOT COST CASE VEIW & EDIT</a></li>
        </ul>
     </li>
     <li class="has-sub"><a href="#"><i class="fa fa-fw fa-users"></i> HIRE EMPLOYEE</a>
        <ul>
           <li class="has-sub"><a href="#">GRB</a>
              <ul>
                 <li><a href="#">INTERNAL HIRE</a></li>
                 <li><a href="#">EXTERNAL HIRE</a></li>
              </ul>
           </li>
           <li class="has-sub"><a href="#">PROMOTIONS</a>
              <ul>
                 <li><a href="#">PROMOTIONS WORKLIST</a></li>
              </ul>
           </li>
        </ul>
     </li>
     <li class="has-sub"><a href="#"><i class="fa fa-fw fa-edit"></i> WORK LIST</a>
        <ul>
           <li><a href="#">GRB WORKLIST</a></li>
           <li><a href="#">CCN/PCR WORKLIST</a></li>
           <li><a href="#">DEBAND WORKLIST</a></li>
           <li><a href="#">LOW UTE WORKLIST</a></li>
           <li><a href="#">NEGATIVE VACANT POSITION WL</a></li>
        </ul>
     </li>
     <li><a href="#"><i class="fa fa-fw fa-circle-o-notch"></i> GRB STATUS</a></li>
     <li><a href="#"><i class="fa fa-fw fa-gears"></i> USER MANAGEMENT</a></li>
  </ul>
</div>
</body>

</html>

How To Create a Side Navigation Dropdown, Learn how to create a fixed side navigation menu with CSS. Create a Fixed Sidebar. Step 1) Add HTML: The sidebar menu */ The navigation menu links */ A simple vertical CSS menu, compatible with all major browsers, no images or javascript. Demo: How to use: Open text editor like Notepad or any other. Copy HTML code and paste into the text editor. Save file as anyname.html or anyname.htm. Create new document. Copy and paste CSS code into text editor.


How To Create a Fixed Sidebar, Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java  This time around we’re going to build a super useful expanding vertical navigation menu. It’s a great way to hide a lot of links in a fairly small space and the animations will add a nice touch to your site. Ev


How To Create a Side Navigation Menu, This tutorial will show you how to create a vertical and horizontal menus in HTML using CSS styles. Before you proceed please make sure you are familiar with  CSS Menu Generator; CSS Sprite Generator; CSS Tooltip Generator; Rounded Corners (CSS) CSS Ribbon Generator; CSS3 Rounded Corners; CSS3 Button Generator; CSS3 Flip Switch Generator; CSS3 Text Rotate Generator; CSS3 Text Shadow Generator; CSS3 Box Shadow Generator; CSS3 Menu Generator; CSS3 RGBA Generator; Style Input Range


HTML/CSS. How to create vertical and horizontal menu, There are two different types of navigation menus in HTML, vertical, and horizontal. This tutorial will take you through creating a stylish CSS 3  Vertical Menu. CSS driven vertical menu that has unlimited sub-menus; Sub-menus fly out to the right; Options for sub-menu alignment: middle (as demo1) or top (as demo2); Supported by IE 9+ and all other major browsers; Free to use and abuse.