下拉菜单 CSS 个部门

Question

我是 CSS 和 HTML 的初学者。目前我真的被下拉菜单困住了，我已经搜索了 HOURS 的答案，但我找不到错误。如果我把 "position:relative" 子菜单显示在导航栏内，但它应该显示在外面。如果我离开 "position:absolute"，两个

元素都会叠加，但它们位于导航栏之外，这是我想要的。当然，悬停效果仍然存在两难境地；它应该仅在光标位于顶部导航元素上时显示。

HTML<body> <nav> <ul class="topnav"> <li style="float: right;"><h1>CH</h1></li> <li><a class="active" href="index.html">Home</a></li> <li><a href="#">CV</a></li> <li><a href="#">Studium</a></li> <li><a href="#">Persönlich</a> <ul class="subnav"> <li><a href="umfeld.html">Umfeld</a></li> <li><a href="interessen.html">Interessen</a></li>  </ul></li> </ul> </nav>

CSS `

/*nav*/
nav ul{
 list-style-type: none;
 margin: 0;
 padding: 0;
    width: 100%;
    background: #99ddff;
}
nav li {
 display: inline-block;
 position: relative;
}
nav a {
 display: block;
    text-decoration: none;
    font-family: "Raleway", Tahoma, sans-serif;
 color: #4d4d4d;
 padding: 1em;
}
nav a:hover {
 color: #ffffff;
}
.active {background: #90bed5;
 color: #ffffff; 
}

/*Dropdown Menu*/
ul.subnav {
 display: block;
 width: auto;
 height: auto;
}
ul.subnav li {
 display: none;
 position: relative;
}
ul.subnav li a {
 padding: 0.2em 1em 1em 0;
 border-bottom: solid white;
 white-space: nowrap;
}
ul.subnav li:hover {
 display: block;
 position: absolute;
}

<!-- begin snippet: js hide: false console: true babel: false -->

如果有人能提供帮助，我会很高兴。非常感谢您！西西

Answer 1

您想隐藏 ul.subnav（而不仅仅是 li），并在悬停 li 元素时定位 CSS 以显示隐藏的子导航具有嵌套子导航。

/*nav*/
nav ul{
 list-style-type: none;
 margin: 0;
 padding: 0;
    width: 100%;
    background: #99ddff;
}
nav li {
 display: inline-block;
 position: relative;
}
nav a {
 display: block;
    text-decoration: none;
    font-family: "Raleway", Tahoma, sans-serif;
 color: #4d4d4d;
 padding: 1em;
}
nav a:hover {
 color: #ffffff;
}
.active {background: #90bed5;
 color: #ffffff; 
}

/*Dropdown Menu*/
ul ul {
 display: none;
 width: auto;
 height: auto;
}
ul ul li a {
 padding: 0.2em 1em 1em 0;
 border-bottom: solid white;
 white-space: nowrap;
}
li:hover > ul {
 display: block;
 position: absolute;
}

   <body>
        <nav>
        <ul class="topnav">
            <li style="float: right;"><h1>CH</h1></li>
            <li><a class="active" href="index.html">Home</a></li>
            <li><a href="#">CV</a></li>
            <li><a href="#">Studium</a></li>
            <li><a href="#">Pers&ouml;nlich</a>
                <ul>
                    <li><a href="umfeld.html">Umfeld</a></li>
                    <li><a href="interessen.html">Interessen</a>
                        <ul>
                            <li><a href="Interessen/sport.html">Sport</a></li>
                            <li><a href="Interessen/musik.html">Musik</a></li>
                        </ul>
                     </li>
                </ul>
             </li>
        </ul>
        </nav>

下拉菜单 CSS 个部门

Drop down menu CSS sectors

css

css-position

nav

drop-down-menu

dropdown