使用CSS

Question

我经常使用仅限CSS的下拉导航技术。这是简化的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>

这是简化的CSS：

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

问题在于垂直定位sub.subnav，我有顶部：20px。我需要将该元素精确定位在LI元素的底部。如果它太高，它会与主菜单项重叠。如果它太低，主菜单项和子导航之间就会出现间隙，当鼠标经过该间隙时，子导航会意外关闭，用户会感到沮丧。

我通常可以完全正确，直到像素（在本例中为20px）。但是有些浏览器似乎没有完全相同的渲染字体。 LI元素的高度由其中的字体决定，因此可能存在一些差异，然后我的20px计算不正确。

CSS中还有其他方法可以将我的span.subnav元素定位到LI元素的底部吗？

谢谢。

Answer 1

我认为将.subnav的top CSS属性设为auto

是可以的。

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

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

Answer 2

现在我正在添加sideDown（）和slideUp（）来显示或隐藏菜单上的下拉列表。请尝试以下代码。

	//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>