ВУЗ: Не указан
Категория: Не указан
Дисциплина: Не указана
Добавлен: 12.06.2024
Просмотров: 14
Скачиваний: 0
margin: -3px 0 0 0;
}
.drop-link:hover:after { border: solid 12px;
border-color: transparent #b685f7 transparent transparent; margin-right: 0;
}
.drop-block { display: block; position: absolute; z-index: 1000;
left: 100%; /*если меню справа - right: 100%;*/ top: -9999em; /*скрываем выпадающие блоки*/ background: #3D0066;
border: solid 1px #B84DFF; border-radius: 10px;
box-shadow: 0.5em 1em 1em #666; /*если меню справа - box-shadow: -0.5em 1em 1em #666;*/ /*анимация для выпадающих блоков*/
-webkit-transition: opacity 1s ease; -moz-transition: opacity 1s ease; -o-transition: opacity 1s ease; transition: opacity 1s ease; opacity: 0;
padding: 0;
margin: -10px -20px 0 0; /*если меню справа - margin: -10px -10px 0 0;*/ min-width: 250px; /*обычная ширина*/
width: auto; /*ширина если строка без пробелов и переносов*/
}
.drop-link:hover > .drop-block {
top: 0; /*показываем выпадающие блоки*/ opacity: 1;
}
</style>
</head>
<body>
<div id='menu-block'> <ul class='vertical-menu'>
<li><a href="#">Раздел 1</a> <li><a href="#">Раздел 2</a>
<li class='drop-link'><a href="#">Раздел 3</a>
<ul class='drop-block'>
<li><a href="#">Раздел 3.1</a>
<li class='drop-link'><a href="#">Раздел 3.2</a>
<ul class='drop-block'>
<li><a href="#">Раздел 3.2.1</a> <li><a href="#">Раздел 3.2.2</a> <li><a href="#">Раздел 3.2.3</a>
</ul>
</li>
<li><a href="#">Раздел 3.3</a> </ul>
</li>
<li class='drop-link'><a href="#">Раздел 4</a>
<ul class='drop-block'>
<li><a href="#">Раздел 4.1</a> <li><a href="#">Раздел 4.2</a> <li><a href="#">Раздел 4.3</a> <li><a href="#">Раздел 4.4</a> <li><a href="#">Раздел 4.5</a>
</ul>
</li>
<li><a href="#">Раздел 5</a> </ul>
</div>
</body>
</html>
