HTML/CSS水平导航子菜单悬停显示错误 [英] HTML/CSS Horizontal navigation submenu hover wrong displayed
问题描述
我正在创建一个带有水平导航和垂直子菜单的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屋!