CSS Drop-Down Menu issues - html

Question

I'm making a wordpress theme and I have some problems with the menu codification. My menu has sub-menus but they are displaying in the wrong way, And I don't know what to do to make them look like a Drop-Down menu. Here's the link to my site.
Would you mind giving me a CSS code (only) for a really simple dropdown menu? In my website, the menu with sub-categories is 'TV Shows' and the Subcategories are 'Pretty Little Liars', 'Resurrection', and 'Chasing Life'. I need a CSS to make them drop-down from 'Tv Shows'.
This is my CSS Code for the links
#menu {
height:55px;
background-color: #000;
width:100%;
top:0px;
left:0px;
z-index:101;
text-align:center;
text-transform:uppercase;
position:relative;
}
.menulinks {
float:right;
}
#menucontainer {
margin: 0 auto;
width:900px;
font-family: 'Open Sans', sans-serif;
}
#menucontainer a {
color:#fff;
}
#menucontainer a:hover {
color:#fff;
}
#menucontainer ul {
list-style: none;
padding:7px;
color:#A4A4A4;
}
#menucontainer ul a {
color:#848484;
}
#menucontainer li a {
color:#848484;
}
#menucontainer li {
display: inline;
margin-right:3px;
margin-left:3px;
padding:3px;
color:#848484;
}

Answer 1

Try This. fiddle here
ul {
text-align: left;
display: inline;
margin: 0;
padding: 15px 4px 17px 0;
list-style: none;
border: 1px solid;
}
ul li {
display: inline-block;
margin-right: -4px;
position: relative;
padding: 15px 20px;
background: #fff;
cursor: pointer;
}
ul li:hover {
background: #262222;
color: #fff;
}
ul li ul {
padding: 0;
position: absolute;
top: 48px;
left: 0;
width: 150px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
}
ul li ul li {
background: #262222;
display: block;
color: #fff;
text-shadow: 0 -1px 0 #000;
}
ul li ul li:hover {
background: #a1a1a1;
}
ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
<ul>
<li>Home</li>
<li>Menu1</li>
<li>Menu2
<ul>
<li>Sub Menu</li>
<li>Another Sub Menu</li>
<li>And Anthor Sub Menu</li>
</ul>
</li>
<li>Menu3</li>
<li>Menu4</li>
</ul>

Answer 2

The answer is more than just CSS. You have to make sure the HTMl is built to accept both. You have to have a ul tag within a ul tag to cause the secondary drop down.
Here is a codepen link for exactly what your looking for I think:
<h1>Simple Pure CSS Drop Down Menu</h1>
<nav id="primary_nav_wrap">
<ul>
<li class="current-menu-item">Home</li>
<li>Menu 1
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
<li>Sub Menu 4
<ul>
<li>Deep Menu 1
<ul>
<li>Sub Deep 1</li>
<li>Sub Deep 2</li>
<li>Sub Deep 3</li>
<li>Sub Deep 4</li>
</ul>
</li>
<li>Deep Menu 2</li>
</ul>
</li>
<li>Sub Menu 5</li>
</ul>
</li>
<li>Menu 2
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
</ul>
</li>
</ul>
</nav>
Good luck!