下拉菜單無法正常顯示HTML

Question

.dropbtn { 
 
    background-color: #4CAF50; 
 
    color: white; 
 
    padding: 16px; 
 
    font-size: 16px; 
 
    border: none; 
 
    cursor: pointer; 
 
} 
 

 
.templatemo_menu { 
 
    position: relative; 
 
    display: inline-block; 
 

 
} 
 

 
.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; 
 
} 
 

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

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

 
.dropdown:hover .dropbtn { 
 
    background-color: #3e8e41; 
 
} 
 

 
#templatemo_menu { 
 
    float: left; 
 
    height: 37px; 
 
    margin-top: 12px; 
 
    overflow:hidden; 
 

 
}

<div id="templatemo_menu"> 
 

 
        <ul> 
 
         <li><a href="#" class="current">Home</a></li> 
 

 
         <li ><a href="Aboutus.html" class="dropbtn" >Coindia</a> 
 
         <button class="dropbtn">Dropdown</button> 
 
    <div class="dropdown-content"> 
 
    <a href="#">Link 1</a> 
 
    <a href="#">Link 2</a> 
 
    <a href="#">Link 3</a> 
 
    </div> 
 
         <li><a href="http://www.flashmo.com" target="_parent">Services</a></li> 
 
         <li><a href="http://www.koflash.com" target="_parent">Facility</a></li> 
 
         <li><a href="#">Photo Gallery</a></li> 
 
         <li><a href="#">Careers</a></li> 
 

 
        </ul>  
 

 
    </div> <!-- end of templatemo_menu -->

我想創建HTML子菜單。在這裏，我創建了菜單和子菜單，但它沒有正確顯示。請幫我this.i想要的子菜單中打開向下的一面，當光標放在它下面是

Answer 1

.dropbtn { 
 
    background-color: #4CAF50; 
 
    color: white; 
 
    padding: 16px; 
 
    font-size: 16px; 
 
    border: none; 
 
    cursor: pointer; 
 
} 
 

 
#templatemo_menu { 
 
    position: relative; 
 
    display: inline-block; 
 

 
} 
 

 
.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; 
 
} 
 

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

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

 
.dropdown:hover .dropbtn { 
 
    background-color: #3e8e41; 
 
} 
 

 
#templatemo_menu { 
 
    float: left; 
 
    // height: 37px; 
 
    margin-top: 12px; 
 
    // overflow:hidden; 
 

 
}

<div id="templatemo_menu"> 
 

 
        <ul> 
 
         <li><a href="#" class="current">Home</a></li> 
 

 
         <li ><a href="Aboutus.html" class="dropbtn" >Coindia</a> 
 
         <button class="dropbtn">Dropdown</button> 
 
    <div class="dropdown-content"> 
 
    <a href="#">Link 1</a> 
 
    <a href="#">Link 2</a> 
 
    <a href="#">Link 3</a> 
 
    </div> 
 
         <li><a href="http://www.flashmo.com" target="_parent">Services</a></li> 
 
         <li><a href="http://www.koflash.com" target="_parent">Facility</a></li> 
 
         <li><a href="#">Photo Gallery</a></li> 
 
         <li><a href="#">Careers</a></li> 
 

 
        </ul>  
 

 
    </div> <!-- end of templatemo_menu -->

<div id="templatemo_menu">你給ID templatemo_menu與它有關CSS和HTML並在你的CSS你給了.templatemo_menu。你必須使用#templatemo_menu爲id。也改變#templatemo_menu

#templatemo_menu { 
    float: left; 
    // height: 37px; 
    margin-top: 12px; 
    //overflow:hidden; 

} 

Answer 2

一些小的編輯風格將導致下拉工作，似乎有一些其他的工作，剩下要做。

.dropbtn { 
 
    background-color: #4CAF50; 
 
    color: white; 
 
    padding: 16px; 
 
    font-size: 16px; 
 
    border: none; 
 
    cursor: pointer; 
 
} 
 

 
.templatemo_menu { 
 
    position: relative; 
 
    display: inline-block; 
 

 
} 
 

 
.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; 
 
} 
 

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

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

 
.dropdown:hover .dropbtn { 
 
    background-color: #3e8e41; 
 
} 
 

 
#templatemo_menu { 
 
    float: left; 
 
    height: 37px; 
 
    margin-top: 12px; 
 
    overflow:hidden; 
 

 
}

<div> 
 

 
        <ul> 
 
         <li><a href="#" class="current">Home</a></li> 
 

 
         <li class="templatemo_menu"><a href="Aboutus.html" class="dropbtn" >Coindia</a> 
 
         <button class="dropbtn">Dropdown</button> 
 
    <div class="dropdown-content"> 
 
    <a href="#">Link 1</a> 
 
    <a href="#">Link 2</a> 
 
    <a href="#">Link 3</a> 
 
    </div> 
 
         <li><a href="http://www.flashmo.com" target="_parent">Services</a></li> 
 
         <li><a href="http://www.koflash.com" target="_parent">Facility</a></li> 
 
         <li><a href="#">Photo Gallery</a></li> 
 
         <li><a href="#">Careers</a></li> 
 

 
        </ul>  
 

 
       </div> <!-- end of templatemo_menu -->