Bootstrap破坏了多层菜单

Question

在我刚开始使用bootstrap之前我做了这个菜单。菜单是从数据库生成的。 HTML输出如下所示。

<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>

这是我使用的CSS

#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;
}

没有bootstrap它看起来很棒，所以任何人都可以向我解释这是如何发生的，这可以解决吗？

提前致谢

Answer 1

你在课程Subs的开头加上一个大写字母，它实际应该是subs，如果你检查你的CSS是正确匹配的话。

<强> DEMO JSFiddle