Css 如何在导航栏中放置下拉菜单？_Css_Html

Css 如何在导航栏中放置下拉菜单？

css html

Css 如何在导航栏中放置下拉菜单？,css,html,Css,Html,所以，我刚从学校开始学习html。我已经开始了我的小项目，我要创建一个简单的网站。现在我一直在用导航栏创建下拉菜单。我好像不能把它放在导航栏里。另外，我已经编辑了一些代码，我认为它们不相关 .topnav { overflow: hidden; padding-top: 6px; padding-bottom: 6px; margin: 0px; } .topnav h1 { text-ali

所以，我刚从学校开始学习html。我已经开始了我的小项目，我要创建一个简单的网站。现在我一直在用导航栏创建下拉菜单。我好像不能把它放在导航栏里。另外，我已经编辑了一些代码，我认为它们不相关

    .topnav {
        overflow: hidden;
        padding-top: 6px;
        padding-bottom: 6px;
        margin: 0px;
    }
    .topnav h1 {
        text-align: center;
        font-size: 22px;
        color: #FFFFFF;
        margin: 0px;
    }
    .dropbtn {
        background-color: #3498DB;
        color: white;
        padding: 16px;
        font-size: 16px;
        border: none;
        cursor: pointer;
    }
    .dropdown {
        position: relative;
        display: inline-block;
        float: left;
    }
    .show {
        display:block;
    }
</style>
</head>
<body>
    <div class="topnav">
        <h1>Home</h1>
        <div class="dropdown">
            <button onclick="myFunction()" class="dropbtn">Menu</button>
            <div id="myDropdown" class="dropdown-content">
                <a href="#content">Content</a>
            </div>
        </div>
    </div>

在下面添加css和jQuery

css:：

jQuery:：

$('.dropbtn').click(function(){
     $(this).next('#myDropdown').stop(true,false).slideToggle();
  })

看看这个。学习并实施。

$('.dropbtn').click(function(){
     $(this).next('#myDropdown').stop(true,false).slideToggle();
  })

You have to use script for hide/show your dropdown menu, Here you can see script