下拉菜单未在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创建子菜单。在这里，我创建了菜单和子菜单，但它没有正确显示。请帮我这个。我希望当光标放在它上面时子菜单向下打开这里有与之相关的CSS和HTML

Answer 1

＆＃13;

＆＃13;

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

}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

<div id="templatemo_menu">您已经提供了身份templatemo_menu，而且您已经给了.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 -->