Question

我有一个只显示两级菜单的现有CSS。我想添加第三级但我没有想法。可以soeone请协助我我需要添加到CSS。以下是当前的代码。

#topnav{
    display:block;
    float:left;
    //width:660px;
    margin:0;
    padding:0;
    list-style:none;
    font-size:10px;//was 13
    font-weight:normal;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    color:#FFFFFF;
    background-color:#000000;
}

#topnav ul, #topnav li{
    float:left;
    list-style:none;
    margin:0;
    padding:0;
}

#topnav li a:link, #topnav li a:visited, #topnav li a:hover{
    display:block;
    margin:0;
    padding:15px 20px;
    color:#FFFFFF;
    background-color:#000000;
}

#topnav ul ul li a:link, #topnav ul ul li a:visited{
    border:none;
}

#topnav li.last a{
    margin-right:0;
}

#topnav li a:hover, #topnav ul li.active a{
    color:#FFFFFF;
    background-color:#059BD8;
}

#topnav li li a:link, #topnav li li a:visited{
    //width:150px;
    float:none;
    margin:0;
    padding:7px 10px;
    font-size:12px;
    font-weight:normal; 
    color:#FFFFFF;
    background-color:#000000;
}

#topnav li li a:hover{
    color:#FFFFFF;
    background-color:#059BD8;
}

#topnav li ul{
    background:#FFFFFF;
    z-index:9999;
    position:absolute;
    left:-999em;
    height:auto;
    width:170px;
    border-left:1px solid #FFFFFF;
    border-bottom:1px solid #FFFFFF;
}

#topnav li ul a{width:140px;}

#topnav li ul ul{margin:-32px 0 0 0;}

#topnav li:hover ul ul{left:-999em;}

#topnav li:hover ul, #topnav li li:hover ul{left:auto;}

#topnav li:hover{position:static;}

#topnav li.last a{margin-right:0;}

这是HTML

<div id="topnav">
    <ul>
        <li <?php if($menu== 0) { echo  "class='active'"; } ?>>
            <a href="index.php">Home</a>
        </li>
        <li class="last">
            <a href="#">Set Up</a>
        <li class="last">
            <a href="#">EMR</a>
        <ul>
            <li class="last" >
                <a href="#">Out-Patient</a>
            </li>
            <ul>
                <li>
                    <a href="#">Registration</a>
                </li>
                <li>
                    <a href="#">File Edition</a>
                </li>
            </ul>
        <li><a href="InpatientAdmission.php">In-Patient</a></li>
    </ul>
</div>

门诊下的两个子菜单（注册和文件版）未显示。

感谢。

Answer 1

您需要正确关闭一些元素，并且解决方案的CSS也是：

#topnav li li:hover ul {left: 160px; margin-top: -3em;}

关闭并更正HTML：

<div id="topnav">
  <ul>
    <li><a href="index.php">Home</a></li>
    <li class="last"><a href="#">Set Up</a></li>
    <li class="last"><a href="#">EMR</a>
      <ul>
        <li class="last" ><a href="#">Out-Patient</a>
          <ul>
            <li><a href="#">Registration</a></li>
            <li><a href="#">File Edition</a></li>
          </ul>
        </li>
        <li><a href="InpatientAdmission.php">In-Patient</a></li>
      </ul>
    </li>
  </ul>
</div>

工作代码段

#topnav{
  display:block;
  float:left;
  margin:0;
  padding:0;
  list-style:none;
  font-size:10px;//was 13
  font-weight:normal;
  font-family:Verdana, Arial, Helvetica, sans-serif;
  color:#FFFFFF;
  background-color:#000000;
}
#topnav ul, #topnav li{
  float:left;
  list-style:none;
  margin:0;
  padding:0;
}
#topnav li a:link, #topnav li a:visited, #topnav li a:hover{
  display:block;
  margin:0;
  padding:15px 20px;
  color:#FFFFFF;
  background-color:#000000;
}



#topnav ul ul li a:link, #topnav ul ul li a:visited{
  border:none;
}

#topnav li.last a{
  margin-right:0;
}

#topnav li a:hover, #topnav ul li.active a{
  color:#FFFFFF;
  background-color:#059BD8;
}

#topnav li li a:link, #topnav li li a:visited{
  //width:150px;
  float:none;
  margin:0;
  padding:7px 10px;
  font-size:12px;
  font-weight:normal; 
  color:#FFFFFF;
  background-color:#000000;
}

#topnav li li a:hover{
  color:#FFFFFF;
  background-color:#059BD8;
}

#topnav li ul{
  background:#FFFFFF;
  z-index:9999;
  position:absolute;
  left:-999em;
  height:auto;
  width:170px;
  border-left:1px solid #FFFFFF;
  border-bottom:1px solid #FFFFFF;
}



#topnav li ul a{width:140px;}

#topnav li ul ul {margin:-32px 0 0 0;}

#topnav li:hover ul ul{left:-999em;}

#topnav li:hover ul, #topnav li li:hover ul{left:auto;}

#topnav li:hover{position:static;}

#topnav li.last a{margin-right:0;}

#topnav li li:hover ul {left: 160px; margin-top: -3em;}

<div id="topnav">
  <ul>
    <li><a href="index.php">Home</a></li>
    <li class="last"><a href="#">Set Up</a></li>
    <li class="last"><a href="#">EMR</a>
      <ul>
        <li class="last" ><a href="#">Out-Patient</a>
          <ul>
            <li><a href="#">Registration</a></li>
            <li><a href="#">File Edition</a></li>
          </ul>
        </li>
        <li><a href="InpatientAdmission.php">In-Patient</a></li>
      </ul>
    </li>
  </ul>
</div>

Answer 2

请将您的第三级菜单放在父li中，这会生成层级顺序或菜单级别

 <li class="last" ><a href="#">Out-Patient</a>
   <ul>
     <li><a href="#">Registration</a></li>
     <li><a href="#">File Edition</a>
     </li>
   </ul>
 <li>

如何在我的CSS下拉菜单中添加第三级

2 个答案: