Как добавить выпадающее меню?

---

Привет,
У меня есть ниже горизонтальное меню, и мне нужно добавить выпадающий список для пункта меню отчета.
пожалуйста, помогите мне, как это сделать. Спасибо.

<div id="talltabs-maroon">
	<ul>
		<li class="first"><a href="#">Home <span>Page</span></a></li>
		<li class="active"><a href="#"><span>About us</span></a></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"><a href="#">Contact <span>Us</span></a></li>
	</ul>
</div>

css для горизонтального меню

#talltabs-maroon {
    clear:left;
    float:left;
    padding:0;
    border-top:6px solid #CD324F;
    width:100%;
    overflow:hidden;
    font-family:Georgia, serif;
}
#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 1px 0 0;
    padding:30px 10px 6px 10px;
    background:#CD324F;
    text-decoration:none;
    color:#fff;
}
#talltabs-maroon ul li a:hover {
    padding:35px 10px 6px 10px;
}
#talltabs-maroon ul li.active a,
#talltabs-maroon ul li.active a:hover {
    padding:40px 10px 6px 10px;
}

Что я уже пробовал:

.dropbtn {
    list-style-type: none;
    color: white;
    font-size: 14px;
    border: none;
    cursor: pointer;
}

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

.dropdown-content {
    list-style-type: none;
    display: none;
    position: relative;
    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: 0;
    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;*/
}

---