2
我正在创建一个带有水平导航和垂直子菜单的HTML页面。除了事实上,一切正常,子菜单上的悬停显示在实际菜单项的左侧。HTML/CSS水平导航子菜单悬停错误显示
见我的jsfiddle:https://jsfiddle.net/qmcte349/
/* Navigation */
nav ul {
\t list-style: none;
\t background-color: #444;
\t text-align: center;
\t padding: 0;
\t margin: 0;
}
nav li {
\t line-height: 40px;
\t text-align: left;
\t width: 13%;
\t border-bottom: none;
\t height: 50px;
\t display: inline-block;
\t margin-right: -4px;
}
nav a {
\t font-size: .8em;
\t text-decoration: none;
\t color: #fff;
\t display: block;
\t padding-left: 15px;
\t border-bottom: none;
}
nav a:hover {
\t background-color: #8e2323;
}
nav a.active {
\t background-color: #aaa;
\t color: #444;
\t cursor: default;
}
nav > ul > li {
\t text-align: center;
}
nav > ul > li > a {
\t padding-left: 0;
}
/* Sub Menus */
nav li ul {
\t position: absolute;
\t display: none;
\t width: inherit;
}
nav li:hover ul {
\t display: block;
}
nav li ul li {
\t display: block;
}
\t \t \t <nav>
\t \t \t \t <ul>
\t \t \t \t \t <li><a href="index.html">Home</a></li>
\t \t \t \t \t <li><a href="#">Verein</a></li>
\t \t \t \t \t <li><a href="#">Chronik</a></li>
\t \t \t \t \t <li><a href="#">Termine</a>
\t \t \t \t \t \t <ul>
\t \t \t \t \t \t \t <li><a href="#">Veranstaltungen</a></li>
\t \t \t \t \t \t \t <li><a href="#">Übungen</a></li>
\t \t \t \t \t \t </ul>
\t \t \t \t \t </li>
\t \t \t \t \t <li><a href="#">Bilder und Videos</a></li>
\t \t \t \t \t <li><a href="#">Links</a></li>
\t \t \t \t </ul>
\t \t \t </nav>
谢谢您的建议!
投票张贴小提琴,使测试和答案容易。 –