Assistance Needed - Unable to activate hover and display the rest of the div
- I want to activate the hover effect where early levels are visible, and when hovering over the first level, the subsequent levels appear
- List item
body { margin: 3%; }
div.title {
position: relative;
margin-right:2%;
border: 2px solid orange;
background-color:orange;
border-radius: 2px;
height: 400px;
width:36px;
float: left;
}
.title:before {
position: absolute;
content:"";
border-top: 6px solid white;
border-bottom: 17px double white;
height: 5px;
width:30px;
top: 4px;
right:3px;
}
.title:hover:before {
position: absolute;
content:"";
width:auto;
top: 11px !important;
left:1px !important;
border-left: 16px solid rgba(255, 255, 255, 0) !important;
border-right: 16px solid rgba(255, 255, 255, 0) !important;
border-top: 16px solid white !important;
border-bottom: none;
background-color:orange;
}
.item,.desplegable {
display: none;
}<div class="menu-option">
<div class="title">
</div>
<input name="__RequestVerificationToken" type="hidden" value="CiVpO4FRnoe021mD68+lxPfMwBZygSRro9kFFZbmFzG89tqDv0QuHAyxo8Nsldeh8DkoVzd9+S0N7OGQhZtazNeFsmQ2ov4iuEfVCEYiHia4PVRRBCpIs/U2HvbjpffahdVYtabrA8p/XVy4TO8bh1ToRRY=">
<div class="item">
<a href="/Home/Index" class="formsMenu">
<li class="viñeta3">Inicio</li>
</a>
</div>
<ul class="padre">
<a class="desplegable" href="#">
<li class="viñeta3 viñetablanca desplegable">Administración dt</li>
</a>
<ul class="request-list subnavegador viñeta3" style="display: block;">
<div class="item">
<a href="/Campaign/List" class="formsMenu">
<li class="viñeta3">Campañas</li>
</a>
</div>
<div class="item">
<a href="/Categories/List" class="formsMenu">
<li class="viñeta3">Categorias</li>
</a>
</div>
<div class="item">
<a class="formsMenu">
<li class="viñeta3" onclick="getForms()">Formularios</li>
</a>
</div>
<div class="item">
<a href="/PerformanceIndicator/List" class="formsMenu">
<li class="viñeta3">Indicadores</li>
</a>
</div>
<div class="item">
<a href="/Hierarchies/List" class="formsMenu">
<li class="viñeta3">Jerarquias</li>
</a>
</div>
<div class="item">
<a href="/Account/List" class="formsMenu">
<li class="viñeta3">Usuarios</li>
</a>
</div>
<div class="item">
<a href="/StrategySettings/Index" class="formsMenu">
<li class="viñeta3">Configurar estrategias</li>
</a>
</div>
<div class="item">
<a href="/ObjectPermissions/Index" class="formsMenu">
<li class="viñeta3">Configurar permisos</li>
</a>
</div>
<div class="item">
<a href="/RedisCache/Index" class="formsMenu">
<li class="viñeta3">Administracion REDIS caché</li>
</a>
</div>
</ul>
</ul>
<ul class="padre">
<a class="desplegable" href="#">
<li class="viñeta3 viñetablanca desplegable">Nuevas Solicitudes</li>
</a>
<ul class="request-list subnavegador viñeta3" style="display: block;">
<div class="item">
<a class="formsMenu" onclick="CreateRequest('56ae9c06-7114-4d2a-9f9e-0f678b3130f4')">
<li class="viñetablanca2">Credito Nuevo</li>
</a>
</div>
</ul>
</ul>
<div class="item">
<a onclick="WorkList('d5fe1e3d-2e08-41c2-9c62-0c57607de500','spGetAvailableInterviewsUser',0) " class="formsMenu">
<li class="viñeta3">Mis Solicitudes</li> </a>
</div>
<div class="item">
<a href="/Request/List" class="formsMenu">
<li class="viñeta3">Busqueda de Solicitudes</li>
</a>
</div>
</div>