Aligning drop-down nav to main menu with CSS

Question

I have a CSS-only drop-down nav technique that I use frequently. Here is the simplified HTML:

<ul id="nav">
    <li><a href="#">Menu Item</a>
        <span class="subnav">
            <a href="#">Submenu Item</a>
            <a href="#">Submenu Item</a>
            <a href="#">Submenu Item</a>
        </span>
    </li>
</ul>

Here is the simplified CSS:

span.subnav{display:none;}
#nav1 li:hover span.subnav{display:block}
#nav1 li{position:relative;}
span.subnav{position:absolute;top:20px;left:0;}

The problem is in positioning sub.subnav vertically, where I have top:20px. I need that element to be positioned exactly at the bottom of the LI element. If it is too high, it overlaps the main menu item. If it is too low, there is a gap between the main menu item and the sub-nav, and when the mouse passes over that gap, the sub-nav closes unexpectedly and the user is frustrated.

I can usually get it exactly right, down to the pixel (in this example, 20px). But some browsers seem to not render fonts exactly the same. The height of the LI element is determined by the font inside it, so there can be some difference and then my 20px calculation is not correct.

Is there any other way in CSS to position my span.subnav element to the bottom of the LI element?

Thank you.

Answer 1

I think it is okay to have the top CSS property of .subnav to be auto

#nav li { position: relative; }
#nav li:hover span.subnav { display: block; }
#nav li .subnav { top: auto; }

JSFiddle: https://jsfiddle.net/aam6je6m/

Answer 2

Now I am adding sideDown() and slideUp() to show or hide the dropdown on menu hover Try below code.

	//Hide and Show The Sub Menus
		$(".jquery-test ul li.menu-list").hover(function(){
			$(this).find('ul').stop().slideDown();
		},function(){
			$(this).find('ul').stop(true,true).slideUp();
		});

.jquery-test ul.menu li.menu-list{display:inline-block;padding-right:20px;}
.jquery-test ul{list-style:none;padding-left:10px;}
.jquery-test ul.menu li.menu-list ul.submenu {display:none;}
.jquery-test ul.menu li.menu-list ul.submenu{position:absolute;}
.jquery-test ul.menu li.menu-list ul.submenu li{position:relative;left:0px;}
.jquery-test ul li a{text-decoration:none;color:#000;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="jquery-test">
	<ul class="menu">
		<li class="menu-list"><a href="#">Menu1</a>
			<ul class="submenu">
				<li><a href="#">Menu1.0</a></li>
				<li><a href="#">Menu1.1</a></li>
				<li><a href="#">Menu1.2</a></li>
				<li><a href="#">Menu1.3</a></li>
			</ul>
		</li>
		<li class="menu-list"><a href="#">Menu2</a>
			<ul class="submenu">
				<li><a href="#">Menu2.1</a></li>
				<li><a href="#">Menu2.2</a></li>
				<li><a href="#">Menu2.3</a></li>
				<li><a href="#">Menu2.4</a></li>
			</ul>
		</li>
		<li class="menu-list"><a href="#">Menu3</a>
			<ul class="submenu">
				<li><a href="#">Menu3.0</a></li>
				<li><a href="#">Menu3.1</a></li>
				<li><a href="#">Menu3.2</a></li>
				<li><a href="#">Menu3.3</a></li>
			</ul>
		</li>
	</ul>