paulp575 Posted May 13, 2020 Share Posted May 13, 2020 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. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now