ホバードロップダウンメニューは、リンクアンカーのすぐ下ではなく左に表示されます

Question

これはおそらく非常に簡単ですが、リンク要素の上にマウスを置くと、リンクアンカーの下にリンクアンカーの下に垂直にドロップするのではなく、それ。ありがとう。

[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/