css navigation sub menu not showing right - css

Question

Hello i have the following live example http://jsfiddle.net/vfubN/4/ where you can see a navigation in action if you check out docs you will see that the submenu isn't working right. Can someone help me out fixing it ? Seems that i can't see the solution even if it's in front of my eyes.
HTML
<header role="banner">
<div class="navbar fixed-top navbar-theme-aizio-background">
<div class="inner-navbar"> Test<sub>name</sub>
<div class="container">
<nav id="menu" class="nav" role="navigation">
<ul class="inactive-responsive" id="inactive-responsive">
<li>
<span><i aria-hidden="true" class="icon-home"></i></span>Home
</li>
<li class="inactive-dropdown" id="dropdownToggle"> <span><i aria-hidden="true" class="icon-signal"></i></span>Docs
<ul class="inactive-dropdown vertical-navigation" id="inactive-dropdown">
<li> <span><i aria-hidden="true" class="icon-code"></i></span>ssss
</li>
<li> <span><i aria-hidden="true" class="icon-qrcode"></i></span>Portfolio
</li>
<li> <span><i aria-hidden="true" class="icon-print"></i></span>Blog
</li>
<li> <span><i aria-hidden="true" class="icon-heart"></i></span>The team
</li>
<li><span><i aria-hidden="true" class="icon-envelope"></span></i>google.ro
</li>
</ul>
</li>
<li><span><i aria-hidden="true" class="icon-cog"></i></span>Portfolio
</li>
<li><span><i aria-hidden="true" class="icon-cloud"></i></span>Blog
</li>
<li><span><i aria-hidden="true" class="icon-heart"></i></span>The team
</li>
<li><span><i aria-hidden="true" class="icon-envelope"></span></i>Contact
</li>
</ul>
</nav>
</div>
</div>
</div>
</header>
CSS
.navbar [class^="icon-"],
[class*=" icon-"] {
display: block;
font-size: 32px;
font-size: 2rem;
vertical-align: middle;
background-repeat: no-repeat;
}
.navbar {
background: #4d4d4d;
width: 100%;
-webkit-box-shadow: 0 0 0.9em #555555;
box-shadow: 0 0 0.9em #555555;
}
.navbar-inner {
width: 100%;
}
/*
Navbar Brand Styles
*/
.inner-navbar .brand {
color: #ffffff;
font-size: 32px;
font-size: 2rem;
line-height: 1.5;
padding-right: 24px;
padding-right: 1.5rem;
display: block;
font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
}
.inner-navbar .brand sub,
sup {
padding-left: 5px;
padding-left: 0.3rem;
font-size: 14px;
font-size: 0.9rem;
}
.inner-navbar .brand:hover {
color: #004b67 /*#383838 */;
text-decoration: none;
}
.inner-navbar nav {
display: block;
font-size: 14px;
font-size: 0.9rem;
font-family: Arial, sans-serif;
z-index: 1000;
}
.inner-navbar nav button#responsiveToggle {
display: none;
}
.inner-navbar nav ul {
padding: 0;
margin: 0 auto;
text-align: center;
}
.inner-navbar nav ul li {
display: block;
float: left;
width: auto;
min-width: 130px;
min-width: 8.1rem;
}
.inner-navbar nav li:first-child a,
li:last-child a {
border-left: 0;
}
.inner-navbar nav ul li a {
display: block;
text-align: center;
text-decoration: none;
line-height: 1.5;
}
.inner-navbar nav a:hover {
color: #004b67;
}
.inactive-dropdown {
display: none;
}
.active-dropdown {
position: absolute;
background-color: #1f2024;
-webkit-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}
.active-dropdown li {
float: left;
clear: both;
line-height: 1.5;
vertical-align: middle;
/* nice blue color background-color: #2aa4cf; */
}
.active-dropdown li a {
display: block;
width: auto;
text-align: left;
line-height: 1.5;
}
.vertical-navigation {
float: none;
}
.vertical-navigation i {
float: left;
line-height: 1.5;
}
/*
Themes
*/
.navbar-theme-blue-marina {
background: #2aa4cf;
}
.navbar-theme-aizio-background,
.active-dropdown li {
background: #004b67;
}
.navbar-theme-aizio-background a {
color: #fff;
}
.navbar-theme-aizio-background ul li a:hover {
color: #b2e558;
}
.navbar-theme-aizio-background .brand:hover {
color: #b2e558;
}
/* ------------------------------ RESPONSIVE STYLES ----------------------------------------------------*/
/*Styles for screen 768px and lower*/
#media screen and (max-width: 768px) {
.active-dropdown {
position: relative;
display: block;
}
.active-dropdown li a {
text-align: center;
}
.inner-navbar nav li {
width: 50%;
float: left;
position: relative;
border-left: 0 solid #666;
}
.inner-navbar nav li a {
border-left: 0;
padding: 10px 0;
background: #383838;
}
.inner-navbar nav li a:hover {
background: #636363;
}
.inner-navbar nav a {
text-align: center;
width: 100%;
}
}
/*Styles for screen 515px and lower*/
#media only screen and (max-width: 480px) {
.inner-navbar nav {
border-bottom: 0;
}
.inner-navbar nav li {
width: 100%;
float: none;
position: relative;
border-left: 0 solid #666;
}
.inner-navbar nav li a {
border-bottom: 1px solid #0c0a0d;
}
.inner-navbar nav button#responsiveToggle {
display: block;
width: 100%;
}
.inner-navbar nav button#responsiveToggle {
zoom: 1;
}
.inner-navbar nav button#responsiveToggle:before {
content: '';
/* 1 */
display: block;
/* 2 */
}
.inner-navbar nav button#responsiveToggle:after {
content: '';
display: table;
clear: both;
}
/* When JavaScript is enabled, we hide the menu */
.js .inner-navbar nav .inactive-responsive {
display: none;
}
/* Displaying the menu when the user has clicked on the button */
.active-responsive a:hover {
font-size: 2em;
opacity: .5;
}
.active-responsive a:hover i {
display: none;
}
.fixed-top {
position: relative;
}
}
/*Smartphone*/
#media only screen and (max-width: 320px) {
.active-dropdown li {
display: block;
float: none;
width: 100%;
}
.inner-navbar nav li {
display: block;
float: none;
width: 100%;
}
.inner-navbar nav li a {
border-bottom: 1px solid #0c0a0d;
}
}
/* RETINA */
/* ------------------------------ RESPONSIVE STYLES ----------------------------------------------------*/
/*Styles for screen 768px and lower*/
#media screen and (max-width: 768px) {
.inner-navbar .brand {
display: none;
}
}
/*Styles for screen 515px and lower*/
/*Smartphone*/
#media only screen and (max-width: 320px) {
.inner-navbar .brand {
display: block;
}
.inner-navbar .pull-left {
float: none;
}
.inner-navbar .pull-right {
float: none;
}
}
/* RETINA */

Answer 1

You have a few problems because styles for the horizontal menu are affecting the vertical one, i made this changes in your CSS:
.inner-navbar nav .vertical-navigation li a{
text-align:left;
}
.vertical-navigation i {
float:none;
line-height: 1.5;
}
.vertical-navigation li [class^="icon-"] {
display: inline-block;
padding: 0 10px;
}
View the demo http://jsfiddle.net/vfubN/13/

Answer 2

I have the same menu and it works. I give you the CSS. You still have more for you to rename.
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Index</title>
<style type="text/css">
#menu, #menu ul {
padding:0;
margin:0;
list-style: none;
}
#menu li {
display:inline-block;
width:150px;
text-align: center;
background: #999;
}
#menu ul {
position:absolute;
left:-999em;
}
#menu li:hover ul {
left:auto;
}
#menu a {
display:block;
}
</style>
</head>
<body>
<ul id="menu">
<li id='accueil'>accueil</li><!--
--><li><a href="" class='catalogue'>CATALOGUE</a></li><!--
--><li><a class='fonction' href="">FONCTIONNEMENT</a>
<ul>
<li><a href='toto'>toto</a></li><!--
--><li><a href='toto'>tutu</a></li><!--
--><li><a href='toto'>titi</a></li><!--
--><li><a href='toto'>tata</a></li>
</ul>
</li><!--
--><li><a class='service' href="">LES SERVICES</a></li><!--
--><li><a class='commande' href="">COMMANDE</a></li><!--
--><li><a class='contact' href="">CONTACT</a></li>
</ul>
</body>
</html>