Bootstrap breaking mutli-level menu - html

Question

I made this menu before i just started using bootstrap. The menu is generated from the database. The HTML output is shown below.
<ul id="nav">
<li value="1">Home</li>
<li value="2">
Portfolio
<ul class='Subs'>
<li value="5">Web Design</li>
<li value="6">Graphic Design</li>
<li value="7">Logo Design</li>
<li value="8">Blog Design</li>
</ul>
</li>
<li value="3">
Projects
<ul class='Subs'>
<li value="9">Project1</li>
<li value="10">Project2</li>
<li value="11">Project3</li>
<li value="12">Project4</li>
</ul>
</li>
<li value="4">
Contact
<ul class='Subs'>
<li value="13">Support</li>
<li value="14">Quote</li>
<li value="15">General Inquiry</li>
</ul>
</li>
<li value="16">kaas</li>
</ul>
Here is the CSS i use
#nav span {
display: none;
}
#nav, #nav ul {
list-style: none outside none;
margin: 0;
padding: 0;
z-index: 99;
}
#nav {
color-stop(0, #E3E3E3),
color-stop(0.5, white)
background-image: -o-linear-gradient(bottom, #E3E3E3 0%, white 100%);
background-image: -moz-linear-gradient(bottom, #E3E3E3 0%, white 100%);
background-image: -webkit-linear-gradient(bottom, #E3E3E3 0%, white 100%);
background-image: -ms-linear-gradient(bottom, #E3E3E3 0%, white 100%);
background-image: linear-gradient(to bottom, #E3E3E3 0%, white 100%);
border-bottom: 5px solid #333333;
float: left;
margin-left: 1%;
margin-right: 1%;
position: relative;
width: 98%;
}
#nav ul.subs {
color-stop(0, #E3E3E3),
color-stop(0.5, white)
background-color: -o-linear-gradient(bottom, white 0%, #E3E3E3 100%);
background-image: -moz-linear-gradient(bottom, white 0%, #E3E3E3 100%);
background-image: -webkit-linear-gradient(bottom, white 0%, #E3E3E3 100%);
background-image: -ms-linear-gradient(bottom, white 0%, #E3E3E3 100%);
background-image: linear-gradient(to bottom, white 0%, #E3E3E3 100%);
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
color: #333333;
display: none;
left: 0;
padding: 2%;
position: absolute;
top: 54px;
width: 96%;
}
#nav > li {
border-bottom: 5px solid transparent;
float: left;
margin-bottom: -5px;
text-align: left;
-moz-transition: all 300ms ease-in-out 0s;
-ms-transition: all 300ms ease-in-out 0s;
-o-transition: all 300ms ease-in-out 0s;
-webkit-transition: all 300ms ease-in-out 0s;
transition: all 300ms ease-in-out 0s;
}
#nav li{
display: block;
text-decoration: none;
-moz-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
-ms-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
-o-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
-webkit-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
white-space: normal;
}
#nav > li{
color: #333333;
display: block;
font-size: 1.3em;
line-height: 49px;
padding: 0 15px;
text-transform: uppercase;
}
#nav > li:hover, #nav :hover {
background-color: #F55856;
color: #FFFFFF;
cursor: pointer;
}
#nav li.active > li{
background-color: #333333;
color: #FFFFFF;
}
#nav li:hover ul.subs {
display: block;
}
#nav ul.subs > li {
display: inline-block;
float: none;
padding: 10px 1%;
vertical-align: top;
width: 33%;
}
#nav ul.subs > li{
color: #777777;
line-height: 20px;
}
#nav ul.subs > li{
font-size: 1.3em;
margin-bottom: 10px;
text-transform: uppercase;
}
#nav ul.subs > li{
float: none;
padding-left: 8px;
font-size: 0.8em;
margin: 0px;
padding: 5px;
-moz-transition: padding 150ms ease-out 0s;
-ms-transition: padding 150ms ease-out 0s;
-o-transition: padding 150ms ease-out 0s;
-webkit-transition: padding 150ms ease-out 0s;
transition: padding 150ms ease-out 0s;
}
#nav ul.subs > li li:hover {
padding-left: 15px;
}
#nav ul.subs > li:hover{
color: red;
cursor: pointer;
}
Without bootstrap it looks fabulous, so could anybody explain to me how this is happening and this can be fixed?
Thanks in advance

Answer 1

You put an uppercase letter at the beginning of the class Subs when it should actually be subs, which, if you check your CSS is a correct match.
DEMO JSFiddle