Exercise 9 and 8: Iframe and Dropdown menus

Iframe and drop down menu

Number 1 Number 2 Number 3

Topic 1 Topic 2 Topic 3

2021 2020 2019

<meta name="viewport" content="width=device-width, initial-scale=1">

<style type="text/css">.dropbtn {

  background-color: Black;

  color: white;

  padding: 16px;

  font-size: 16px;

  border: none;

}

.dropdown {

  position: relative;

  display: inline-block;

}

.dropdown-content {

  display: none;

  position: absolute;

  background-color: Purple;

  min-width: 160px;

  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

  z-index: 1;

}

.dropdown-content a {

  color: White;

  padding: 12px 16px;

  text-decoration: none;

  display: block;

}

.dropdown-content a:hover {background-color: #ddd;}

.dropdown:hover .dropdown-content {display: block;}

.dropdown:hover .dropbtn {background-color: #3e8e41;}

</style>

<h2>Iframe and drop down menu</h2>

<div class="dropdown"><button class="dropbtn">Links</button>

<div class="dropdown-content"><a href="#">Number 1</a> <a href="#">Number 2</a> <a href="#">Number 3</a></div>

</div>

<div class="dropdown"><button class="dropbtn">Topics</button>

<div class="dropdown-content"><a href="#">Topic 1</a> <a href="#">Topic 2</a> <a href="#">Topic 3</a></div>

</div>

<div class="dropdown"><button class="dropbtn">Blogs</button>

<div class="dropdown-content"><a href="#">2021</a> <a href="#">2020</a> <a href="#">2019</a></div>

</div>

<p><iframe height="480" src="https://panlasangpinoy.com/" title="Panlasang Pinoy" width="720"></iframe></p>

<meta name="viewport" content="width=device-width, initial-scale=1">

<style type="text/css">.dropbtn {

  background-color: Black;

  color: white;

  padding: 16px;

  font-size: 16px;

  border: none;

}

.dropdown {

  position: relative;

  display: inline-block;

}

.dropdown-content {

  display: none;

  position: absolute;

  background-color: Purple;

  min-width: 160px;

  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

  z-index: 1;

}

.dropdown-content a {

  color: White;

  padding: 12px 16px;

  text-decoration: none;

  display: block;

}

.dropdown-content a:hover {background-color: #ddd;}

.dropdown:hover .dropdown-content {display: block;}

.dropdown:hover .dropbtn {background-color: #3e8e41;}

</style>

<h2>Iframe and drop down menu</h2>

<div class="dropdown"><button class="dropbtn">Links</button>

<div class="dropdown-content"><a href="#">Number 1</a> <a href="#">Number 2</a> <a href="#">Number 3</a></div>

</div>

<div class="dropdown"><button class="dropbtn">Topics</button>

<div class="dropdown-content"><a href="#">Topic 1</a> <a href="#">Topic 2</a> <a href="#">Topic 3</a></div>

</div>

<div class="dropdown"><button class="dropbtn">Blogs</button>

<div class="dropdown-content"><a href="#">2021</a> <a href="#">2020</a> <a href="#">2019</a></div>

</div>

<p><iframe height="480" src="https://panlasangpinoy.com/" title="Panlasang Pinoy" width="720"></iframe></p>