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

Question

因此，我刚刚开始从w3school学习html。 我已经开始了我的小项目，我将创建一个简单的网站。 现在，我只能从导航栏中创建下拉菜单。 我似乎无法将其放在导航栏中。 ps。我编辑了一些我认为不相关的代码。

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

Answer 1

在下面添加CSS和jQuery

CSS ::

 #myDropdown{
      display: none;
    }

jQuery的::

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

Answer 2

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

http://jsfiddle.net/renukaSingh/njhwr4z2/

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

问题描述

2 个解决方案

解决方案1
1 2018-05-10 06:15:22

解决方案2
0 2018-05-10 06:56:45

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

问题描述

2 个解决方案

解决方案1 1 2018-05-10 06:15:22

解决方案2 0 2018-05-10 06:56:45

解决方案1
1 2018-05-10 06:15:22

解决方案2
0 2018-05-10 06:56:45