CODEWITHSUNDEEP
javascripthtmlcssblogger
Zhong Li
Zhong Li

Reputation: 11

How to active the menu button when it display the page?

Can anyone help me to Insert the menu button in active-based? And I need it suitable for my Blogger menu... please... I really need help... enter image description here

As the image shows above, it actually looks like this.

I have tried many active based by using JavaScript, CSS, but none of it works.

Below is my CSS code, is there any problem?

.dropbtn {
  background-color: grey;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}


.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {background-color: #ddd;}


.dropdown:hover .dropdown-content {display: block;}


.dropdown:hover .dropbtn {background-color: blue;}
<div class="dropdown active">
<a href='#'><button class="dropbtn">Home</button></a>
</div>

<div class="dropdown">
<a href='#'><button class="dropbtn">About</button></a>
<div class="dropdown-content">
    <a href="#">Profile</a>
    <a href="#">Introduction</a>
</div>

</div>

<div class="dropdown">
<a href='#'><button class="dropbtn">Posts</button></a>
</div>

<div class="dropdown">
<a href='#'><button class="dropbtn">Template</button></a>
</div>


<div class="dropdown">
  <button class="dropbtn">Theme</button>
  <div class="dropdown-content">
    <a href="#">Ocean</a>
    <a href="#">Forest</a>
  </div>
</div>

Upvotes: 1

Views: 1020

Answers (1)

dylanjameswagner
dylanjameswagner

Reputation: 552

You should not nest a button inside an a tag, that is not valid HTML. You can use styles to get a similar look.

HTML

<nav>
    <div class="dropdown active">
        <a class="dropbtn" href="#">Home</a>
    </div>

    <div class="dropdown">
        <a class="dropbtn" href="#">About</a>
        <div class="dropdown-content">
            <a href="#">Profile</a>
            <a href="#">Introduction</a>
        </div>
    </div>

    <div class="dropdown">
        <a class="dropbtn" href="#">Posts</a>
    </div>

    <div class="dropdown">
        <a class="dropbtn" href="#">Template</a>
    </div>

    <div class="dropdown">
        <button class="dropbtn">Theme</button>
        <div class="dropdown-content">
            <a href="#">Ocean</a>
            <a href="#">Forest</a>
        </div>
    </div>
</nav>

CSS (for the active class)

/* styles the direct child link of .active */
.active > a {
    background-color: red;
}

Upvotes: 1

Related Questions