私はうまく機能するドロップダウンメニューを持っていますが、私が気づいた問題は、子要素のリンクをホバーするとメニューが開きますが、そのリンクはメニューが表示されます。上のCSSのメニューにカーソルを合わせて
<div class="desktop_navigation">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a>
<ul>
<li><a href="#">Link 2 child</a></li>
</ul>
</li>
<li><a href="#">Link 3</a></li>
</ul>
</div>
これはメニューの構造です。子要素は<li>のサブ<ul>であり、親の<li>がホバリングされるまでCSSで隠されます。
https://jsfiddle.net/nrzfa49s/あなた.desktop_navigation ul li ulその親ul（.desktop_navigation ul）からpadding-top: 30pxを継承しています親リンク（リンク2）を覆い隠してリンクを解除することができません。
これらのスタイルを更新し、あなたの問題を解決するには：ここで
.desktop_navigation ul li ul {
list-style: none;
display: none;
padding-top: 0; /*remove the 30px padding*/
}
.desktop_navigation ul li:hover ul {
display: block;
position: absolute;
top: 100%; /*set your top value to be more dynamic based on the height of the parent*/
z-index: 890;
}
は、このソリューションをデモfiddleです。通常
メニュー要素をスタイリングするときので、ネストの>を使用することをお勧めします。このようなあなたのスタイルのメニュー（すなわち.desktop_navigation > ulこれはパディングを継承子ulを防ぐことができます）
いくつかの時間がかかりましたが、問題はここにある：
.desktop_navigation ul {
list-style: none;
padding: 0;
margin: 0;
padding-top: 30px; //remove this line
}
はあなただけul年代についてpadding-topが親/トップレベルのメニューになりたいです。次に、ネストされたメニューからtop属性を削除すると、トップレベルメニューのリンクの後に表示されます。
.desktop_navigation a {
\t color: #ccc;
\t text-decoration: none;
\t display: inline-block;
\t padding: 12px;
\t transition: all 0.5s ease;
\t -webkit-transition: all 0.5s ease;
\t -moz-transition: all 0.5s ease;
\t -o-transition: all 0.5s ease;
}
.desktop_navigation ul li:hover a {
\t color: #fff;
\t background: #444;
\t text-decoration: none;
\t display: inline-block;
\t z-index: 1002;
\t padding: 12px;
\t transition: all 0.5s ease;
\t -webkit-transition: all 0.5s ease;
\t -moz-transition: all 0.5s ease;
\t -o-transition: all 0.5s ease;
}
.desktop_navigation ul li ul li a:link,
.desktop_navigation ul li ul li a:visited,
.desktop_navigation ul li ul li a:active {
\t z-index: 1001;
\t width: 100%;
\t display: block;
\t color: #444;
\t background: #fff;
\t transition: all 0.5s ease;
\t -webkit-transition: all 0.5s ease;
\t -moz-transition: all 0.5s ease;
\t -o-transition: all 0.5s ease;
}
.desktop_navigation ul li ul li a:hover {
\t width: 100%;
\t display: block;
\t color: #111;
\t z-index: 1002;
\t background: #ccc;
\t transition: all 0.5s ease;
\t -webkit-transition: all 0.5s ease;
\t -moz-transition: all 0.5s ease;
\t -o-transition: all 0.5s ease;
}
.desktop_navigation ul {
\t list-style: none;
\t padding: 0;
\t margin: 0;
}
.desktop_navigation > ul {
padding-top: 30px;
}
.desktop_navigation ul li {
\t display: inline-block;
\t position: relative;
\t padding: 0;
\t margin: 0;
\t z-index: 1002;
}
.desktop_navigation ul li ul {
\t list-style: none;
\t display: none;
}
.desktop_navigation ul li:hover ul {
\t display: block;
\t position: absolute;
\t z-index: 890;
}
.desktop_navigation ul li ul li {
\t float: none;
\t position: relative;
\t min-width: 180px;
\t z-index: 890;
}\t \t \t \t \t <div class="desktop_navigation">
\t \t \t \t \t \t <ul>
\t \t \t \t \t \t \t <li><a href="#">Link 1</a></li>
\t \t \t \t \t \t \t <li>
\t \t \t \t \t \t \t \t <a href="#">Link 2</a>
\t \t \t \t \t \t \t \t <ul>
\t \t \t \t \t \t \t \t \t <li><a href="#asdf">Link 2 child</a></li>
\t \t \t \t \t \t \t \t </ul>
\t \t \t \t \t \t \t </li>
\t \t \t \t \t \t \t <li><a href="#">Link 3</a></li>
\t \t \t \t \t \t </ul>
\t \t \t \t \t </div>