The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> Dropdown menu with hyperlink
sk33t
post 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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Nov 26 2019, 06:38 AM
Post #2


.
********

Group: WDG Moderators
Posts: 9,648
Joined: 10-August 06
Member No.: 7
QUOTE(sk33t @ Nov 26 2019, 12:14 PM) *

.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).
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
sk33t
post 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 !
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Nov 29 2019, 07:20 AM
Post #4


.
********

Group: WDG Moderators
Posts: 9,648
Joined: 10-August 06
Member No.: 7
QUOTE(sk33t @ Nov 29 2019, 12:49 PM) *

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!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Markup (HTML, XHTML, XML) · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 16th April 2024 - 04:56 AM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC