有什么方法可以在导航列表项上添加“悬停时的下拉菜单”吗？

Question

我有一个导航，我想在我的两个导航列表项（左侧的前两个）中添加一个下拉菜单（悬停时）。最好的方法是什么？我尝试了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;}

Answer 1

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>