Question

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

HTML：

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

的CSS：

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

Js：https://jsfiddle.net/zxrd10Lh/1/

由于某种原因，它不让我得到李显示，即使我有一切，我试图从主菜单显示SubMenu和NEW。我尝试从其他网站获得正确的课程，但我不明白为什么它不起作用。

PS我修复了子菜单，但需要修复子子菜单＆＃34; new＆＃34;

由于

Answer 1

我在＆＃39; New＆＃39;中添加了背景颜色。菜单，所以你可以看到正确的

＆＃13;

#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 {
  margin-top: 15px;
  right: 0px;
  left: 0px;
  position: absolute;
  background-color: red;
  border: #cccccc 1px solid;
  padding: 0;
  width: 142px;
  display: none;
}
ul#menu li:hover ul.subMenu {
  display: block;
}
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:hover ul.navDeviceSearch {
  display: block;
}
ul#menu ul.subMenu ul.navDeviceSearch {
  width: 130px;
  height: 50px;
  padding-left: 5px;
  padding-right: 5px;
  text-align: left;
  margin-top: -20px!important;
  display: none;
}
ul#menu ul.subMenu li ul.navDeviceSearch li {
  font-weight: bold;
  display: block;
  width: 128px;
  color: #cccccc;
  font-style: italic;
  top: 0px;
  vertical-align: top;
  background-color: lightgreen;
  left: 139px!important;
  position: relative;
}

ul#menu ul.subMenu li ul.navDeviceSearch li:hover {
    background-color:orange;}

＆＃13;

<div id="menucontainer" class="ui-corner-all ui-widget-header">
  <ul id="menu">
    <li class="first">main 1
      <ul class="subMenu">
        <li>SubMenu</li>
        <li>SubMenu</li>
      </ul>
    </li>
    <li>main 2
      <ul class="subMenu">
        <li>SubMenu</li>
        <li>SubMenu</li>
        <li>SubMenu</li>
        <li>SubMenu</li>
      </ul>
    </li>
    <li>main 3
      <ul class="subMenu">
        <li>SubMenu</li>
        <li>SubMenu</li>
        <li>SubMenu</li>
        <li>SubMenu</li>
      </ul>
    </li>
    <li>main 4
      <ul class="subMenu">
        <li>SubMenu</li>
        <li>SubMenu</li>
        <li>SubMenu</li>
        <li>SubMenu</li>
        <li>SubMenu
          <ul class="navDeviceSearch">
            <li>NEW</li>
            <li>NEW</li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

＆＃13;

Answer 2

删除＆＃34;显示：无;＆＃34;属性子菜单ul。

css中的子菜单

2 个答案: