Jump to content

Can I Use A DropDown Menu With Outline Buttons?


paulp575
 Share

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:

Quote

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

<style>
  <!--
    *.BTN
    {
      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 */
    }

    *.BTN:hover
    {
      BACKGROUND-COLOR: #FFCC66;                      /* Light orange */
      COLOR: #ffffff;                                 /* White */
    }

    *.TEXT-ALIGN-CENTER
    {
      TEXT-ALIGN: center;
    }
  -->
</style>

</head>

<body>

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

<!--
  Home
  About Us
  Join
  Resources (dropdown)
  Gallery
  Contact EWATV
  Donate
-->
</main>

</body>

</html>

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
 Share

×
×
  • Create New...