Dropdown menu with hyperlink |
Dropdown menu with hyperlink |
sk33t |
Nov 26 2019, 06:14 AM
Post
#1
|
Group: Members Posts: 2 Joined: 26-November 19 Member No.: 27,051 |
Hello,
I am a complete HTML n00b. Please can you help. I have "created" this code using other help guides. Essentially i am trying to create a drop down menu with hyperlinks. I know I am doing this wrong and I have no idea where to start but I have got to get on with the project ! This is the code that I have written for a drop down menu with hyperlink. To execute the file is html, when opened the file displays the full code. I took the code from this page: https://www.quora.com/How-do-I-create-a-hyp...wn-list-in-HTML Thanks ! /* BEGIN */ <html> <head> <style> /* Dropdown button */ .dropdown-button { background-colour: #0000b3; colour: white; padding: 16px; font-size: 16px; border: none; } .dropdown { position: relative; display: inline-block; } /* Dropdown Content */ .dropdown.list { 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; } /*Links inside the dropdown */ .dropdown-list a { color: black; padding: 12px 16 px; text-decoration: none; display: block; font-family: veranda; } /* Change color of dropdown list on hover */ .dropdown: a:hover { background-color: #ddd } /* Show the dropdown list on hover */ .dropdown:hover .dropdown-button { display: block; } /* Change the background color of the dropdown button when the dropdown list is shown */ .dropdown:hover .dropdown-button { background-color #6666ff; } </style> </head> <body> <div class=“dropdown”> <button class=“dropdown-button”>Dropdown</button> <div class=“dropdown-list”> <a href=“#”>BIO, BRIEF, CABLE, CAIPER, CONT, FORM, HW, IR, MIN, MISC, NOTES, NSPR, PREL, REGULATION, RS, STUDY, SUMMARY</a> <a href =“#”>LETTER</a> <a href =“#”>MEMO</a> <a href =“#”>MFR & MF</a> <a href =“#”>OPEN, OPEN SOURCE, MAGAZINE</a> <a href =“#”>PAPER</a> <a href =“#”>REPORT</a> <a href =“#”>RP</a> </div> </div> </body> </html> /* END */ This post has been edited by sk33t: Nov 26 2019, 06:18 AM |
Christian J |
Nov 26 2019, 06:38 AM
Post
#2
|
. Group: WDG Moderators Posts: 9,660 Joined: 10-August 06 Member No.: 7 |
.dropdown: a:hover { The first colon character above shouldn't be there, try this instead: CODE .dropdown a:hover { QUOTE <div class=“dropdown”> Double-quote characters like the ones above are invalid, use these instead: CODE <div class="dropdown"> (the same applies elsewhere too). |
sk33t |
Nov 29 2019, 06:49 AM
Post
#3
|
Group: Members Posts: 2 Joined: 26-November 19 Member No.: 27,051 |
[quote]<div class=“dropdown”>[/quote]
Double-quote characters like the ones above are invalid, use these instead: CODE <div class="dropdown"> (the same applies elsewhere too). [/quote] Hello. Thanks for your help. Can you clarefy one thing for me. You told me that double quote characters are invalid but in your correction you have used double quotes. should it be: CODE <div class=dropdown> ?thanks again for your help ! |
Christian J |
Nov 29 2019, 07:20 AM
Post
#4
|
. Group: WDG Moderators Posts: 9,660 Joined: 10-August 06 Member No.: 7 |
Can you clarefy one thing for me. You told me that double quote characters are invalid but in your correction you have used double quotes. It needs to be the right type of quote characters. These are OK: CODE "dropdown" (the ones on a computer keyboard), but not "curly" or "fancy" ones like these: CODE “dropdown” (often used by e.g. MS Office?). QUOTE should it be: CODE <div class=dropdown> ?You can sometimes omit the quotes "if it doesn't contain ASCII whitespace or any of " ' ` = < or >". You can also use single quotes like these: CODE 'dropdown' (but again only the ones on a keyboard, not curly ones). QUOTE thanks again for your help ! You're welcome! |
Lo-Fi Version | Time is now: 26th April 2024 - 07:46 PM |