html - 悬停下拉菜单出现在左侧而不是直接位于链接 anchor 下方

Question

这可能很容易理解，但是当悬停在链接元素上时，下拉菜单出现在左侧，而不是悬停在链接 anchor 上方时垂直下拉到链接 anchor 下方。谢谢。

[ https://jsfiddle.net/kolinio/p9Lea8g4/6/][1]

CSS

    ul {
    }

    li a,
    .dropbtn {
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
    }

    .dropdown-content {
      display: none;
      position: absolute;
      background-color: #f9f9f9;
      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    }

    .dropdown-content a {
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
      text-align: left;
    }

    .dropdown-content a:hover {
      background-color: #f1f1f1
    }

    .dropdown:hover .dropdown-content {
      display: block;
    }

    ul {
      margin: 0px;
      padding: 0px;
      border: 0px;
      vertical-align: middle;
      background-color: #a2ded0;

    }

    ul#nlist {
      text-align: center;
      position: relative;
      top: 50%;
      transform: translateY(-50%);
    }

    ul#nlist li {
      display: inline;
    }

HTML

    <ul id='nlist'>
      <li><a href='#' class='home'>Home</a></li>
      <li><a href='#' class='about'>About</a></li>
      <li class="dropdown">
        <a href="#" class="dropbtn">Links</a>
        <div class="dropdown-content">
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
        </div>
      </li>
      <li><a href='#' class='volunteer'>Volunteer</a></li>
      <li><a href='#' class='contact'>Contact</a></li>
      <li><a href='#' class='calender'>Calender</a></li>
    </ul>

<!-- end snippet -->


    li a,
    .dropbtn {
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
    }

    .dropdown-content {
      display: none;
      position: absolute;
      background-color: #f9f9f9;
      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    }

    .dropdown-content a {
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
      text-align: left;
    }

    .dropdown-content a:hover {
      background-color: #f1f1f1
    }

    .dropdown:hover .dropdown-content {
      display: block;
    }

    ul {
      margin: 0px;
      padding: 0px;
      border: 0px;
      vertical-align: middle;
    }

    ul#nlist {
      text-align: center;
      position: relative;
      top: 50%;
      transform: translateY(-50%);
    }

    ul#nlist li {
      display: inline;
    }

    _______________________________________________________________>>>



    <ul id='nlist'>
      <li><a href='#' class='home'>Home</a></li>
      <li><a href='#' class='about'>About</a></li>
      <li class="dropdown">
        <a href="#" class="dropbtn">Links</a>
        <div class="dropdown-content">
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
        </div>
      </li>
      <li><a href='#' class='volunteer'>Volunteer</a></li>
      <li><a href='#' class='contact'>Contact</a></li>
      <li><a href='#' class='calender'>Calender</a></li>
    </ul>


  [1]: https://jsfiddle.net/kolinio/p9Lea8g4/6/

Answer 1

试试这个。

HTML

<ul id='nlist'>
        <li><a href='#' class='home'>Home</a></li>
        <li><a href='#' class='about'>About</a></li>
        <li class="dropdown">
            <a href="#" class="dropbtn">Links</a>
                <ul class="dropdown-content">
                  <li><a href="#">Link 1</a></li>
                  <li><a href="#">Link 2</a></li>
                  <li><a href="#">Link 3</a></li>
                </ul>
        </li>
        <li><a href='#' class='volunteer'>Volunteer</a></li>
        <li><a href='#' class='contact'>Contact</a></li>
        <li><a href='#' class='calender'>Calender</a></li>
    </ul>

CSS:

ul {

}

.dropdown{
  position:relative;
}
li a, .dropbtn {
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    left:-9999px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
    display: block;
    left:0px;
}

ul {
  background-color: #a2ded0;
    margin: 0px;
    padding: 0px;
    border: 0px;
    vertical-align: middle; 
}

ul#nlist {
    text-align: center;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

ul#nlist li {
    display: inline;
}

https://jsfiddle.net/p9Lea8g4/7/