<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>