CSS菜单的第三级无法正常显示

Question

我正在处理三级菜单。它适用于两个级别，但是当我添加第三个级别并将鼠标悬停在级别1上时，它会显示级别2和3.如何才能使它在级别2上的lis被展开时仅显示第三级别？

我的HTML：

<div id="menuContainer"> 
<div id="menuwrapper"> 
    <ul> 
     <li><a href="#">One 1</a> 
      <ul> 
       <li><a href="#">Two 1</a></li> 
       <li><a href="#">Two 2</a></li> 
      </ul> 
     </li> 
     <li><a href="#">One 2</a> 
      <ul> 
       <li><a href="#">Two 3</a></li> 
       <li><a href="#">Two 4</a></li> 
      </ul> 
     </li> 
     <li><a href="admin.php">One 3</a> 
      <ul>      
       <li> 
        <a href="#">Two 5</font></a> 
        <ul> 
         <li><a href="#"><font size="2">Three 1</font></a></li> 
         <li><a href="#"><font size="2">Three 2</font></a></li>       

        </ul> 
       </li> 
       <li> 
        <a href="#"><font size="2">Two 6</font></a> 
        <ul > 
         <li><a href="#"><font size="2">Three 3</font></a></li> 
         <li><a href="#"><font size="2">Three 4</font></a></li> 
        </ul> 
       </li> 
      </ul> 
     </li> 
    </ul>  
</div> 
</div> 

我的CSS：

/*MENU CSS */ 
#menuwrapper { 
    width:100%; 
    z-index:2000; 
} 
/* for adding arrows to the menu items with sub menus YET TO IMPLEMENT*/ 
#menuwrapper li > a:after { 
    content: ' '; 
} 
#menuwrapper li > a:only-child:after { 
    content: ''; 
} 

/* We remove the margin, padding, and list style of UL and LI components */ 
#menuwrapper ul, #menuwrapper ul li, #menuwrapper ul li ul li{ 
    margin:0; 
    padding:0; 
    list-style:none; 
} 

/* We apply background color and border bottom white and width to 150px */ 
#menuwrapper ul li{ 
    background-color:#2d6aff; 
    border-top:solid 1px black; 
    width:100%; 
    cursor:pointer; 
} 

/* We apply the background hover color when user hover the mouse over of the li component */ 
#menuwrapper ul li:hover{ 
    background-color:#15357F; 
    position:relative; 

} 

/* We apply the link style */ 
#menuwrapper ul li a{ 
    padding:5px 15px; 
    color:#ffffff; 
    display:inline-block; 
    text-decoration:none; 
} 

/**** SECOND LEVEL MENU ****/ 
/* We make the position to absolute for flyout menu and hidden the ul until the user hover the parent li item */ 
#menuwrapper ul li ul{ 
    position:absolute; 
    display:none; 

} 

/* When user has hovered the li item, we show the ul list by applying display:block, note: 150px is the individual menu width. */ 
#menuwrapper ul li:hover ul{ 
    left:100%; 
    min-width:283px; 
    top:0px; 
    display:block; 
} 

/* we apply different background color to 2nd level menu items*/ 
#menuwrapper ul li ul li{ 
    background-color:#EEEEEE; 
    border-left: 1px solid #999999; 
    width:100%; 
} 

/* We change the background color for the level 2 submenu when hovering the menu */ 
#menuwrapper ul li:hover ul li:hover{ 
    background-color:#4cff00; 
} 

/* We style the color of level 2 links */ 
#menuwrapper ul li ul li a{ 
    color:#000000; 
    display:inline-block; 
    width:100%; 
    width: auto; 
} 
/**** THIRD LEVEL MENU ****/ 
/* We make the position to absolute for flyout menu and hidden the ul until the user hover the parent li item */ 
#menuwrapper ul li ul li ul{ 
    position:absolute; 
    display:none; 

} 

/* When user has hovered the li item, we show the ul list by applying display:block, note: 150px is the individual menu width. */ 
#menuwrapper ul li:hover ul li:hover > ul { 

    min-width:283px; 
    top:0px; 
    display:block; 
} 

/* we apply different background color to 3rd level menu items*/ 
#menuwrapper ul li ul li ul { 
    background-color:#EEEEEE; 
    border-left: 1px solid #999999; 
    width:100%; 
} 


/* We style the color of level 3 links */ 
#menuwrapper ul li ul li ul li a{ 
    color:#000000; 
    display:inline-block; 
    width:100%; 
    width: auto; 
} 

Answer 1

我想你想要这样的：See this fiddle

我加到底CSS的两行与家长选择打：

#menuwrapper > ul > li:hover > ul { display: block; left: 0; } 
#menuwrapper > ul > li:hover > ul ul { display: none; }