jesselau76 · October 24, 2018 20:29
diff --git a/input-dropdown.html b/input-dropdown.html
 <!DOCTYPE html>
 <html>
 <head>
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 <style>
 body {
    font-family: Arial;
 }

 * {
    box-sizing: border-box;
 }
 @media (min-width: 1025px) {
 #main-header form.pg{
 float:left;
 	left:350px;
 	width:38%;
    height:20px;
    bottom:80px;
    position: relative;
    }
    }
    @media only screen and ( max-width: 1024px ) {
     width:85%;
 	
 	margin-left:10px;
    }
    

 #main-header form.pg input[type=text] {
    padding: 10px;
    font-size: 17px;
    border: 1px solid grey;
    float: left;
    width: 80%;
    background: #f1f1f1;
    -webkit-border-radius: 9px 0 0 9px;
 }

 #main-header form.pg button {
    float: left;
    width: 20%;
    padding: 10px;
    background: #2196F3;
    color: white;
    font-size: 17px;
    border: 1px solid grey;
    border-left: none;
    cursor: pointer;
    -webkit-border-radius: 0 9px 9px 0;
 }

 #main-header form.pg button:hover {
    background: #0b7dda;
 }

 #main-header form.pg::after {
    content: "";
    clear: both;
    display: table;
 }


 #main-header .dropdown {
    position: absolute;
    
    background-color: #f1f1f1;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    overflow: auto;
   
    display: none;
    z-index: 1;
    background: white;
    /*position the autocomplete items to be the same width as the container:*/
  top: 40px;
  left: 0;
  width:80%;
  pointer-events: auto;
 }
 #main-header .dropdown a {
    color: black;
    padding: 12px 40px;
    text-decoration: none;
    display: block;
    pointer-events: all;
    
 }

 #main-header .dropdown a:hover{color: red;}
 #main-header .holder {
    position: relative;
   
 }

 #main-header .dropdown ol {
  
  counter-reset: my-awesome-counter;
  list-style: none;
  
 }
 #main-header .dropdown ol li {

  margin: 0 0 0.5rem 0;
  counter-increment: my-awesome-counter;
  position: relative;
 display: block!important;
 }
 #main-header .dropdown ol li::before {
  content: counter(my-awesome-counter);
  color: #fcd000;
  font-size: 1rem;
  font-weight: bold;
  position: absolute;
    left: 0;
  line-height: 32px;
  width: 32px;
  height: 32px;
  top: 0;
  
  background: black;
  border-radius: 50%;
  text-align: center;
  box-shadow: 1px 1px 0 #999;
 }

 </style>
 </head>
 <body>

 <h2>Search Button</h2>
 <div id="main-header">
 <form autocomplete="off"  role="search" class="pg" method="get" action="https://jesselau.com/" >
                            <div class="holder">
 			<input id="displaydrop" type="text" placeholder="Find eBooks, Tutorials, Courses And More..."  name="s" onfocus="displayhotsearch(this)" />
            <div id="myDropdown" class="dropdown">
    <p>
    Hot Searches:
    </p>
   
      <ol>
  
  <li><a href="/search/lose+fat" >Lose Fat</a></li>
  <li><a href="/search/red+tea">Red Tea</a></li>
  <li><a href="/search/good+sleeping">Good Sleeping</a></li>
  <li><a href="/search/make+money+at+home">Make Money at Home</a></li>
  <li><a href="/search/dog+trainning">dog trainning</a></li>
  <li><a href="/search/learn+spanish">Learn Spanish</a></li>
  <li><a href="/search/women+men">Women And Men</a></li>
  <li><a href="/search/iphone+x+tutorial">iPhone X tutorial</a></li>
 		  <li><a href="/search/The+2+Week+Diet">The 2 Week Diet</a></li>
  <li><a href="/search/Lean+Belly+Breakthrough">Lean Belly Breakthrough</a></li>
  </oi>
  </div>
              
 			<button type="submit" ><i class="fa fa-search"></i></button>
 		</form>		
        
 			</div>
 </div>

 <script>

 function displayhotsearch() {
    document.getElementById("myDropdown").style.display = "block";
 }


 document.getElementById("displaydrop").addEventListener("keypress",  function(event) {


     document.getElementById("myDropdown").style.display = "none";
 });


 // Detect all clicks on the document
 document.addEventListener("click", function(event) {

 // If user clicks inside the element, do nothing
 if (event.target.closest(".holder")) return;

 // If user clicks outside the element, hide it!
     document.getElementById("myDropdown").style.display = "none";
 });

 </script>

 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
	<style>
	body {
	font-family: Arial;
	}

	* {
	box-sizing: border-box;
	}
	@media (min-width: 1025px) {
	#main-header form.pg{
	float:left;
	left:350px;
	width:38%;
	height:20px;
	bottom:80px;
	position: relative;
	}
	}
	@media only screen and ( max-width: 1024px ) {
	width:85%;

	margin-left:10px;
	}


	#main-header form.pg input[type=text] {
	padding: 10px;
	font-size: 17px;
	border: 1px solid grey;
	float: left;
	width: 80%;
	background: #f1f1f1;
	-webkit-border-radius: 9px 0 0 9px;
	}

	#main-header form.pg button {
	float: left;
	width: 20%;
	padding: 10px;
	background: #2196F3;
	color: white;
	font-size: 17px;
	border: 1px solid grey;
	border-left: none;
	cursor: pointer;
	-webkit-border-radius: 0 9px 9px 0;
	}

	#main-header form.pg button:hover {
	background: #0b7dda;
	}

	#main-header form.pg::after {
	content: "";
	clear: both;
	display: table;
	}


	#main-header .dropdown {
	position: absolute;

	background-color: #f1f1f1;
	min-width: 160px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	overflow: auto;

	display: none;
	z-index: 1;
	background: white;
	/position the autocomplete items to be the same width as the container:/
	top: 40px;
	left: 0;
	width:80%;
	pointer-events: auto;
	}
	#main-header .dropdown a {
	color: black;
	padding: 12px 40px;
	text-decoration: none;
	display: block;
	pointer-events: all;

	}

	#main-header .dropdown a:hover{color: red;}
	#main-header .holder {
	position: relative;

	}

	#main-header .dropdown ol {

	counter-reset: my-awesome-counter;
	list-style: none;

	}
	#main-header .dropdown ol li {

	margin: 0 0 0.5rem 0;
	counter-increment: my-awesome-counter;
	position: relative;
	display: block!important;
	}
	#main-header .dropdown ol li::before {
	content: counter(my-awesome-counter);
	color: #fcd000;
	font-size: 1rem;
	font-weight: bold;
	position: absolute;
	left: 0;
	line-height: 32px;
	width: 32px;
	height: 32px;
	top: 0;

	background: black;
	border-radius: 50%;
	text-align: center;
	box-shadow: 1px 1px 0 #999;
	}

	</style>
	</head>
	<body>

	<h2>Search Button</h2>
	<div id="main-header">
	<form autocomplete="off" role="search" class="pg" method="get" action="https://jesselau.com/" >
	<div class="holder">
	<input id="displaydrop" type="text" placeholder="Find eBooks, Tutorials, Courses And More..." name="s" onfocus="displayhotsearch(this)" />
	<div id="myDropdown" class="dropdown">
	<p>
	Hot Searches:
	</p>

	<ol>

	<li><a href="/search/lose+fat" >Lose Fat</a></li>
	<li><a href="/search/red+tea">Red Tea</a></li>
	<li><a href="/search/good+sleeping">Good Sleeping</a></li>
	<li><a href="/search/make+money+at+home">Make Money at Home</a></li>
	<li><a href="/search/dog+trainning">dog trainning</a></li>
	<li><a href="/search/learn+spanish">Learn Spanish</a></li>
	<li><a href="/search/women+men">Women And Men</a></li>
	<li><a href="/search/iphone+x+tutorial">iPhone X tutorial</a></li>
	<li><a href="/search/The+2+Week+Diet">The 2 Week Diet</a></li>
	<li><a href="/search/Lean+Belly+Breakthrough">Lean Belly Breakthrough</a></li>
	</oi>
	</div>

	<button type="submit" ><i class="fa fa-search"></i></button>
	</form>

	</div>
	</div>

	<script>

	function displayhotsearch() {
	document.getElementById("myDropdown").style.display = "block";
	}


	document.getElementById("displaydrop").addEventListener("keypress", function(event) {


	document.getElementById("myDropdown").style.display = "none";
	});


	// Detect all clicks on the document
	document.addEventListener("click", function(event) {

	// If user clicks inside the element, do nothing
	if (event.target.closest(".holder")) return;

	// If user clicks outside the element, hide it!
	document.getElementById("myDropdown").style.display = "none";
	});

	</script>

	</body>
	</html>