css - 如何将下拉菜单放在导航栏中?

标签 css html

所以,我刚开始从 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>

最佳答案

在下面添加css和jQuery

CSS::

 #myDropdown{
      display: none;
    }

jQuery::

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

关于css - 如何将下拉菜单放在导航栏中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50266499/

相关文章:

具有不透明度的 Css 转换 scaleX 在 Safari 中不起作用

html - Bootstrap - 悬停时下拉菜单消失

javascript - 如何自动暂停其他音频播放器并仅播放 Wix 网站上选择的音频播放器?

html - 元素没有按照说明向左浮动

jquery - IE9 中的平滑过渡

jquery - 在高度为 :100% 的溢出元素之后放置页脚

css - 如何隐藏 div 的溢出?

html - 我的缩略图的 CSS 问题

jquery - Accordion 是否可以保持所有部分关闭,直到用户单击特定部分标题

php - 面包屑 : change links depending on where I am