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

Question

[whiteleaf]

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

Подскажите мне, пожалуйста, можно ли реализовать такой переход с одного объекта пункта меню на объект подменю чтобы в промежутке между ними подменю не пропадало? Мне кажется что здесь это реализовано с помощью 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;
	}

Answer 1

[Андрей]

Подменю немного больше своей видимой части, поэтому визуально кажется что над ним есть пустое место.

Comments

[whiteleaf]

Спасибо Вам за отклик!
Я так и сделал, но срабатывает не всегда оно. Если я провожу медленно, то подменю пропадает, даже если у меня курсов на нем. Я поставил background-color на подменю green, таким образом я вижу грани подменю. Но в том месте у меня padding чтобы сделать визуальный зазор между кнопкой меню и подменю, может этот padding влиять на это?

[Андрей]

Сделайте подменю немного внахлест (поднимите на 1px)
Такое может происходить если, например, зумировать страницу. Тогда может образоваться пустое место из-за округления.

[whiteleaf]

Андрей: Спасибо Вам!