1

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?

Improve this question

4 Answers 4

Reset to default
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>

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

5 Comments

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?
yeah right. i just need to hover my specific dropdown menu. cause i have already a working nav bar but i cant achieve hover
@JomNillasca Okay, I'm just updated same with your question. Check it
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
i need to click the project menu first before the hover thing works
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>
Improve this answer

1 Comment

i tried adding it but by navigation bar changes
0

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>

Improve this answer

1 Comment

thanks for the answer but I need my code to be edited. Got no time using other codes...
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>

Improve this answer

1 Comment

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

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.