Html

<html>
  <body>
    <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>
  </body>
  <style>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; /* Нижняя линия у последнего пункта меню */
}</style>
</html>
Search

menu vertical html

how to create vertical menu in html

ADD CONTENT
