Jump to content

Dropdown menu.


oZorNick
 Share

Recommended Posts

Here is one very similar that works as you want.  Compare codes for inspiration.

	<!DOCTYPE html><html lang="en"><head><title> Horizontal Drop-down Menu </title>
<meta charset="UTF-8">
<meta name="viewport" content="width-device-width,initial-scale=1.0, user-scalable=yes"/>
	<!-- Modified from: https://www.w3schools.com/css/tryit.asp?filename=trycss_dropdown_navbar
  also: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_dropdown_navbar_click
-->
<style>
 ul {
   width: 800px;
   list-style-type: none;
   margin: 0 auto;
   padding: 0;
   overflow: hidden;
   background-color: wheat;
 }
 li { float: left; }
 li a,
 .dropbtn {
   display: inline-block;
   color: black;
   text-align: center;
   padding: 14px 16px;
   text-decoration: none;
 }
 li a:hover,
 .dropdown:hover .dropbtn { background-color: lime; }
 li.dropdown { display: inline-block; }
 .dropdown-content {
   display: none;
   position: absolute;
   background-color: wheat;
   min-width: 160px;
   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
   z-index: 1;
 }
 .dropdown-content a {
   color: black;
   padding: 12px 16px;
   text-decoration: none;
   display: block;
   text-align: left;
 }
 .dropdown-content a:hover {background-color: lime;}
 .dropdown:hover .dropdown-content { display: block; }
	 .toRight { float: right; }
</style>
</head>
<body>
	<ul>
  <li class="dropdown">
    <a href="javascript:void(0)" class="dropbtn">Home</a>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </li>
  <li><a href="#news">News</a></li>
	  <li class="dropdown">
    <a href="javascript:void(0)" class="dropbtn">Dropdown 1</a>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </li>
	  <li class="dropdown">
    <a href="javascript:void(0)" class="dropbtn">Dropdown 2</a>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </li>
	  <li class="dropdown">
    <a href="javascript:void(0)" class="dropbtn">Dropdown 3</a>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </li>
  <li class="dropdown toRight">
      <a href="#" class="right">Enter</a>
  </li>
</ul>
	<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>
	</body>
</html>

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...