Horizontal css menu with vertical sub/drop down menu. Help please

Please help to find the solution. What I'm trying to do is a horizontal css menu with vertical dropdown submenu. Currently it's showing a horizontal submenu, being new, I'm struck. Please help

Fiddle : http://jsfiddle.net/o0v9xzsv/5/

<html>
<head>
<style>

body, div, p, h1, h2, h3, h4, h5, span { margin: 0; padding:0; }

div.spheader { width:100%; background: #999; height:31px;}
.spheader ul.spmenu {

    border-right: 1px solid #333;

    margin: 0 12px;
    position: relative;
    width: auto;
}
ul.spmenu {
    list-style: none;
    position: relative;
    display: inline-table;
}

.spheader ul.spmenu li {
    display: inline;
    font-size: 13px;
    list-style: none outside none;
    margin: 0;
    padding: 0;
}

ul.spmenu li {
    height: 31px;
    text-transform: uppercase;
}

ul.spmenu li a{
    background-image: none;
    border-left: 1px solid #333;
    border-right: 1px solid #555;
    height: 31px;
display: block;
}

ul.spmenu  li a {
    text-decoration:none;
    color: #FFFFFF;
    display: inline;
    float: left;
    font-weight: bold;
    line-height: 30px;
    position: relative;
    padding: 0 10px;
    font-family: Arial,Helvetica,"Arial Unicode MS",sans-serif;
}


.spheader ul ul {
    display: none;
}

.spheader ul li:hover > ul {
        display: block;
    }

.spheader ul:after {
        content: ""; clear: both; display: block;
    }


.spheader ul ul {
    background: #DDD;  padding: 0;
    position: absolute; top: 100%;
}
.spheader ul ul li {
        float: none; 
        border-top: 1px solid #6b727c;
        border-bottom: 1px solid #575f6a;
        position: relative;
    }
.spheader ul ul li a {
            padding: 0px 12px;
            color: #fff;
            position: relative;
            display: block;
        }   
.spheader ul ul li a:hover {
                background: #ccc;
            }

ul.spmenu  li ul li{
    clear:both;
    border-style:none;}

</style>
<head>
</body>
<br/><br/><br/>
<div class="spheader" style="width:100%;">

<ul class="spmenu">
<li><a href="">Home</a></li>
<li><a href="">WITH SUBMENU</a>
<ul>
<li><a href="">SUB ONE</a></li>
<li><a href="">SUB TWO</a></li>
<li><a href="">SUB THREE</a></li>
</ul>
</li>

<li><a href="">SECOND SUB</a>
<ul>
<li><a href="">Cricket</a></li>
<li><a href="">Football</a></li>
<li><a href="">Tennis</a></li>
</ul>
</li>



<li><a href="">Vehicle</a>
<ul>
<li><a href="">Car</a></li>
<li><a href="">Bike</a></li>
<li><a href="">Bus</a></li>
</ul>
</li>

</ul>
</body>
</html>

Solution

I think this is pretty much what you want:

Fiddle

Basically, I've replaced the LI's to be inline-block and relative so the UL's underneath will position correctly.. and the LI's inside the sub-menu get displayed BLOCK.

css

.spheader ul.spmenu li {
    display: inline-block;
    height: 31px;
    font-size: 13px;
    list-style:none;
    position:relative;
    text-transform: uppercase;
    margin: 0;
    padding: 0;
}
.spheader ul li ul > li {
    display:block !important;
    float: none; 
    border-top: 1px solid #6b727c;
    border-bottom: 1px solid #575f6a;
    position: relative;
    width:100%;
}

if you have any questions feel free.. good luck!