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:

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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...