HTML-подменю, исчезающее при наведении курсора после добавления CSS-каретки

Question

Я добавил CSS-шаблон в меню «Right-A» из приведенного ниже примера (или см. https://jsfiddle.net/z44kz1nk/). Если вы наведите указатель мыши на «Right-A» и попытаетесь щелкнуть любой элемент в подменю, вы увидите, что подменю исчезнет.

Правильно, ошибка вызвана пробелом в карете, но я не могу найти решение сейчас.

<nav> 
      <ul class="inline-menu left-menu"> 
       <li><a href="">Left-A</a> 
        <ul> 
         <li><a href="">1</a></li> 
         <li><a href="">2</a></li> 
        </ul> 
       </li> 
       <li><a href="">Left-B</a> 
        <ul> 
         <li><a href="">1</a></li> 
         <li><a href="">2</a></li> 
        </ul> 
       </li> 
      </ul> 

      <ul class="inline-menu middle-menu"> 
       <li><a href="">Middle-A</a> 
        <ul> 
         <li><a href="">1</a></li> 
         <li><a href="">2</a></li> 
        </ul> 
       </li> 
       <li><a href="">Middle-B</a> 
        <ul class="open-right"> 
         <li><a href="">1</a></li> 
         <li><a href="">2</a></li> 
        </ul> 
       </li> 
      </ul> 

      <ul class="inline-menu right-menu"> 
       <li><a href="">Right-A</a> 
        <div class="caret"></div> 
        <ul class="sub-menu-full-width"> 
         <li><a href="">1</a></li> 
         <li><a href="">2</a></li> 
        </ul> 
       </li> 
       <li><a href="">Right-B</a> 
        <ul class="open-right"> 
         <li><a href="">1</a></li> 
         <li><a href="">2</a></li> 
        </ul> 
       </li> 
      </ul> 
     </nav> 


*{ 
    box-sizing: border-box; 
} 

body{ 
    background-color: #fff; 
    padding: 0; 
    font-family: arial; 
    font-size: 12px; 
    font-height: 1.25em; 
} 

nav{ 
    text-align: center; 
} 

/* menu */ 
.inline-menu, 
.inline-menu ul{ 
    list-style: none; 
    padding: 0; 
    margin: 0; 
} 

.inline-menu.left-menu{ 
    float: left; 
} 

.inline-menu.right-menu{ 
    float: right; 
} 

.inline-menu.middle-menu{ 
    display: inline-block; 
} 

.inline-menu > li{ 
    display: inline-block; 
    position: relative; 
    background-color: #eee; 
    width: 100px; 
} 

.inline-menu a{ 
    text-decoration: none; 
} 

/* sub-menu */ 
.inline-menu > li > ul{ 
    display: none; 
    position: absolute; 
    background-color: #fff; 
    border: solid #eee 1px; 
    border-radius: 2px; 
    text-align: left; 
    width: 60px; 
} 

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

.inline-menu > li:hover > ul.sub-menu-full-width{ 
    width: 100%; 
} 

.inline-menu > li:hover > ul.open-right{ 
    right:0px; 
} 

.inline-menu > li:hover > ul > li:hover{ 
    background-color: #f0f0f0; 
    cursor: pointer; 
} 

/* caret */ 
.caret { 
    position: relative; 
    z-index: 2; 
} 

.caret:before { 
    content: ''; 
    position: absolute; 
    top: 0; 
    left: 0; 
    border-bottom: 6px solid #807979; 
    border-left: 6px solid transparent; 
    border-right: 6px solid transparent; 
    display: none; 
} 

.inline-menu > li:hover .caret:before{ 
    display: block; 
} 

.caret + ul{ 
    margin-top: 6px; 
} 

Answer 1

Caret создает разрыв между подменю и в главном меню до вашей мыши листьев указателя и в главном меню и достигает подменю Подменю уже получает скрытый

если вы хотите сохранить кареткой в таком же положении, как сейчас в вашем примере написать код, чтобы показать подменю на парении в каретку, а

https://jsfiddle.net/atalkishore/z44kz1nk/1/ проверка

изменить код для вставки в

<li><a href="">Right-A<span class="caret"></span></a> 
    <ul class="sub-menu-full-width"> 
     <li><a href="">1</a></li> 
     <li><a href="">2</a></li> 
    </ul> 
</li> 

Answer 2

Вы можете поместить carot внутри лития как этого

<nav> 
      <ul class="inline-menu left-menu"> 
       <li><a href="">Left-A</a> 
        <ul> 
         <li><a href="">1</a></li> 
         <li><a href="">2</a></li> 
        </ul> 
       </li> 
       <li><a href="">Left-B</a> 
        <ul> 
         <li><a href="">1</a></li> 
         <li><a href="">2</a></li> 
        </ul> 
       </li> 
      </ul> 

      <ul class="inline-menu middle-menu"> 
       <li><a href="">Middle-A</a> 
        <ul> 
         <li><a href="">1</a></li> 
         <li><a href="">2</a></li> 
        </ul> 
       </li> 
       <li><a href="">Middle-B</a> 
        <ul class="open-right"> 
         <li><a href="">1</a></li> 
         <li><a href="">2</a></li> 
        </ul> 
       </li> 
      </ul> 

      <ul class="inline-menu right-menu"> 
       <li><a href="">Right-A</a> 

        <ul class="sub-menu-full-width"> 

         <li class="caret" style="padding-top:10px"><a href="">1</a></li> 
         <li><a href="">2</a></li> 
        </ul> 
       </li> 
       <li><a href="">Right-B</a> 
        <ul class="open-right"> 
         <li><a href="">1</a></li> 
         <li><a href="">2</a></li> 
        </ul> 
       </li> 
      </ul> 
     </nav> 

Answer 3

HTML подменит исчезающее на зависания после добавленной CSS каретки
Сделать div.caret же ширину, подменит вы ориентируетесь ,

как HTML эффектов перекатывания, по умолчанию отменить себя после того, как курсор оленьей кожи фокусировать целевой элемент, поэтому в этом случае при наведении каретки все работает, как и хочет, но когда и наводите Otherside из каретка, ничего не появляется, потому что ширина из каретки действительно узкая; пожалуйста, ширина каретки же, как цель, чтобы достичь своей цели, Надеется, что это помогает