Строка меню не работает правильно

Question

Я пытаюсь создать панель меню с выпадающим меню в HTML и CSS, но мой код не даст мне результаты, которые я хочу, и я не знаю, почему. Я считаю, что меню должно быть ul ul, с дисплеем: block; при наведении курсора, но текст ul ul не отображается и находится в строке.

<nav id = "top_menu"> 

    <ul> 
     <li><a href="index.php">Home</a></li> 
     <li>Our Chapter</a></li> 
      <ul> 
       <li><a href = "ExecutiveBoard.php"</a></li> 
       <li><a href = "ourBrothers.php"</a></li> 
       <li><a href = "chapterHistory.html"</a></li> 
      <ul> 
     <li>Nationals</li> 
     <li>We Give Back</li> 
     <li>Recruitment</li> 
     <li>Contact Us</li> 
     <li>Donate</li> 
    </ul> 
</nav> 

CSS

#top_menu { 
     background: #007FFF; 
     opacity: 0.6; 
     text-align: center; 
    } 

    #top_menu li{ 
     display:inline-block; 
     list-style: none; 
     padding: 10px; 
     color: white; 
    } 

    #top_menu li:hover { 
     background: yellow; 
     opacity: 0.6; 
    } 
    nav ul ul { 
     display: none; 
    } 

    nav ul li:hover > ul { 
     display: block; 
    } 

Спасибо!

Answer 1

Это My Example. это правило с n уровнем. Вы должны посмотреть. если у вас есть какие-то проблемы, вы должны связаться со мной. Благодаря

HTML:

<div id="ewm_header"> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-md-12"> 
       <header id="ewm_header1"> 
        <div class="logo"> 
         <a href="http://cssmenufree.com" title="logo"> 
          <img src="http://cssmenufree.com/img/logo.png" alt="logo" data-retina="http://cssmenufree.com/img/logo@2x.png" width="131" height="21"> 
         </a> 
        </div> 
        <div class="menu-nav right"> 
         <nav class="mainnav" id="mainnav"> 
          <ul class="menu-wrap anima-bottom"> 
           <li class="children"> 
            <a href="#">HOME</a> 
            <ul class="sub-menu" style="margin-left: 0px;"> 
             <li class="children"> 
              <a href="#">HOME VERSION 1</a> 
              <ul class="sub-menu"> 
               <li class=""><a href="#">HOME DARK</a></li> 
               <li class=""><a href="#">HOME LIGHT</a></li> 
              </ul> 
             </li> 
             <li class=""><a href="#">HOME VERSION 2</a></li> 
             <li class=""><a href="#">HOME VERSION 3</a></li> 
            </ul> 
           </li> 
           <li class="children"> 
            <a href="#">ABOUT</a> 
            <ul class="sub-menu" style="margin-left: 0px;"> 
             <li class=""><a href="#">ABOUT VERSION 1</a></li> 
             <li class=""><a href="#">ABOUT VERSION 2</a></li> 
            </ul> 
           </li> 
           <li class=""><a href="#">PORTFOLIO</a></li> 
           <li class=""><a href="#">BLOG</a></li> 
           <li class=""><a href="#">SERVICES</a></li> 
           <li class=""><a href="#">CONTACT</a></li> 
          </ul> 
         </nav> 
        </div> 
       </header> 
      </div> 
     </div> 
    </div> 
</div> 
<span>You can copy code css. It run with menu in wordpress</span> 

CSS:

.menu-wrap > li { 
    float: left; 
    position: relative; 
    padding: 5px 15px; 
} 

.menu-wrap li ul { 
    position: absolute; 
    visibility: hidden; 
    top: 100%; 
    left: 0; 
    background: #011d27; 
    z-index: 999; 
    width: 200px; 
} 

.menu-wrap li:hover > ul, 
.menu-wrap li ul li:hover ul { 
    visibility: visible; 
} 

.menu-wrap li ul li { 
    padding: 10px 5px; 
} 

.menu-wrap li ul li ul { 
    left: 100%; 
    top: 0; 
}