有什么方法可以在导航列表项上添加“悬停时的下拉菜单”吗？
我有一个导航，我想在我的两个导航列表项（左侧的前两个）中添加一个下拉菜单（悬停时）。最好的方法是什么？我尝试了Google的一些解决方案，但没有一个真正对我有用，这只是弄乱了我的导航。
这是我的导航：（展开至完整页面以查看导航功能）
ul li {
list-style: none;
}
html {
font-family: "Roboto", serif;
}
.navigation {
position: fixed;
width: 100%;
text-align: center;
font-size: 14px;
font-size: 0.875rem;
line-height: 1.5em;
height: 180px;
font-family: "Roboto", serif;
transition: all 0.5s ease;
display: flex;
justify-content: center;
align-items: center;
z-index: 99999;
background-color: rgba(175, 213, 123, 0.70);
}
.navigation ul {
display: flex;
flex-direction: row;
margin: 0;
padding: 0;
z-index: 1;
}
.navigation ul li {
float: left;
padding: 0 20px;
text-decoration: none;
text-transform: uppercase;
color: #222222;
margin: -12px 0;
letter-spacing: 0.200em;
transition: all 0.5s ease;
}
.navigation ul li:hover {
color: #ffa947;
cursor: pointer;
}
@media (min-width: 0) and (max-width: 770px) {
.navigation ul li {
margin: 17px 0;
}
}
.navigation ul li.reg {
font-size: 10px;
font-size: 0.625rem;
}
@media (min-width: 0) and (max-width: 770px) {
.navigation ul li.reg {
display: none;
}
}
.navigation ul li.title {
font-size: 24px;
font-size: 1.5rem;
}
.navigation h1 {
font-size: 24px;
font-size: 1.5rem;
color: #222222;
font-weight: 300;
z-index: 1;
margin: 0;
padding: 0;
letter-spacing: 10px;
}
@media (min-width: 0) and (max-width: 770px) {
.navigation {
flex-direction: column;
height: auto;
}
}
.navigation.sticky {
height: 55px;
background-color: rgba(175, 213, 123, 1);
}
.navigation.sticky::after {
opacity: 1;
filter: alpha(opacity=100);
}
.navigation.sticky ul li {
margin: 0;
}
@media (min-width: 0) and (max-width: 770px) {
.navigation.sticky {
height: auto;
}
.navigation.sticky .title {
margin: 17px 0;
}
}
.navigation .hidden {
visibility: hidden;
height: 0;
display: none;
}
慕姐82654341回答
-
阿晨1998
ul li { list-style: none;}html { font-family: "Roboto", serif;}.navigation { position: fixed; width: 100%; text-align: center; font-size: 14px; font-size: 0.875rem; line-height: 1.5em; height: 180px; font-family: "Roboto", serif; transition: all 0.5s ease; display: flex; justify-content: center; align-items: center; z-index: 99999; background-color: rgba(175, 213, 123, 0.70);}.navigation ul { display: flex; flex-direction: row; margin: 0; padding: 0; z-index: 1;}.navigation ul li { float: left; padding: 0 20px; text-decoration: none; text-transform: uppercase; color: #222222; margin: -12px 0; letter-spacing: 0.200em; transition: all 0.5s ease; position:relative;}.navigation ul li a{ font-size: 0.625rem; text-decoration: none; color: #222222;}.navigation ul li a:hover{ color: #ffa947;}.navigation ul li .submenu{ display:none; position: absolute; top:15px; left:0; width: 200px; background: #FFF; border: 1px #e8e8e8 solid; }.navigation ul li:hover .submenu{ display: block;}.navigation ul li .submenu li{ display: inline-block; width: calc(100% - 20px); margin: 0; padding: 5px 10px; list-style: none; border-bottom: 1px #e8e8e8 solid;}.navigation ul li .submenu li a{ color: #ffa947;}.navigation ul li:hover { color: #ffa947; cursor: pointer;}@media (min-width: 0) and (max-width: 770px) { .navigation ul li { margin: 17px 0; }}.navigation ul li.reg { font-size: 10px; font-size: 0.625rem;}@media (min-width: 0) and (max-width: 770px) { .navigation ul li.reg { display: none; }}.navigation ul li.title a{ font-size: 24px; font-size: 1.5rem;}.navigation h1 { font-size: 24px; font-size: 1.5rem; color: #222222; font-weight: 300; z-index: 1; margin: 0; padding: 0; letter-spacing: 10px;}@media (min-width: 0) and (max-width: 770px) { .navigation { flex-direction: column; height: auto; }}.navigation.sticky { height: 55px; background-color: rgba(175, 213, 123, 1);}.navigation.sticky::after { opacity: 1; filter: alpha(opacity=100);}.navigation.sticky ul li { margin: 0;}@media (min-width: 0) and (max-width: 770px) { .navigation.sticky { height: auto; } .navigation.sticky .title { margin: 17px 0; }}.navigation .hidden { visibility: hidden; height: 0; display: none;}@media (min-width: 0) and (max-width: 770px) { .navigation .hidden { display: flex; flex-direction: column; margin: 0; padding: 0; float: left; } .navigation .hidden li { margin: 0; padding: 10px 0; transition: all 0s; }}.navigation .hidth { display: none;}.navigation .switch .hidth { display: block;}.navigation .switch .unhid { display: none;}.navigation .hidden.showmenu { visibility: hidden; height: 0; display: none;}@media (min-width: 0) and (max-width: 770px) { .navigation .hidden.showmenu { visibility: visible; height: auto; display: block; } .navigation .hidden.showmenu li { width: 100%; float: left; transition: all 0s; } .navigation .hidden.showmenu li:last-child { padding-bottom: 30px; }}.navigation .bar { display: none; margin: 17px 0; font-size: 21px;}@media (min-width: 0) and (max-width: 770px) { .navigation .bar { display: block; }}.navigation .bar:hover { cursor: pointer;}<nav class="navigation"> <ul> <li class="reg goHome"> <a href="#">Kleingartenverein</a> <ul class="submenu"> <li> <a href="#">Demo Link</a> </li> <li> <a href="#">Demo Link</a> </li> <li> <a href="#">Demo Link</a> </li> </ul> </li> <li class="reg goug"><a href="#">UrbanGardening </a> <ul class="submenu"> <li> <a href="#">Demo Link</a> </li> <li> <a href="#">Demo Link</a> </li> <li> <a href="#">Demo Link</a> </li> </ul> </li> <li class="title gotop"><a href="#">GARDEN7</a></li> <li class="reg goGalerie"><a href="#">Galerie</a></li> <li class="reg goKontakt"><a href="#">Kontakt</a></li> <span class="bar"> <i class="fa fa-bars unhid" aria-hidden="true"></i> <i class="fa fa-times hidth" aria-hidden="true"></i> </span> </ul> <ul class="hidden"> <li class="goHomemob"><a href="#">Kleingartenverein</a></li> <li class="goKleingartenvereinmob"><a href="#">Urban Gardening </a></li> <li class="goGaleriemob"><a href="#">Galerie</a></li> <li class="goKontaktmob"><a href="#">Kontakt</a></li> </ul></nav>
随时随地看视频慕课网APP
相关分类
JavaScript