dropdown menu: hover; HTML

Question

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?

KENZO · Accepted Answer · 2020-12-01 09:51:49Z

2

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>

edited Dec 1, 2020 at 9:51

answered Dec 1, 2020 at 6:46

KENZO

6651 gold badge6 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

KENZO Over a year ago

But what you need? I'm giving an example, and you write I need to have a CSS which I don't have. So, you need an code same with your code, right?

Jom Nillasca Over a year ago

yeah right. i just need to hover my specific dropdown menu. cause i have already a working nav bar but i cant achieve hover

KENZO Over a year ago

@JomNillasca Okay, I'm just updated same with your question. Check it

Jom Nillasca Over a year ago

thanks so much for this. but it is kinda weird when I add the code you provided the hover thing is not working on my side but in code snippet it is working

Jom Nillasca Over a year ago

i need to click the project menu first before the hover thing works

Karthik · Accepted Answer · 2020-12-01 06:20:59Z

0

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>

answered Dec 1, 2020 at 6:20

Karthik

1216 bronze badges

1 Comment

Jom Nillasca Over a year ago

i tried adding it but by navigation bar changes

Ken Lee · Accepted Answer · 2020-12-01 06:35:32Z

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>

thanks for the answer but I need my code to be edited. Got no time using other codes...

Mehdi Alikhani · Accepted Answer · 2020-12-01 06:54:51Z

0

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>

answered Dec 1, 2020 at 6:54

Mehdi Alikhani

1411 gold badge5 silver badges15 bronze badges

1 Comment

Jom Nillasca Over a year ago

not helpful just copy from quanzhanketang.com/howto/howto_css_dropdown.html

Collectives™ on Stack Overflow

dropdown menu: hover; HTML

4 Answers 4

UPDATED

5 Comments

1 Comment

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

UPDATED

5 Comments

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related