HTML/CSS水平导航子菜单悬停显示错误 [英] HTML/CSS Horizontal navigation submenu hover wrong displayed

查看:76
本文介绍了HTML/CSS水平导航子菜单悬停显示错误的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在创建一个带有水平导航和垂直子菜单的HTML页面.除了以下事实之外,一切都工作正常,子菜单上的悬停显示在实际菜单项的左侧.

I am creating an HTML page with a horizontal navigation and vertical submenu. Everything is working fine, except the fact, that the hover on the submenu is displayed to the left of the actual menu item.

请参阅我的jsfiddle: https://jsfiddle.net/qmcte349/

See my jsfiddle: https://jsfiddle.net/qmcte349/

/* Navigation */
nav ul {
	list-style: none;
	background-color: #444;
	text-align: center;
	padding: 0;
	margin: 0;
}

nav li {
	line-height: 40px;
	text-align: left;
	width: 13%;
	border-bottom: none;
	height: 50px;
	display: inline-block;
	margin-right: -4px;
}

nav a {
	font-size: .8em;
	text-decoration: none;
	color: #fff;
	display: block;
	padding-left: 15px;
	border-bottom: none;
}

nav a:hover {
	background-color: #8e2323;
}

nav a.active {
	background-color: #aaa;
	color: #444;
	cursor: default;
}

nav > ul > li {
	text-align: center;
}

nav > ul > li > a {
	padding-left: 0;
}

/* Sub Menus */

nav li ul {
	position: absolute;
	display: none; 
	width: inherit;
}

nav li:hover ul {
	display: block; 
}

nav li ul li {
	display: block; 
}

			<nav>
				<ul>
					<li><a href="index.html">Home</a></li>
					<li><a href="#">Verein</a></li>
					<li><a href="#">Chronik</a></li>
					<li><a href="#">Termine</a>
						<ul>
							<li><a href="#">Veranstaltungen</a></li>
							<li><a href="#">Übungen</a></li>
						</ul>
					</li>
					<li><a href="#">Bilder und Videos</a></li>
					<li><a href="#">Links</a></li>
				</ul>
			</nav>

谢谢您的建议!

推荐答案

您的问题从设置宽度到13%.这样子菜单中的li也是其父级宽度的13%.您会在margin-right: -4px;中看到的另一个问题,我建议使用此代码:

Your problem goes from setting width to 13%. This way the li in the submenu also is 13% of its parrent width. Another issue you will see with margin-right: -4px; I suggest this code:

nav li {
    line-height: 40px;
    text-align: left;
    border-bottom: none;
    height: 50px;
    display: inline-block;
}


nav > ul > li {
    width: 13%;
  margin-right: -4px;
}

仅将对主菜单(菜单栏)重要的内容设置为该菜单,而不对其子菜单进行设置.

Set the things that are importaint for main menu (menu bar) only to it and not to its children.

这篇关于HTML/CSS水平导航子菜单悬停显示错误的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆