CODEWITHSUNDEEP
csshtml
fordkuppp
fordkuppp

Reputation: 1

How do I put my drop down menu in the navigation bar?

So, I just started learning html from w3school. And I have started my little project which I am going to create simple website. And now I am stuck with creating drop down menu from my navigation bar. I can't seem to put it in the navigation bar. ps.I have edited some code I don't think it's relevant.

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

Upvotes: 0

Views: 57

Answers (2)

renuka
renuka

Reputation: 758

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

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

Upvotes: 0

PPL
PPL

Reputation: 6555

Add below css and jQuery

css::

 #myDropdown{
      display: none;
    }

jQuery::

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

Upvotes: 1

Related Questions