HTML子菜单在添加CSS插入符号后悬停时消失_Css_Drop Down Menu_Caret

HTML子菜单在添加CSS插入符号后悬停时消失

css drop-down-menu

HTML子菜单在添加CSS插入符号后悬停时消失,css,drop-down-menu,caret,Css,Drop Down Menu,Caret,我已经从下面的例子中为“Right-a”菜单添加了CSS插入符号（或参见）。如果您将鼠标悬停在“Right-A”上，并尝试单击子菜单中的任何项目，您将看到子菜单消失看起来不错错误是由插入符号中的间隙引起的，但我现在找不到解决方案 <nav> <ul class="inline-menu left-menu"> <li><a href="">Left-A</a>

我已经从下面的例子中为“Right-a”菜单添加了CSS插入符号（或参见）。如果您将鼠标悬停在“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;
}












































*{
框大小：边框框；
}
身体{
背景色：#fff；
填充：0；
字体系列：arial；
字体大小：12px；
字体高度：1.25em；
}
导航{
文本对齐：居中；
}
/*菜单*/
.内联菜单，
.内联菜单{
列表样式：无；
填充：0；
保证金：0；
}
.inline-menu.left-menu{
浮动：左；
}
.inline-menu.right-menu{
浮动：对；
}
.inline-menu.middle-menu{
显示：内联块；
}
.inline菜单>li{
显示：内联块；
位置：相对位置；
背景色：#eee；
宽度：100px；
}
.内联菜单a{
文字装饰：无；
}
/*子菜单*/
.内联菜单>li>ul{
显示：无；
位置：绝对位置；
背景色：#fff；
边框：实心#eee 1px；
边界半径：2px；
文本对齐：左对齐；
宽度：60px；
}
.inline菜单>li:悬停>ul{
显示：块；
}
.内联菜单>li:悬停>ul.子菜单-全宽{
宽度：100%；
}
.inline菜单>li:悬停>ul.右开{
右：0px；
}
.inline菜单>li:悬停>ul>li:悬停{
背景色：#f0；
光标：指针；
}
/*插入符号*/
插入符号{
位置：相对位置；
z指数：2；
}
插入符号：之前{
内容：''；
位置：绝对位置；
排名：0；
左：0；
边框底部：6px实心#807979；
左边框：6px实心透明；
右边框：6px实心透明；
显示：无；
}
.inline menu>li:悬停。插入符号：之前{
显示：块；
}
.插入符号+ul{
边缘顶部：6px；
}

插入符号在子菜单和主菜单之间创建一个间隙，直到鼠标指针离开主菜单并到达子菜单子菜单已经隐藏

如果您希望将插入符号保持在与示例中现在相同的位置，那么编写代码以在插入符号悬停时显示子菜单

检查

将插入符号的代码更改为

<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>

插入符号在子菜单和主菜单之间创建一个间隙，直到鼠标指针离开主菜单并到达子菜单子菜单已经隐藏

如果您希望将插入符号保持在与示例中现在相同的位置，那么编写代码以在插入符号悬停时显示子菜单

检查

将插入符号的代码更改为

<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>

您可以像这样将carot放入li中

 <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>

您可以像这样将carot放入li中

 <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>