Проблема в подменю живописи

Question

В следующем коде при наведении курсора меню 1 я хочу показать подменю, но он не будет работать. Я применил ниже css. Пожалуйста, измените код, в котором я ошибаюсь.

HTML

<div class="primary_nav_wrap"> 
     <ul> 
      <li class="current-menu-item"><a href="#">Home</a></li> 
      <li> 
       <a href="#">Menu 1</a> 
       <div class="sub_divsavedfun" id="Functions_1-5"> 
        <ul> 
         <li><a href="#">Sub Menu 1</a></li> 
         <li><a href="#">Sub Menu 2</a></li> 
         <li><a href="#">Sub Menu 3</a></li> 
         <li> 
          <a href="#">Sub Menu 4</a> 
          <ul> 
           <li> 
            <a href="#">Deep Menu 1</a> 
            <ul> 
             <li><a href="#">Sub Deep 1</a></li> 
             <li><a href="#">Sub Deep 2</a></li> 
             <li><a href="#">Sub Deep 3</a></li> 
             <li><a href="#">Sub Deep 4</a></li> 
            </ul> 
           </li> 
           <li><a href="#">Deep Menu 2</a></li> 
          </ul> 
         </li> 
         <li><a href="#">Sub Menu 5</a></li> 
        </ul> 
       </div> 
      </li> 
     </ul> 
    </div> 

CSS

<style> 
     .primary_nav_wrap 
{ 
    margin-top:15px 
} 

.primary_nav_wrap ul 
{ 
    list-style:none; 
    position:relative; 
    float:left; 
    margin:0; 
    padding:0 
} 

.primary_nav_wrap ul a 
{ 
    display:block; 
    color:#333; 
    text-decoration:none; 
    font-weight:700; 
    font-size:12px; 
    line-height:32px; 
    padding:0 15px; 
    font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif 
} 

.primary_nav_wrap ul li 
{ 
    position:relative; 
    float:left; 
    margin:0; 
    padding:0 
} 

.primary_nav_wrap ul li.current-menu-item 
{ 
    background:#ddd 
} 

.primary_nav_wrap ul li:hover 
{ 
    background:#f6f6f6 
} 

.primary_nav_wrap ul ul 
{ 
    display:none; 
    position:absolute; 
    top:100%; 
    left:0; 
    background:#fff; 
    padding:0 
} 

.primary_nav_wrap ul ul li 
{ 
    float:none; 
    width:200px 
} 

.primary_nav_wrap ul ul a 
{ 
    line-height:120%; 
    padding:10px 15px 
} 

.primary_nav_wrap ul ul ul 
{ 
    top:0; 
    left:100% 
} 

.primary_nav_wrap ul li:hover > ul 
{ 
    display:block 
} 
    </style> 

Если удалить <div class="sub_divsavedfun" id="Functions_1-5">, то он будет work.But согласно требованию я должен добавить div тег.

Answer 1

Добавить это в CSS, и это работает прекрасно

Вы добавляете DIV до суб ul так, в CSS .primary_nav_wrap ul li:hover > ul не нашел ul. потому что структура HTML-элемента теперь .primary_nav_wrap ul > li > div > ul

.primary_nav_wrap ul li:hover > div > ul 
{ 
    display:block 
} 

Проверить это Demo

Answer 2

добавить этот CSS

.primary_nav_wrap ul li:hover .sub_divsavedfun > ul 
{ 
    display:block 
} 

https://jsfiddle.net/mrob21h7/1/

Answer 3

Вы div прямого потомка li не ul. Так что заменить следующий код:

.primary_nav_wrap ul li:hover > ul { 
    display: block 
} 

к:

.primary_nav_wrap ul li:hover div > ul, .primary_nav_wrap ul li:hover > ul { 
    display: block 
} 

Рабочая Snippet:

.primary_nav_wrap { 
 
    margin-top: 15px 
 
} 
 
.primary_nav_wrap ul { 
 
    list-style: none; 
 
    position: relative; 
 
    float: left; 
 
    margin: 0; 
 
    padding: 0 
 
} 
 
.primary_nav_wrap ul a { 
 
    display: block; 
 
    color: #333; 
 
    text-decoration: none; 
 
    font-weight: 700; 
 
    font-size: 12px; 
 
    line-height: 32px; 
 
    padding: 0 15px; 
 
    font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif 
 
} 
 
.primary_nav_wrap ul li { 
 
    position: relative; 
 
    float: left; 
 
    margin: 0; 
 
    padding: 0 
 
} 
 
.primary_nav_wrap ul li.current-menu-item { 
 
    background: #ddd 
 
} 
 
.primary_nav_wrap ul li:hover { 
 
    background: #f6f6f6 
 
} 
 
.primary_nav_wrap ul ul { 
 
    display: none; 
 
    position: absolute; 
 
    top: 100%; 
 
    left: 0; 
 
    background: #fff; 
 
    padding: 0 
 
} 
 
.primary_nav_wrap ul ul li { 
 
    float: none; 
 
    width: 200px 
 
} 
 
.primary_nav_wrap ul ul a { 
 
    line-height: 120%; 
 
    padding: 10px 15px 
 
} 
 
.primary_nav_wrap ul ul ul { 
 
    top: 0; 
 
    left: 100% 
 
} 
 
/* CODE REPLACED BY BELOW 
 
.primary_nav_wrap ul li:hover > ul { 
 
    display: block 
 
} 
 
*/ 
 

 
/*Code added */ 
 
.primary_nav_wrap ul li:hover div > ul, .primary_nav_wrap ul li:hover > ul { 
 
    display: block 
 
}

<div class="primary_nav_wrap"> 
 
    <ul> 
 
    <li class="current-menu-item"><a href="#">Home</a> 
 
    </li> 
 
    <li> 
 
     <a href="#">Menu 1</a> 
 
     <div class="sub_divsavedfun" id="Functions_1-5"> 
 
     <ul> 
 
      <li><a href="#">Sub Menu 1</a> 
 
      </li> 
 
      <li><a href="#">Sub Menu 2</a> 
 
      </li> 
 
      <li><a href="#">Sub Menu 3</a> 
 
      </li> 
 
      <li> 
 
      <a href="#">Sub Menu 4</a> 
 
      <ul> 
 
       <li> 
 
       <a href="#">Deep Menu 1</a> 
 
       <ul> 
 
        <li><a href="#">Sub Deep 1</a> 
 
        </li> 
 
        <li><a href="#">Sub Deep 2</a> 
 
        </li> 
 
        <li><a href="#">Sub Deep 3</a> 
 
        </li> 
 
        <li><a href="#">Sub Deep 4</a> 
 
        </li> 
 
       </ul> 
 
       </li> 
 
       <li><a href="#">Deep Menu 2</a> 
 
       </li> 
 
      </ul> 
 
      </li> 
 
      <li><a href="#">Sub Menu 5</a> 
 
      </li> 
 
     </ul> 
 
     </div> 
 
    </li> 
 
    </ul> 
 
</div>