下拉菜单 CSS 扇区

我是CSS和HTML的初学者。目前我真的很困在下拉菜单上，我已经搜索了 HOURS 的答案，但我只是找不到错误。如果我输入"位置：相对"，子菜单显示在导航栏内，但它应该显示在外部。如果我离开"位置：绝对"，这两个

元素都会覆盖，但它们在导航栏之外，我想要它。当然，悬停效应仍然存在困境;仅当光标位于 topnav 元素上时，它才应显示。

网页<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 -->

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

您希望隐藏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>

相关内容

最新更新

热门标签：