I want to be able to open a drop down menu, and when I select one of the options, a small window will popup with more options available. Something shown in this picture I found: http://datasmugglers.com/wp-content/uploads/mute-someone.jpg
I tried some solutions I found but no matter what I do it doesn't seem to work. I can't find any errors but I'm trying to do it exactly like the template someone gave me in my last question and its just not working.
//toggles the hidden dropdown
function dropdown() {
document.getElementById("myDropdown").classList.toggle('show');
}
//opens a popup window from clicking settings
function settings() {
document.getElementById('settingsD').classList.toggle('show');
}
/* dropdown button*/
.dropbtn {
background-color:#4caf50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/*drop down button on hover & focus*/
.dropbtn:hover, .dropbtn:focus {
background-color: #3e8e41;
}
/*the container <div> needed to postision the content */
.dropdown {
position: relative;
display: inline-block;
}
/*dropdown content*/
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/*changes the style of the list*/
.dropdown-content2 {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/*links in the dropdown*/
.dropdown-content a:hover {background-color: #f1f1f1}
/*show the dropdown (use Js to add this class to the dropwdown-content container when its clicked)*/
.show {display:block;}
.settings {
display: none;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
z-index: 10000;
max-width: 26em;
height: 199px;
padding: 28px 22px;
border: 4px solid rgb(197, 218, 255);
background: black;
}
<!DOCTYPE html>
<html>
<link type="text/css" rel="stylesheet" href="dropdown.css">
<script src="dropdown.js" type="text/javascript"></script>
<head>
<div class="dropdown">
<button onclick='dropdown()' class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
<div class='dropdown-content2' onclick="settings()">Settings</div>
<span id='settingsD' class='settings'>These are the settings</span>
<div class='dropdown-content2'>Link 2</div>
<div class='dropdown-content2'>Link 3</div>
</div>
</div>
</head>
</html>
As you can see I can't click on the settings part of the dropdown and have the settings text show, and I'm not sure why. Thank you for your help in advance!
You have to place the .show below .settings in your css. If you have it like you do the display:block; in .show gets overwritten by the display:none; in .settings which is below.
Else you could do .settings:not(.show) if none of the css for .settings should be displayed.
Related
I want to make the menu stick to the top of the page.
The code works just fine if I just add the code to the page.
However, I want to use javascript because I want to be able to change the menu on every page without having to do it manually on each one.
document.getElementById('menu-js').innerHTML = `<div id="menu">
<div class="dropdown">
<button class="dropbtn">Button_1</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Button_2</button>
<div class="dropdown-content">
Link 4
Link 5
Link 6
</div>
</div>
</div>`
#import url('https://fonts.googleapis.com/css?family=Abril+Fatface|Arsenal|Rubik&display=swap');
#menu {
background-color: white;
top: 0px;
left: 0px;
position: sticky;
padding-left: 10px;
margin-top: -8px;
margin-left: -30px;
margin-right: -0.51%;
border-bottom-color: black;
border-bottom-style: solid;
border-bottom: 5px;
}
.dropbtn {
background-color: white;
color: black;
padding: 16px;
font-size: 16px;
border: none;
margin: none;
font-family: 'Arsenal';
}
.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f2d3d8;
min-width: 200px;
z-index: 1;
font-family: 'Arsenal';
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #ffd3b6;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #c06014;
color: white;
}
#page-container {
position: relative;
min-height: 100vh;
}
#content-wrap {
padding-bottom: 2.5rem;
}
footer {
position: absolute;
bottom: 0;
width: 100%;
height: 2.5rem;
}
hr {
margin-left: -20px;
color: #c06014
}
<html>
<head>
<title>TITLE</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id='page-container'>
<div id='content-wrap'>
<h1>Content above menu</h1>
<div id='menu-js'></div>
<h1>body</h1>
<h2>body</h2>
</div>
<footer>
<hr>FOOTER</footer>
</div>
<script src='menu.js'></script>
</body>
</html>
If possible, I would like to only use these three languages.
Thanks!
Your code seems almost perfect in terms of sticky property.
Try to add a max-height property(value in pixel) to the menu-js div.
I am trying to use the hover command in CSS and it works when hovering over my property button, but I want it to hide after the click event in JavaScript.
Below is an example of my code with a "property" button and then a dropdown that comes when you hover over it. If I add $(".dropdown-content").css("display","none"); to the button click event then the hover command stops working.
I don't understand why this is the case as I would be hiding a nested div .dropdown-content and so the hover command should still work for the outer div `.dropdown but it doesn't. Any help would be appreciated!
$("#001").on('click', function() {
window.whichtab = 1;
});
$("#002").on('click', function() {
window.whichtab = 2;
});
$("#001,#002").on('click', function() {
$("#title1,#title2").hide()
if (window.whichtab == 1) { //home
$("#title1").show();
$("#title1").css("display", "inline");
//$(".dropdown-content").css("display","none");
}
if (window.whichtab == 2) {
$("#title2").show();
$("#title2").css("display", "inline");
//$(".dropdown-content").css("display","none");
}
});
.dropbtn {
background-color: #3d70b2;
color: white;
padding: 13px;
font-size: 16px;
border: none;
}
.dropdown-content button {
color: black;
border: none;
width: 250px;
height: auto;
padding: 13px 16px;
text-align: left;
text-decoration: none;
display: inline-block;
cursor: pointer;
}
.dropdown-content {
display: none;
border: solid;
border-radius: 0px;
border-color: #3d70b2;
position: absolute;
background-color: 17, 83, 238;
min-width: 250px;
box-shadow: 0px 12px 16px 0px rgba(0, 0, 0, 0);
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3d70b2;
}
#title1 {
display: inline;
}
#title2 {
/*defult title is hidden for 2*/
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dropdown">
<!--title of each tab-->
<button class="dropbtn">Property</button>
<h4 id="title1"> Home page</h4>
<h4 id="title2"> Content Page</h4>
<div class="dropdown-content">
<!--each button going to each tab-->
<button id="001" ,class='noHover'>Home Page</button><br>
<button id="002">Content Page</button><br>
</div>
</div>
display: none doesn't preserve the space and you can not hover on that. You can use opacity property like the following way:
$(".dropdown-content").css("opacity", 0); // hide
$(".dropdown-content").css("opacity", 1); // show
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
body, html {
height: 100%;
}
.parallax {
background-image: url('../images/firstpage.jpg');
height: 100%;
margin: 0;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
button{
background:linear-gradient(to right, rgba(255,0,0,0), rgba(255,255,255,0));
border: none;
font-family: "Roboto";
color: rgba(0, 0, 0, 0.5);
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.4);
text-decoration: none;
display: block;
display: inline-block;
font-size: 26px;
z-index: 1;
float: left;
}
.fixed{
position: fixed;
}
.textbackground
{
position: absolute;
left: 100px;
top: 150px;
}
.textbackgroundbar{
overflow: hidden;
width: 800px;
height: 50px;
background: linear-gradient(to right,rgba(255,255,255,30), rgba(255,0,0,0), rgba(255,255,255,30));
}
.dropbtn {
display: block;
color: black;
padding: 10px;
font-size: 24px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.1));
min-width: 800px;
min-height: 700px;
overflow: auto;
z-index: 1;
}
.dropdown-content a {
color: red;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.show {display:block;}
.dropdown-content1 {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown:hover .dropdown-content1 {
display: block;
}
<div class="parallax">
<div class="textbackground">
<div class="textbackgroundbar">
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<button onclick="myFunction()" class="dropbtn">Dropdown2</button>
</div>
</div>
<div id="myDropdown" class="dropdown-content">
Home
About
Contact
</div>
<div id="myDropdown" class="dropdown-content">
Home2
About2
Contact2
</div>
</div>
</div>
What is the problem here? It should dropdown 2 different things when i click the specific button .. but it doesn't.
If i click dropdown it shows home about contact. If i click dropdown 2, same home about contact, but i want it to be home2 about2 contact2.
The entire website contains 5 parallax slides. It is a project for school, to obtain some sort of license, so i'm really trying to understand that code ( and mostly i do ). I understand every "function" but when i combine them all... i just screw up.
So, please, be as clear as you can. Thank you !
P.S: Excuse my bad english, it's not my first language.. :(
You are using the same ID for two different div elements.
IDs must be unique.
You may solve this issue simply adding the id text and event object to your inline events:
<button onclick="myFunction('myDropdown1', event)" class="dropbtn">Dropdown</button>
<button onclick="myFunction('myDropdown2', event)" class="dropbtn">Dropdown2</button>
And so you can change your function in order to handle the parameters.
When clicking on a dropbtn button:
stop event propagation in order to avoid the window.onclick execution
hide/remove show class to the dropdown-content div if any
toggle the show class on the current dropdown-content div
When clicking on the window be sure to be outside the dropdown-content visible div and dropbtn buttons.
For more details take a look to:
var elt = element.closest(selectors);:
The Element.closest() method returns the closest ancestor of the current element (or the current element itself) which matches the selectors given in parameter. If there isn't such an ancestor, it returns null.
- >var result = element.matches(selectorString);
The snippet:
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction(eleId, event) {
//
// stop event propagation in order to avoid the window.onclick execution
//
event.stopPropagation();
//
// remove show class to previous shown div
//
document.querySelectorAll('.dropdown-content.show').forEach(function(ele, idx) {
ele.classList.remove("show");
});
//
// select by id using the param value
//
document.getElementById(eleId).classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
//
// if not a button and not a dropdown-content....
//
if (!event.target.matches('.dropbtn') && event.target.closest('.dropdown-content') == null) {
//
// remove show class to previous shown div
//
document.querySelectorAll('.dropdown-content.show').forEach(function(ele, idx) {
ele.classList.remove("show");
});
}
}
button{
background:linear-gradient(to right, rgba(255,0,0,0), rgba(255,255,255,0));
border: none;
font-family: "Roboto";
color: rgba(0, 0, 0, 0.5);
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.4);
text-decoration: none;
display: block;
display: inline-block;
font-size: 26px;
z-index: 1;
float: left;
}
.fixed{
position: fixed;
}
.textbackground {
position: absolute;
left: 100px;
top: 150px;
}
.textbackgroundbar{
overflow: hidden;
width: 800px;
height: 50px;
background: linear-gradient(to right,rgba(255,255,255,30), rgba(255,0,0,0), rgba(255,255,255,30));
}
.dropbtn {
display: block;
color: black;
padding: 10px;
font-size: 24px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.1));
min-width: 800px;
min-height: 700px;
overflow: auto;
z-index: 1;
}
.dropdown-content a {
color: red;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.show {display:block;}
.dropdown-content1 {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown:hover .dropdown-content1 {
display: block;
}
<div class="parallax">
<div class="textbackground">
<div class="textbackgroundbar">
<div class="dropdown">
<button onclick="myFunction('myDropdown1', event)" class="dropbtn">Dropdown</button>
<button onclick="myFunction('myDropdown2', event)" class="dropbtn">Dropdown2</button>
</div>
</div>
<div id="myDropdown1" class="dropdown-content">
Home
About
Contact
</div>
<div id="myDropdown2" class="dropdown-content">
Home2
About2
Contact2
</div>
</div>
</div>
I am currently creating my first website and I created a navigation bar. But I have noticed that there is some extra space on the right side of the bar. So when I highlight over the last thing on my bar there is a little bit of space that does not change colors (when I hover over things on the tab it changes the background color). So I was wondering if anyone has a solution to this problem?
ul.tab {
list-style-type: none;
margin: auto;
font-family: "CopperPlate", Times, serif;
padding-left: 0px;
padding-right: 0px;
overflow: hidden;
background-color: #1A1B1F;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.6);
opacity: .95;
width: 742px;
}
ul.tab li {
float: left;
padding: 0px;
}
ul.tab a {
display: block;
color: #E7E8EC;
text-align: center;
font-size: 16px;
padding: 16px 64px;
text-decoration: none;
transition: .3s;
}
.home:hover {
background-color: #0EB323;
}
.about:hover {
background-color: #0EB323;
}
.projects:hover {
background-color: #0EB323;
}
.contact:hover {
background-color: #0EB323;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: rgba(34, 43, 47, .8);
width: 200px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #0EB323}
.dropdown:hover .dropdown-content {
display: block;
}
<!DOCTYPE HTML>
<html>
<title> Website </title>
<head>
<link rel = "stylesheet" href = "CSScode.css">
<script src = "JavaScript.js"></script>
<style>
</style>
</head>
<body>
<ul class = "tab">
<li><a class = "home" href = "HomePage.html">Home</a></li>
<li><a class = "about" href = "#about"> About </a></li>
<li class = "dropdown">
<a class = "projects dropbtn"> Projects </a>
<div class = "dropdown-content">
Project 1
Project 2
Project 3
</div>
<li><a class = "contact" href = "ContactPage.html"> Contact </a></li>
</ul>
</body>
</html>
Give flexbox a try.
display: flex on the ul, and flex: 1 on the li:
To align the dropdown menu with the button, relative position the button, 100% width on the dropdown div, and remove overflow hidden from the ul
Also, you don't need to add left and right padding to the a elements because you display them as block.
ul.tab {
list-style-type: none;
margin: auto;
font-family: "CopperPlate", Times, serif;
padding-left: 0px;
padding-right: 0px;
/*overflow: hidden;*/
background-color: #1A1B1F;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.6);
opacity: .95;
width: 742px;
display: flex;
}
ul.tab li {
flex: 1;
/*float: left;*/
padding: 0px;
}
ul.tab a {
display: block;
color: #E7E8EC;
text-align: center;
font-size: 16px;
padding: 16px 0;
text-decoration: none;
transition: .3s;
}
.home:hover {
background-color: #0EB323;
}
.about:hover {
background-color: #0EB323;
}
.projects:hover {
background-color: #0EB323;
}
.contact:hover {
background-color: #0EB323;
}
li.dropdown {
display: inline-block;
position: relative;
}
.dropdown-content {
display: none;
position: absolute;
background-color: rgba(34, 43, 47, .8);
width: 100%;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 0;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #0EB323}
.dropdown:hover .dropdown-content {
display: block;
}
<!DOCTYPE HTML>
<html>
<title> Website </title>
<head>
<link rel = "stylesheet" href = "CSScode.css">
<script src = "JavaScript.js"></script>
<style>
</style>
</head>
<body>
<ul class = "tab">
<li><a class = "home" href = "HomePage.html">Home</a></li>
<li><a class = "about" href = "#about"> About </a></li>
<li class = "dropdown">
<a class = "projects dropbtn"> Projects </a>
<div class = "dropdown-content">
Project 1
Project 2
Project 3
</div>
<li><a class = "contact" href = "ContactPage.html"> Contact </a></li>
</ul>
</body>
</html>
You've set the width of your nav bar to 742px. The combined width of all your items (your li's) doesn't add up enough to fill the whole bar.
Try:
ul.tab li {
float: left;
padding: 0px;
width: 25%;
}
4 items at 25% total 100% of the container.
The width of the nav bar is greater than the width of then nav items. Unless you declare a hard width on the items that adds up to the same as the width of the nav bar, you shouldn't use a fixed width.
What I would do is change ul.tab to be display:inline-block; so that it will only take up as much space as needed and will shrink to match the size of it's direct descendents, and add text-align: center; to that element's parent (body in this case) to center the element.
Here's a demo - http://codepen.io/anon/pen/JEdywM
Your li elements all have dynamic widths which are rendered as float values for the pixels and eventually rounded to full pixels. That's where that margin comes from. To prevent that:
In the CSS rule for ul.tab remove the width setting alltogether and add display: inline-block;.
PLUS: Wrap the ul in a container div which has text-align: center:
(view the snippet in full page mode to see the result)
.listcontainer {
text-align: center;
}
ul.tab {
list-style-type: none;
margin: auto;
font-family: "CopperPlate", Times, serif;
padding-left: 0px;
padding-right: 0px;
overflow: hidden;
background-color: #1A1B1F;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.6);
opacity: .95;
display: inline-block;
}
ul.tab li {
float: left;
padding: 0px;
}
ul.tab a {
display: block;
color: #E7E8EC;
text-align: center;
font-size: 16px;
padding: 16px 64px;
text-decoration: none;
transition: .3s;
}
.home:hover {
background-color: #0EB323;
}
.about:hover {
background-color: #0EB323;
}
.projects:hover {
background-color: #0EB323;
}
.contact:hover {
background-color: #0EB323;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: rgba(34, 43, 47, .8);
width: 200px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #0EB323}
.dropdown:hover .dropdown-content {
display: block;
}
<!DOCTYPE HTML>
<html>
<title> Website </title>
<head>
<link rel = "stylesheet" href = "CSScode.css">
<script src = "JavaScript.js"></script>
<style>
</style>
</head>
<body>
<div class="listcontainer">
<ul class = "tab">
<li><a class = "home" href = "HomePage.html">Home</a></li>
<li><a class = "about" href = "#about"> About </a></li>
<li class = "dropdown">
<a class = "projects dropbtn"> Projects </a>
<div class = "dropdown-content">
Project 1
Project 2
Project 3
</div>
<li><a class = "contact" href = "ContactPage.html"> Contact </a></li>
</ul>
</div>
</body>
</html>
Try this, it may help.
*body {
overflow-x :hidden;
}
I try to show a dropdown menu after the user hovers over the link with id galerie. I solved it like this:
$("#gallerie").mouseover
(
function()
{
$("#gallerie_drop").css("display","block");
}
);
$("#gallerie_drop").mouseleave
(
function()
{
$("#gallerie_drop").css("display","none");
}
);
#header {
text-align: right;
padding:20px;
}
#header a {
padding: 20px;
}
#gallerie_drop {
display:none;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: block;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header">
Galerie
Videos
Photos
Foo
Bar
</div>
<div class="dropdown-content" id="gallerie_drop">
Link 1
Link 2
Link 3
</div>
But how can i let the box appear directly under the link?
JSFIDDLE: https://jsfiddle.net/c544es76/2/
If you are creating Menu, please use UL, LI.
Here is demo, with hoverable item. All without JS:
http://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_dropdown_navbar
Need changes.
You HTML Should be like this,
<div class="yourclass">
Galerie
<div class="dropdown-content" id="gallerie_drop">
Link 1
Link 2
Link 3
</div>
</div>
And CSS,
.yourclass{
position: relative;
}
#gallerie_drop{
position: absolute;
top: 10px;
left: 10px;
}
And the script is correct to show/hide the element.
Add position:relative to .gallery_drop
#gallerie_drop {
display:none;
position:relative;
}
and change your mouseover callback to
$("#galerie").mouseover
(
function()
{
$(this).append($('#gallery_drop'));
$("#gallerie_drop").css("display","block");
}
);
This will append the div to your hover link. You have size it appropriately.
Use Like This
Javascript is not needed
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
li.dropdown {
float:right;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<ul>
<li class="dropdown">
Galerie
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
<li><a class="active" href="#Videos">Videos</a></li>
<li> <a href="#photos" >Photos</a></li>
<li> <a href="#Foo" > Foo</a></li>
<li> <a href="#Bar" > Bar </a></li>
</li>
</ul>
</body>
</html>