ドロップダウンナビゲーションリンクが機能しない

Question

右クリックして新しいタブで開くをクリックしない限り、ドロップダウンナビゲーションリンクが機能しません。

HTML

<ul> 
    <li class="has-child"><a href="#">Content</a> 
     <ul class="dropdown"> 
     <li><a href="c1.html">Content 1</a></li> 
     <li><a href="c2.html">Content 2</a></li> 
     <li><a href="c3.html">Content 3</a></li> 
     </ul> 
    </li> 
    <li><a href="images.html">Images</a></li> 
    <li><a href="index.html">Home</a></li> 
    </ul> 

CSS CSSのほとんど

.has-child { 
    position: relative; 
    left: 0; 
} 

.has-child:after { 
    position: absolute; 
    margin-top: -5px; 
    top: 27px; 
    right: 5px; 
    content: ""; 
    width: 0px; 
    height: 0px; 
    border-style: solid; 
    border-width: 8px 5px 0 5px; 
    border-color: #F09F47 transparent transparent transparent; 
} 

@media only screen and (max-width: 45em) { 
    .has-child:after { 
    position: absolute; 
    margin-top: -5px; 
    top: 25px; 
    right: 20px; 
    content: ""; 
    width: 0px; 
    height: 0px; 
    border-style: solid; 
    border-width: 10px 5px 0 5px; 
    border-color: #307e5c transparent transparent transparent; 
    } 
} 

.has-child .dropdown { 
    position: absolute; 
    left: -40px; 
    z-index: 99; 
    display: none; 
    margin-top: 10px; 
    width: 200px; 
    background: #fffbf5; 
    border-radius: 6px; 
} 

@media only screen and (max-width: 45em) { 
    .has-child .dropdown { 
    position: relative; 
    left: 0; 
    z-index: auto; 
    margin-top: 0; 
    display: block; 
    width: 100%; 
    border-radius: 0; 
    } 
} 

.has-child .dropdown:after { 
    position: absolute; 
    top: -10px; 
    left: 50%; 
    margin-left: -10px; 
    content: ""; 
    width: 0px; 
    height: 0px; 
    border-style: solid; 
    border-width: 0 10px 10px 10px; 
    border-color: transparent transparent white transparent; 
} 

@media only screen and (max-width: 45em) { 
    .has-child .dropdown:after { 
    border: 0; 
    } 
} 

.has-child .dropdown li { 
    float: left; 
    width: 100%; 
    font-size: 0.875em; 
    font-weight: 600; 
    color: #3EA377; 
    border-bottom: 1px solid #EFEFEF; 
} 

@media only screen and (max-width: 45em) { 
    .has-child .dropdown li { 
    padding-left: 20px; 
    background: #fffbf5; 
    border-bottom-color: #ffebc8; 
    } 
} 

.has-child .dropdown li a { 
    display: block; 
    padding: 10px; 
    z-index: 200; 
} 

だけで位置決めと設計であるが、以上のリンクをクリックしてから私を妨げているものを見ている可能性があります。

Answer 1

W3スクールにはすばらしいCSSナビバーチュートリアルがあります。テンプレートリストには、メディアデバイスのトップナビゲーションに変更する応答性のあるサイドナビゲーションバーが含まれています。これは、メディアサイズの問題を処理するためのすっきりした方法です。

スタンドアロンテンプレートとして使用するか、応答テンプレートに追加して、2次および3次のリストを作成するドロップダウンオプションが提供されています。 @mediaの質問が質問コードと共に掲示されるので、おそらく応答性は価値があります。チュートリアルに示されていない例を投稿する努力において

http://www.w3schools.com/css/css_navbar.asp

は、ここでのナビゲーションバーには、ブラウザのサイズ変更に拡大/縮小応答ページコンテンツと固定幅のドロップダウンサイド・ナビゲーションバーです。これはW3コードを適用することで構築されました。 @mediaクエリは、必要に応じて調整/追加することができます。

希望すると便利です。それは私の作品

CSS

body {margin: 0;} 

ul.sidenav { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    background-color: #d2d3df; 
    position: fixed; 
    height: 100%; 
    min-width: 150px; 
    overflow: visible; 
    font-family: 'Arial'; 
    font-size: 11pt; 
    } 

ul.sidenav li a { 
    display: block; 
    color: #000000; 
    padding: 8px 0 8px 16px; 
    text-decoration: none; 
    } 


ul.sidenav li a.active { 
    background-color: #4f6780; 
    color: white; 
} 

ul.sidenav li a:hover:not(.active) { 
    background-color: #6c6d76; 
    color: white; 
} 

li a, .dropbtn { 
    display: block; 
    color: white; 
    text-align: left; 
    padding: 4px 4px; 
    text-decoration: none; 
} 


li a:hover, .dropdown:hover .dropbtn { 
    background-color: #77798b;  

} 

li.dropdown { 
    display: block; 
} 

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

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

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

} 

.dropdown-content a { 
     border-bottom: 1px solid #000; /*Adds a line under each sublink*/ 
} 



@media screen and (max-width: 400px){ 
    ul.sidenav li a { 
    text-align: left; 
    float: none; 
} 
} 


div.content { 
margin-left: 160px; 
padding: 5px; 
font-family: 'Arial'; 
} /*Page content styling. Can edit or remove.*/ 

HTML

<!-- Navigation -->  

<ul class="sidenav"> 
    <li><a class="active" href="#home">Top Link</a></li> 

    <li class="dropdown"> 
    <a href="#" class="dropbtn">Content 1</a> 
    <div class="dropdown-content"> 
     <a href="#">content link 1</a> 
     <a href="#">content link 2</a> 
     <a href="#">content link 3</a> 
    </div> 
    </li> 

    <li class="dropdown"> 
    <a href="#" class="dropbtn">Content 2</a> 
    <div class="dropdown-content"> 
     <a href="#">content link 4</a> 
     <a href="#">content link 5</a> 
     <a href="#">content link 6</a> 
    </div> 
    </li> 

    <li><a href="images.html">Images</a></li> 
    <li><a href="index.html">Home</a></li> 
</ul> 

    <!-- End Navigation -->