@whiteleaf

Можно ли реализовать такой переход с одного объекта на другой с помощью css?

Здравствуйте,

Подскажите мне, пожалуйста, можно ли реализовать такой переход с одного объекта пункта меню на объект подменю чтобы в промежутке между ними подменю не пропадало? Мне кажется что здесь это реализовано с помощью javascript'a.

Вот пример, и то о чем я говорил находится в главном меню вверху. а мой код ниже.
demo.themezilla.com/redux

<nav class="top-nav">
				<ul class="nav">
					<li>Home</li>
					<li>Features
						<ul class="drop-down-nav">
							<li><a href="">WP3.0+ Support</a></li>
							<li><a href="">8 Colors Schemes</a></li>
							<li><a href="">14 Custom Widgets</a></li>
							<li><a href="">Theme options panel</a></li>
							<li><a href="">* page templetes</a></li>
							<li><a href="">* Shortcodes</a></li>
							<li><a href="">localisation(.po/.mo)</a></li>
							<li><a href="">Theme documentation</a></li>
							<li><a href="">PSD Files included</a></li>
						</ul>
					</li>
					<li>Pricing</li>
					<li>Tour</li>
					<li>Shortcodes</li>
					<li>Portfolios
						<ul class="drop-down-nav">
							<li><a href="">One column</a></li>
							<li><a href="">Two column</a></li>
							<li><a href="">Three column</a></li>
						</ul>
					</li>
					<li>Blog</li>
					<li>Contact</li>
				</ul>
			</nav>


/* Navigation top */

.top-nav {
	margin-top: 38px;
	float: right;
	/*border:1px solid red;*/
	display: block;
	height: 38px;
}

.nav {
	margin: 0;
	padding: 0;
	-webkit-transform: translateY(50%);
	/*overflow: hidden;*/
}

.nav > li {
	-webkit-box-sizing: border-box;
	list-style: none;
	display: inline;
	color: #f5f3ed;
	font: 13px bold 'Ronnia';
	line-height: 13px;
	margin: 0 3px 0 3px;
	padding: 7px 14px;
	/*height: 38px;*/
	border-radius: 5px;
	position: relative;
	/*border: 1px dashed grey;*/
}

.nav li:hover {
	background-color: black;
}

ul li:hover ul {
	display: inline-block;
	opacity: 1;
	-webkit-transition: all 2s;
	background-color: green;
}

	/* sub-menu top */

	.drop-down-nav {
		position: absolute;
		overflow: hidden;
		display: none;
		top: 29px;
		left: 0;
		min-width: 10em;
		/*border:1px dotted green;*/
		padding: 10px 0 0 0;
		margin: 0;
		opacity: 0;
		-webkit-transition: all 2s;
	}

	.drop-down-nav li {
		display: inline-block;
		position: relative;
		-webkit-box-sizing: border-box;
		list-style: none;
		width: 100%;
		background-color: black;
		font: 13px normal Helvetica, Arial, sans-serif;
		padding: 0 15px;
	}

	.drop-down-nav li:hover a {
		text-indent: 20px;

		-webkit-transition: all .3s;
	}

	.drop-down-nav li a {
		display: inline-block;
		text-decoration: none;
		border-bottom: 1px solid white;
		width: 100%;
		white-space: nowrap;
		text-transform: capitalize;
		padding: 0 0 0 0;
		-webkit-transition: all .3s;
		padding: 8px 0;
		color: white;
	}

	.drop-down-nav li:first-child {
		border-radius: 5px 5px 0 0; 
	}

	.drop-down-nav li:last-child {
		border-radius: 0 0 5px 5px; 
	}

	.drop-down-nav li:last-child a {
		border:none;
	}
  • Вопрос задан
  • 350 просмотров
Решения вопроса 1
standy
@standy
Подменю немного больше своей видимой части, поэтому визуально кажется что над ним есть пустое место.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы