Как свернуть раскрывающееся меню в раскрывающемся меню?

Question

Я заново запускаю my blog и в идеале хотел бы внести изменения в навигацию блога.

У меня уже есть парящая панель навигации с тремя вкладками, а две из этих вкладок имеют варианты выпадающего списка. Вкладка «Blankesque», расположенная в левом углу экрана, является такой вкладкой. Я хотел бы добавить еще одно раскрывающееся меню в этом выпадающем меню.

Это текущая кодировка, которая отображает параметры выпадающие на вкладке «Blankesque»:

<ul> 
    <li><a href='#'>Blankesque</a> 
     <ul> 
      <li><a href='http://www.blankesque.com'>Home</a></li> 
      <li><a href='http://www.blankesque.com/p/about-blankesque-blog.html'>About</a></li> 
      <li><a href='http://www.blankesque.com/p/disclaimer-policy_13.html'>Policies</a></li> 
     </ul> 
    </li> 

Это основное выпадающее меню, которое появляется при нажатии или наведении указателя мыши на название вкладки «Blankesque» , Однако я бы хотел, чтобы там было другое меню выпадающего меню под названием «Социальный», в котором затем было бы собственное раскрывающееся меню с моими соответствующими ссылками в социальных сетях. Тем не менее, я пробовал использовать следующую кодировку, но она не работает, хотя я использую аналогичные принципы.

<ul> 
    <li><a href='#'>Blankesque</a> 
     <ul> 
      <li><a href='http://www.blankesque.com'>Home</a></li> 
      <li><a href='http://www.blankesque.com/p/about-blankesque-blog.html'>About</a></li> 
      <li><a href='http://www.blankesque.com/p/disclaimer-policy_13.html'>Policies</a></li> 
      <li><a href='#'>Social</a> 
       <ul> 
        <li><a href='http://www.twitter.com/blankesque'>Twitter</a></li> 
        <li><a href='http://www.instagram.com/blankesque'>Instagram</li></a> 
        <li><a href='http://www.pinterest.com/blankesque'>Pinterest</li></a> 
       </ul> 
      </li> 
     </ul> 
    </li> 

Answer 1

Это хорошо работает для меня, надеюсь, что оно решит вашу проблему.

HTML КОД

<div style="float:right; margin-top:-4px; margin-right:350px" id="primary_nav_wrap"> 
<ul style=" border:1px solid #FEB405"> 
    <li style="background:#ffce00;"><a href="#">Select Dropdown<img width="9" height="5" align="absmiddle" alt="" style="margin-left:10px;" src="images/arrow_down.png"></a> 
    <ul> 
     <li><a href="#1">Option 1</a></li> 
     <li><a href="#1">Option 2</a></li> 
     <li><a href="#1">Option 3</a></li> 
     <li><a href="#1">Option 4</a></li>  
    </ul> 
    </li> 
</ul> 
</div> 

CSS КОД

<style> 
    #primary_nav_wrap { 
     margin-top: 15px; 
    } 
    #primary_nav_wrap ul { 
     background: #fcfcfc none repeat scroll 0 0; 
     border: 1px solid #e7e7e7; 
     float: right; 
     list-style: outside none none; 
     margin: 0; 
     padding: 0; 
     position: relative; 
    } 
    #primary_nav_wrap ul a { 
     color: #333; 
     display: block; 
     font-family: "HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif; 
     font-size: 12px; 
     font-weight: 700; 
     line-height: 32px; 
     padding: 0 15px; 
     text-decoration: none; 
    } 
    #primary_nav_wrap ul li { 
     float: left; 
     margin: 0; 
     padding: 0; 
     position: relative; 
    } 
    #primary_nav_wrap ul li.current-menu-item { 
     background: #ddd none repeat scroll 0 0; 
    } 
    #primary_nav_wrap ul li:hover { 
     background: #f6f6f6 none repeat scroll 0 0; 
    } 
    #primary_nav_wrap ul ul { 
     background: #fcfcfc none repeat scroll 0 0; 
     display: none; 
     left: -178px; 
     padding: 0; 
     position: absolute; 
     text-align: left; 
     top: 100%; 
    } 
    #primary_nav_wrap ul ul li { 
     border-bottom: 1px solid #f3f3f3; 
     float: none; 
     font-weight: normal; 
     width: 340px; 
    } 
    #primary_nav_wrap ul ul a { 
     color: #666; 
     font-weight: normal; 
     line-height: 120%; 
     padding: 10px 15px; 
    } 
    #primary_nav_wrap ul ul ul { 
     left: 100%; 
     top: 0; 
    } 
    #primary_nav_wrap ul li:hover > ul { 
     display: block; 
    } 
</style> 

Answer 2

просто добавить класс в главной ул (я добавил 'Главное меню', например), а затем добавить этот CSS :

.main-menu > li > ul, 
.main-menu > li > ul > li > ul, 
.main-menu > li > ul > li > ul > li > ul { 
    display: none; 
} 

.main-menu > li:hover > ul, 
.main-menu > li > ul > li:hover > ul, 
.main-menu > li > ul > li > ul > li:hover > ul { 
    display:block; 
}