how to add drop-down menu? - html

Question

I have horizontal menu bar, and I trying to add sub menu for one of item, but I am not able to add it, Its appending to my main menu, please someone help me to where i missing
thanks
HTML
<div id="talltabs-maroon">
<ul>
<li class="first">Home <span>Page</span></li>
<li class="active"><span>About us</span></li>
<li class="dropdown"><a class="dropbtn" href="#"> <span> Report </span></a>
<ul class="dropdown-content" style="left:0">
<li>
<a href="">
<p>Valve Report</p>
</a>
</li>
<li>
<a href="">
<p>Cylinder Report</p>
</a>
</li>
</ul>
</li>
<li class="last">Contact <span>Us</span></li>
</ul>
</div>
CSS for Main menu
#talltabs-maroon {
clear: left;
float: left;
padding: 0;
border-top: 3px solid #CD324F;
width: 100%;
overflow: hidden;
font-family: Georgia, serif;
height: 90px;
position: inherit;
}
#talltabs-maroon ul {
float: left;
margin: 0;
padding: 0;
list-style: none;
position: relative;
left: 50%;
text-align: center;
}
#talltabs-maroon ul li {
display: block;
float: left;
list-style: none;
margin: 0;
padding: 0;
position: relative;
right: 50%;
}
#talltabs-maroon ul li a {
display: block;
float: left;
margin: 0 3px 0 0;
padding: 0px 10px 6px 10px;
background: #CD324F;
text-decoration: none;
color: #fff;
}
#talltabs-maroon ul li a p:hover {
color: aqua;
}
#talltabs-maroon ul li a:hover {
padding: 20px 10px 6px 10px;
color: black
}
#talltabs-maroon ul li.active a,
#talltabs-maroon ul li.active a:hover {
padding: 25px 10px 6px 10px;
border-width: 5px;
border-color: aqua;
color: aqua;
}
CSS for drop down menu i tried.
.dropbtn {
list-style-type: none;
color: white;
padding: 14px;
font-size: 14px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: block;
}
.dropdown-content {
list-style-type: none;
display: none;
position: absolute;
right: 0;
/*background-color: black;*/
background-image: url('../../Images/black-olive.jpg'); /*dropdowm popup*/
min-width: 160px;
box-shadow: 0px 8px 16px 5px rgba(0,0,0,0.2);
z-index: 1;
padding-right: 2px;
margin-right: 2px;
}
.dropdown-content a {
color: white;
padding: 10px 14px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
/*background-color: gray;*/
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
/*background-color: #3e8e41;*/
}
pleas help me.
thanks
tink.

Answer 1

Here is my answer for same example, I changed complete css,
body {
font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
ul {
text-align: left;
display: inline;
margin: 0;
padding: 15px 4px 17px 0;
list-style: none;
}
ul li {
display: inline-block;
margin-right: -1px;
position: relative;
padding: 15px 20px;
background: #CD324F;
cursor: pointer;
color: black;
height: 40px;
width: auto;
text-align:center;
}
ul li a{
color:black;
}
ul li:hover {
background: #CD324F;
color: #fff;
height: 45px;
}
ul li a:hover {
color: #fff;
}
ul li ul {
padding: 0;
position: absolute;
top: 68px;
left: 0;
width: 160px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
}
ul li ul li {
background: #ce5068;
display: block;
color: #CD324F;
height: 35px;
}
ul li ul li:hover {
background: #CD324F;
height: 35px;
}
ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
<div style="height: 77px; width:100%; margin-top:65px;text-align:center; border-top:solid; border-top-color:#CD324F">
<ul><li>Home</li>
<li>About</li>
<li>
Portfolio
<ul>
<li>Web Design</li>
<li>Web Development</li>
<li>Illustrations</li>
</ul>
</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
Result: on hover portfolio, drop down will appear
Working example on JSFiddle.

Answer 2

I really recommend to look at bootstrap's drop down menu. It is easy to use and most things are already done for you. good luck
Here is the link: https://www.w3schools.com/bootstrap/bootstrap_dropdowns.asp

Answer 3

your code is bit confusing , i have created a simple demo for you how to do it.
here is my HTML code
body {
background: #212121;
font-size:22px;
line-height: 32px;
color: #ffffff;
word-wrap:break-word !important;
font-family: 'Open Sans', sans-serif;
}
h1 {
font-size: 60px;
text-align: center;
color: #FFF;
}
h3 {
font-size: 30px;
text-align: center;
color: #FFF;
}
h3 a {
color: #FFF;
}
a {
color: #FFF;
}
h1 {
margin-top: 100px;
text-align:center;
font-size:60px;
font-family: 'Bree Serif', 'serif';
}
#container {
margin: 0 auto;
}
p {
text-align: center;
}
nav {
margin: 50px 0;
background-color: #E64A19;
}
nav ul {
padding: 0;
margin: 0;
list-style: none;
position: relative;
}
nav ul li {
display:inline-block;
background-color: #E64A19;
}
nav a {
display:block;
padding:0 10px;
color:#FFF;
font-size:20px;
line-height: 60px;
text-decoration:none;
}
nav a:hover {
background-color: #000000;
}
/* Hide Dropdowns by Default */
nav ul ul {
display: none;
position: absolute;
top: 60px; /* the height of the main nav */
}
/* Display Dropdowns on Hover */
nav ul li:hover > ul {
display:inherit;
}
/* Fisrt Tier Dropdown */
nav ul ul li {
width:170px;
float:none;
display:list-item;
position: relative;
}
<div id="container">
<nav>
<ul>
<li>Home</li>
<li>WordPress
<!-- First Tier Drop Down -->
<ul>
<li>Themes</li>
<li>Plugins</li>
<li>Tutorials</li>
</ul>
</li>
<li>Web Design
<!-- First Tier Drop Down -->
<ul>
<li>Resources</li>
<li>Links</li>
<li>Tutorials
</ul>
</nav>
</div>