Html css中的子菜单

我正在处理一些css菜单，我试图添加一个子菜单，然后再添加另一个子菜单：

Html:

Js:

由于某些原因，它不让我得到李显示，即使我有一切，我试图显示子菜单和新的主菜单。我试着从另一个网站上获得正确的课程，但我不明白为什么它不起作用

PS我已修复了子菜单，但需要修复子菜单“新建”

---

谢谢

删除“显示：无；”属性表单子菜单ul。

我在“新建”菜单中添加了背景色，以便您可以看到位置

#菜单容器{
边框：#中交1px实心；
颜色：#333333；
字体大小：粗体；
高度：35px；
宽度：自动；
浮动：左；
边际上限：0px；
}
菜单{
字体大小：1.1米；
填充：0；
保证金：0；
边界：无；
位置：相对位置；
浮动：对；
z指数：10；
宽度：自动；
}
ul#菜单li{
显示：内联块；
列表样式：无；
位置：相对位置；
宽度：140px；
文本对齐：居中；
边界：无；
左边框：1px实心#中交；
高度：35px；
}
菜单李。首先{
左边框：0！重要；
}
菜单a{
保证金：5px20px 5px29px；
填充：0；
字体大小：粗体；
文字装饰：无；
线高：2.6em；
颜色：#0090d4；
}
菜单李a：悬停{
颜色：#005a8b；
文字装饰：无；
}
菜单a：激活{
颜色：#cd0a0a；
}
ul#菜单li.选择了一个{
背景色：#ffffff；
颜色：#000000；
}
ul#菜单ul.子菜单{
边缘顶部：15px；
右：0px；
左：0px；
位置：绝对位置；
背景色：红色；
边框：#中交1px实心；
填充：0；
宽度：142px；
显示：无；
}
ul#菜单li：悬停ul.子菜单{
显示：块；
}
ul#菜单ul.子菜单li{
显示：块！重要；
宽度：140px；
填充：0；
保证金：0；
边界：没有！重要；
}
ul#菜单ul.子菜单li：悬停{
背景色：#eeeeee；
}
ul#菜单ul.子菜单li a{
填充：5px！重要；
边距：0！重要；
文本对齐：左！重要；
}
ul#菜单ul.子菜单li:悬停ul.导航设备搜索{
显示：块；
}
ul#菜单ul.子菜单ul.导航设备搜索{
宽度：130px；
高度：50px；
左侧填充：5px；
右侧填充：5px；
文本对齐：左对齐；
利润顶部：-20px！重要；
显示：无；
}
ul#菜单ul.子菜单li ul.导航设备搜索li{
字体大小：粗体；
显示：块；
宽度：128px；
颜色：#中交；
字体：斜体；
顶部：0px；
垂直对齐：顶部；
背景颜色：浅绿色；
左：139px！重要；
位置：相对位置；
}
ul#菜单ul.子菜单li ul.导航设备搜索li:悬停{
背景色：橙色；}

主1

子菜单
子菜单


主要2

子菜单
子菜单
子菜单
子菜单


主要3

子菜单
子菜单
子菜单
子菜单


主要4

子菜单
子菜单
子菜单
子菜单
子菜单

新的
新的

请在您的问题中包含所有相关代码，而不仅仅是链接到JSFIDLE。抱歉，我认为它太长了，但我现在添加了它，但它将所有代码显示为一个块。我主要关心的是悬停时的子菜单。我明白了，然后让它保持“display:none；”不变，然后在子菜单ul css之后写一个新的css，比如：ul#menu li:hover ul。子菜单{display:block；}，我认为它应该可以工作。是的，可以工作，但现在我只需要子菜单“new”的css我已经更新了JSFIDDLE，上面的修复方法是在子菜单中添加一个z索引，以便您可以在其中进行选择：@Gavin.Paolucci.Kleinow yeh，这很好，但是我如何让子菜单“New”起作用，目前还没有类，因为我不确定它将有多少ul或li，谢谢，它正在工作，但是当我在电脑上做这件事的时候，我有时会意识到鼠标悬停不能一直工作，当我把鼠标悬停在菜单上时，它不能打开新的子菜单，90%可以，但10%我又把菜单悬停了，你知道为什么会这样吗？

   <div id="menucontainer" class="ui-corner-all ui-widget-header">
<ul id="menu">
    <li class="first">main 1
        <ul class="subMenu">
            <li>menu2</li>
            <li>menu3</li>
        </ul>
    </li>

    <li>link6
        <ul class="subMenu">
            <li>mdfdfenu</li>
            <li>mendfu</li>
            <li>mendfdu</li>
            <li>mendfu</li>
        </ul>
    </li>
    <li>link7
        <ul class="subMenu">
            <li>medfnu</li>
            <li>menudf</li>
            <li>mzxcenu</li>
            <li>medfnu</li>
        </ul>
    </li>
    <li>link8
        <ul class="subMenu">
            <li>menu</li>
            <li>xzcmenu</li>
            <li>menu</li>
            <li>menu</li>
            <li>menu

<ul> 
   <li>NEW</li>
    <li>NEW</li>
 </ul>

</li>
        </ul>
    </li>
</ul>

   #menucontainer {
border: #cccccc 1px solid;
color: #333333;
font-weight: bold;
height: 35px;
width: auto;
float: left;
margin-top: 0px;
}
ul#menu {
font-size: 1.1em;
padding: 0;
margin: 0;
border: none;
position: relative;
float: right;
z-index: 10;
width: auto;
}
ul#menu li {
display: inline-block;
list-style: none;
position: relative;
width: 140px;
text-align: center;
border: none;
border-left: 1px solid #cccccc;
height: 35px;
}
ul#menu li .first {
border-left: 0 !important;
}
ul#menu li a {
margin: 5px 20px 5px 29px;
padding: 0;
font-weight: bold;
text-decoration: none;
line-height: 2.6em;
color: #0090d4;
 }
 ul#menu li a:hover {
color: #005a8b;
text-decoration: none;
 }
ul#menu li a:active {
color: #cd0a0a;
 }
 ul#menu li .selected a {
background-color: #ffffff;
color: #000000;
}
ul#menu ul.subMenu {
right: 0px;
left: 0px;
position: absolute;
background-color: red;
border: #cccccc 1px solid;
margin: -5px 0px 0px 0px;
padding: 0;
width: 142px;
display: none;
}
 ul#menu ul.subMenu li {
display: block !important;
width: 140px;
padding: 0;
margin: 0;
border: none !important;
}
  ul#menu ul.subMenu li:hover {
background-color: #eeeeee;
}
ul#menu ul.subMenu li a {
padding: 5px !important;
margin: 0 !important;
text-align: left !important;
 }
ul#menu ul.subMenu li#navDeviceSearch {
width: 130px;
height: 50px;
padding-left: 5px;
padding-right: 5px;
text-align: left;
}
ul#menu ul.subMenu li#navDeviceSearch label {
font-weight: bold;
display: block;
}
ul#menu ul.subMenu li#navDeviceSearch input {
width: 128px;
color: #cccccc;
font-style: italic;
 }