Как добавить еще одно подменю для моей таблицы?

Question

У меня была проблема. Я просто загрузил этот код с htmldrive.net. Я использую его для своего школьного проекта, и я хотел бы добавить еще одно подменю, когда слово «наука» зависнет. Благодарю.

HTML/PHP

   <ul id="nav"> 
        <li><a href="home.php">Home</a></li> 
        <li><a class="hsubs" href="questions.php">Questions</a> 
         <ul class="subs"> 
          <li><a href="">Science</a></li> 
             <ul class="subss"> 
             <li><a href="">Science</a></li> 
             </ul> 
          <li><a href="">English</a></li> 
          <li><a href="">Math</a></li> 

         </ul> 
        </li> 
         <li><a class="hsubs" href="facilities1.php">Facilities</a> 
         <ul class="subs"> 
          <li><a href="#">Submenu 2-1</a></li> 
          <li><a href="#">Submenu 2-2</a></li> 
          <li><a href="#">Submenu 2-3</a></li> 
          <li><a href="#">Submenu 2-4</a></li> 
          <li><a href="#">Submenu 2-5</a></li> 
          <li><a href="#">Submenu 2-6</a></li> 
          <li><a href="#">Submenu 2-7</a></li> 
          <li><a href="#">Submenu 2-8</a></li> 
         </ul> 
        </li> 
        <li><a class="hsubs" href="#">Events</a> 
         <ul class="subs"> 
          <li><a href="#">Submenu 3-1</a></li> 
          <li><a href="#">Submenu 3-2</a></li> 
          <li><a href="#">Submenu 3-3</a></li> 
          <li><a href="#">Submenu 3-4</a></li> 
          <li><a href="#">Submenu 3-5</a></li> 
         </ul> 
        </li> 
        <li><a href="#">About Us</a></li> 

        <li><a href="#">    
    <?php 
    $member=$_SESSION['member']; 
    $result=mysql_query("select * from account where member='$member'")or die(mysql_error); 
    $row=mysql_fetch_array($result); 
    $FirstName=$row['name']; 
    $Age=$row['surname']; 
    echo " Welcome ".$FirstName; 
    ?> 
    </a></li> 
        <li><a href="logout.php?id=$member \">Logout</a></li> 
        <div id="lavalamp"></div> 
       </ul> 

CSS

#nav,#nav ul { 
     list-style: none outside none; 
     margin: 0px 0px 0px 0px; 
     padding: 0; 
    } 
    #nav { 
     background: url('aa.jpg') no-repeat scroll 0 0 transparent; 
     clear: both; 
     font-size: 12px; 
     height: 58px; 
     padding: 0 0 0 9px; 
     position: relative; 
     width: 1200px; 
    } 
    #nav ul { 
     background-color: #222; 
     border:1px solid #222; 
     border-radius: 0 5px 5px 5px; 
     border-width: 0 1px 1px; 
     box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5); 
     left: -9999px; 
     overflow: hidden; 
     position: absolute; 
     top: -9999px; 
     z-index: 2; 

     -moz-transform: scaleY(0); 
     -ms-transform: scaleY(0); 
     -o-transform: scaleY(0); 
     -webkit-transform: scaleY(0); 
     transform: scaleY(0); 

     -moz-transform-origin: 0 0; 
     -ms-transform-origin: 0 0; 
     -o-transform-origin: 0 0; 
     -webkit-transform-origin: 0 0; 
     transform-origin: 0 0; 

     -moz-transition: -moz-transform 0.1s linear; 
     -ms-transition: -ms-transform 0.1s linear; 
     -o-transition: -o-transform 0.1s linear; 
     -webkit-transition: -webkit-transform 0.1s linear; 
     transition: transform 0.1s linear; 
    } 
    #nav li { 
     background: url('menu_line.png') no-repeat scroll right 5px transparent; 
     float: left; 
     position: relative; 
    } 
    #nav li a { 
     color: #FFFFFF; 
     display: block; 
     float: left; 
     font-weight: normal; 
     height: 30px; 
     padding: 23px 20px 0; 
     position: relative; 
     text-decoration: none; 
     text-shadow: 1px 1px 1px #000000; 
    } 
    #nav li:hover > a { 
     color: #00B4FF; 
    } 
    #nav li:hover, #nav a:focus, #nav a:hover, #nav a:active { 
     background: none repeat scroll 0 0 #121212; 
     outline: 0 none; 
    } 
    #nav li:hover ul.subs { 
     left: 0; 
     top: 53px; 
     width: 180px; 

     -moz-transform: scaleY(1); 
     -ms-transform: scaleY(1); 
     -o-transform: scaleY(1); 
     -webkit-transform: scaleY(1); 
     transform: scaleY(1); 
    } 
    #nav ul li { 
     background: none; 
     width: 100%; 
    } 
    #nav ul li a { 
     float: none; 
    } 
    #nav ul li:hover > a { 
     background-color: #121212; 
     color: #00B4FF; 
    } 

    #lavalamp { 
     background: url('lavalamp.png') no-repeat scroll 0 0 transparent; 
     height: 16px; 
     left: 13px; 
     position: absolute; 
     top: 0px; 
     width: 64px; 

     -moz-transition: all 300ms ease; 
     -ms-transition: all 300ms ease; 
     -o-transition: all 300ms ease; 
     -webkit-transition: all 300ms ease; 
     transition: all 300ms ease; 
    } 
    #lavalamp:hover { 
     -moz-transition-duration: 3000s; 
     -ms-transition-duration: 3000s; 
     -o-transition-duration: 3000s; 
     -webkit-transition-duration: 3000s; 
     transition-duration: 3000s; 
    } 
    #nav li:nth-child(1):hover ~ #lavalamp { 
     left: 13px; 
    } 
    #nav li:nth-child(2):hover ~ #lavalamp { 
     left: 88px; 
    } 
    #nav li:nth-child(3):hover ~ #lavalamp { 
     left: 170px; 
    } 
    #nav li:nth-child(4):hover ~ #lavalamp { 
     left: 250px; 
    } 
    #nav li:nth-child(5):hover ~ #lavalamp { 
     left: 335px; 
    } 
    #nav li:nth-child(6):hover ~ #lavalamp { 
     left: 445px; 
    } 
    #nav li:nth-child(7):hover ~ #lavalamp { 
     left: 550px; 
    } 
    #nav li:nth-child(8):hover ~ #lavalamp {`enter code here` 
     left: 565px; 
    } 

Answer 1

Я это FIDDLE то, что вы ищете?

Я немного сократил ваш HTML-код - вы можете развернуть его только по тем же шаблонам.

HTML

<nav> 
<ul> 
    <li><a href="#">Home</a></li> 
    <li><a href='#'>Questions</a> 
     <ul> 
     <li><a href="#">Science</a> 
      <ul> 
       <li><a href="">Physics</a></li> 
       <li><a href="">Chemistry</a></li> 
       <li><a href="">Physiology</a></li> 
      </ul> 
      </li> 
     <li><a href="">English</a></li> 
     <li><a href="">Math</a></li> 
     </ul> 
     </li> 
    <li><a href="#">Facilities</a> 
      <ul> 
       <li><a href="#">Submenu 2-1</a></li> 
      </ul> 
      </li> 
</ul> 
<nav> 

CSS-в скрипке, так что я не должен оставлять его здесь -Совершено долго.

Одна точки обучения является то, что вы действительно можете сделать большинство выпадающим с чистым CSS - не нужны классы, идентификаторы и т.д.