仅在使用CSS激活悬停事件图标时显示菜单

Question

Help , I can not do that when you activate the hover aparzca the rest of the div

• I am seeking to activate the hover -law early levels appear and when you hover on the first levels appear the following
• 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> 

Answer 1

You can use 'element1 ~ *' selector to select every siblings of element1 that are preceeded by this element. You should also change type of input, because you cannot change it by only CSS.

 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, input[type="text"] { display: none; } .title:hover ~ *, .title:hover ~ * .item, .title:hover ~ * .desplegable { display: block; } 

 <div class="menu-option"> <div class="title"> </div> <input name="__RequestVerificationToken" type="text" 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>