Jump to content

Can I Use A DropDown Menu With Outline Buttons?


Recommended Posts

I've created an outline button menu following the samples here: How TO - Outline Buttons .

One of the outline buttons needs to have 3 dropdown items. I've reviewed the samples here: How TO - Dropdown Navbar , but am confused if I can add the dropdown function to only one of the outline buttons.

I've attached a screen shot of the effect I'd like to create - except I'd like each item in the dropdown to be a separate outline button. This example is from a CMS we have decided not to use.

Here's the HTML code I'm using to create the web page:


<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Menu Test</title>

      FONT-SIZE: 16px;
      FONT-WEIGHT: bold;
      COLOR: #000000;                                 /* Black */
      BACKGROUND-COLOR: #33CC00;                      /* Strong green */
      BORDER: 2px solid #000000;                      /* Black */
      BORDER-RADIUS: 25px;
      PADDING: 14px 28px;
      CURSOR: pointer;
      MARGIN: 0px 15px;                               /* Sets margin for top and right spacing (bottom and left take same values */

      BACKGROUND-COLOR: #FFCC66;                      /* Light orange */
      COLOR: #ffffff;                                 /* White */

      TEXT-ALIGN: center;



<main class="TEXT-ALIGN-CENTER">
  <h1>EWATV Menu</h1>

  <a href="https://ewatv.org/" target="_blank"><button class="BTN">Home</button></a>
  <a href="https://ewatv.org/About-Us.htm" target="_blank"><button class="BTN">About Us</button></a>
  <a href="https://ewatv.org/Join.htm" target="_blank"><button class="BTN">Join</button></a>
  <a href="https://ewatv.org/Resources.htm" target="_blank"><button class="BTN">Resources</button></a>
  <a href="https://ewatv.org/Gallery.htm" target="_blank"><button class="BTN">Gallery</button></a>
  <a href="https://ewatv.org/Contact.htm" target="_blank"><button class="BTN">Contact EWATV</button></a>
  <a href="https://ewatv.org/Donate.htm" target="_blank"><button class="BTN">Donate</button></a>

  About Us
  Resources (dropdown)
  Contact EWATV



Thanks in advance.

WIX dropdown menu.jpg

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...