Недавно я писал, как сделать выпадающее меню без скриптов. Это выпадающее меню, работающее при помощи простых свойств CSS. При наведении на основной элемент под ним появляется скрытое меню.

Сегодня предлагаю вам дополнение, это Sass-код для стилей меню.

ul.dropdown {
	z-index: 10;
	list-style-type: none;
	padding: 0;
	a.dropdown-top { 
		background: #efefef;
		&:hover { 
			padding: 2px 10px 5px; 
		}
	}
	li { 
		position: relative; 
	}
	ul.dropdown-inside {
		list-style-type: none;
		padding: 0;
		position: absolute;
		left: -9999px;
	}
	li.dropdown-top {
		display: inline;
		float: left;
		margin: 0 1px 0 0;
		a {
			padding: 3px 10px 4px;
			display: block;
		}
		&:hover {
			.dropdown-inside {
				display: block;
				left: 0;
				background: #fff;
				a:hover { background: #efefef; }
			}
		}
	}
}

Стили остались те же, но этот код можно использовать, если вы пользуетесь Sass (синтаксис SCSS).

Больше про этот язык читайте в мануале по Sass.

    Отправить ответ

    Оставьте первый комментарий!

    Уведомлять
    avatar
    5000
    wpDiscuz