CODEWITHSUNDEEP
htmlcssdrop-down-menuhoverdropdown
Jom Nillasca
Jom Nillasca

Reputation: 13

dropdown menu: hover; HTML

I want to achieve a hover dropdown menu but I am kinda having a hard time to input it. I do have my code but base on my research I need to have a CSS which I don't have. Can someone help me?

<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownPortfolio" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="color:#fff;">
                Project
  </a>
    <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownPortfolio">
      <a class="dropdown-item" href="portfolio-1-col.html">Ongoing</a>
      <a class="dropdown-item" href="Completed 1stPage.html">Completed</a>
               
    </div>
 </li>

Is there anything that is lacking on my code?

Upvotes: 1

Views: 1952

Answers (4)

Adhitya
Adhitya

Reputation: 665

UPDATED

I'm updated a code same with question

<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownPortfolio" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="color:#fff;">
                Project
  </a>
    <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownPortfolio">
      <a class="dropdown-item" href="portfolio-1-col.html">Ongoing</a>
      <a class="dropdown-item" href="Completed 1stPage.html">Completed</a>
               
    </div>
 </li>

Then I have example CSS code like this 

li {
list-style:none /* Only for Remove list style */
}
li.dropdown {
    margin: 0;
    padding: 0;
}

li.dropdown {
    float: left;
    position: relative;
    width:auto;
}
li.dropdown a {
    background: #30A6E6;
    color: #FFFFFF;
    display: block;
    font: bold 12px/20px sans-serif;
    padding: 10px 25px;
    text-align: center;
    text-decoration: none;
    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
    -ms-transition: all .25s ease;
    -o-transition: all .25s ease;
    transition: all .25s ease;
}
li.dropdown:hover a {
    background: #000000;
}

.dropdown-menu {
    left: 0;
    opacity: 0;
    position: absolute;
    top: 35px;
    visibility: hidden;
    z-index: 1;
}
li:hover .dropdown-menu {
    opacity: 1;
    top: 40px;  /* adjust this as per top nav padding top & bottom comes */
    visibility: visible;
}
.dropdown-menu a {
    float: none;
    width: 100%;
}
.dropdown-menu a:hover {
    background: #DF4B05;
}
.dropdown-menu a {
    background-color:#000000;
}
<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownPortfolio" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="color:#fff;">
                Project
  </a>
    <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownPortfolio">
      <a class="dropdown-item" href="portfolio-1-col.html">Ongoing</a>
      <a class="dropdown-item" href="Completed 1stPage.html">Completed</a>
               
    </div>
 </li>

Pure CSS for hover dropdown

.dropdownmenu ul, .dropdownmenu li {
    margin: 0;
    padding: 0;
}
.dropdownmenu ul {
    background: gray;
    list-style: none;
    width: 100%;
}
.dropdownmenu li {
    float: left;
    position: relative;
    width:auto;
}
.dropdownmenu a {
    background: #30A6E6;
    color: #FFFFFF;
    display: block;
    font: bold 12px/20px sans-serif;
    padding: 10px 25px;
    text-align: center;
    text-decoration: none;
    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
    -ms-transition: all .25s ease;
    -o-transition: all .25s ease;
    transition: all .25s ease;
}
.dropdownmenu li:hover a {
    background: #000000;
}
#submenu {
    left: 0;
    opacity: 0;
    position: absolute;
    top: 35px;
    visibility: hidden;
    z-index: 1;
}
li:hover ul#submenu {
    opacity: 1;
    top: 40px;  /* adjust this as per top nav padding top & bottom comes */
    visibility: visible;
}
#submenu li {
    float: none;
    width: 100%;
}
#submenu a:hover {
    background: #DF4B05;
}
#submenu a {
    background-color:#000000;
}
<header>
<nav class="dropdownmenu">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Who Are We</a>
      <ul id="submenu">
        <li><a href="">Difference</a></li>
        <li><a href="">New features</a></li>
        <li><a href="">Creatinge</a></li>
      </ul>
    </li>
    <li><a href="#">What Do We Do</a>
    <ul id="submenu">
        <li><a href="">Difference</a></li>
        <li><a href="">New features</a></li>
        <li><a href="">Creatinge</a></li>
      </ul></li>
    <li><a href="#">Indicators</a>
    <ul id="submenu">
        <li><a href="">Difference</a></li>
        <li><a href="">New features</a></li>
        <li><a href="">Creatinge</a></li>
      </ul></li>
  </ul>
</nav>
</header>

Upvotes: 2

Mehdi Alikhani
Mehdi Alikhani

Reputation: 141

You missed some css styles.

.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  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;
}

.dropdown-content a {
  color: black;
  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;}
<div class="dropdown">
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

Upvotes: 0

Ken Lee
Ken Lee

Reputation: 8043

I think you have missed the css codes. You may try this simple , but good dropdown:

/* Dropdown Button */


.dropbtn0 {

    border: none;
    cursor: pointer;
    font-size: 18px;
    font-weight: bold;
    padding-bottom: 8px;
    background-color: #00a650;
    color: #FFFFFF;
    outline: 0;
}



.dropbtn1 {
    border: none;
    cursor: pointer;
    font-size: 18px;
    font-weight: bold;
    padding-bottom: 9px;
    outline: 0;
}


/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
}



/* Dropdown Content (Hidden by Default) */
.dropdown-content1 {
    top: 28px;
    display: none;
    position: absolute;
    left: 0px;
    background-color: #04516c;
    min-width: 250px;
    box-shadow: 0px 8px 15px 0px rgba(0, 0, 0, 0.2);
    z-index: 2000;
    opacity: 0.95;
    filter: alpha(opacity=95);

}

/* Links inside the dropdown */
.dropdown-content1 a {

    color: #FFFFFF;
    padding: 12px 15px;
    text-decoration: none;
    display: block;
    text-align: left;
    font-size: 18px;
}



/* Change color of dropdown links on hover */
.dropdown-content1 a:hover {
    background-color: #2285a8;
    color: #FFFFFF;
}


/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content1 {
    display: block;
}


/* Change the background color of the dropdown button when the dropdown content is shown */

.dropdown:hover .dropbtn1 {
    color: #AAAAAA;
}
<body>
<table border=1 cellpadding=2 cellspacing=0 style="max-width:100%;margin: 0 auto;align-self: center;" align="center">

    <tr>
        <td align=center style="text-align:center;font-size:16px;font-weight:bold;color:#000000;">
            <div class="dropdown" style="text-align:center;font-size:18px;font-weight:bold;color:#000000;">
                <span class="dropbtn1" style="padding:8px;font-size:18px;">
                    Registration Scheme
                </span>

                <div class="dropdown-content1">
                    <a href="textdisplay.php?serial=66">
                        Apply
                    </a>

                    <a href="textdisplay.php?serial=56">
                        Registration Requirements
                    </a>

                    <a href="textdisplay.php?serial=61">
                        Registration Process
                    </a>
                    </a>
                </div>
            </div>



        <td>
            <div class="dropdown" style="text-align:center;font-size:18px;font-weight:bold;color:#000000;">
                <span class="dropbtn1" style="padding:8px;font-size:18px;">
                    Contact Us
                </span>
                <div class="dropdown-content1">
                    <a href="textdisplay.php?serial=66">
                        By Email
                    </a>

                    <a href="textdisplay.php?serial=56">
                        Our Office
                    </a>
                    </a>
                </div>
            </div>
</table>
</body>

Upvotes: 0

Karthik
Karthik

Reputation: 111

It seems you are using Bootstrap 3 dropdown menus. Just add Bootstrap 3 CSS file and Bootstrap 3 JS file. Add this on your HTML

CSS in HEAD Tag

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

JS before the Body Tag Ends

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

Upvotes: 0

Related Questions