Question

我在下面的示例中添加了一个CSS插入符号“Right-A”菜单（或参见https://jsfiddle.net/z44kz1nk/）。如果您将鼠标悬停在“右键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放在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>

Answer 3

HTML子菜单在添加CSS插入符后悬停时消失
使div.caret的宽度与您要定位的子菜单的宽度相同。

由于html 悬停效果，默认情况下，一旦光标没有聚焦目标元素就撤消自己，所以在这种情况下，当您将鼠标悬停在插入符号时，一切都按照您的要求运行，但是当你将鼠标悬停在插入符号的其他部分时，没有任何显示，因为插入符号的宽度非常窄; 请使插入符号的宽度与目标相同以实现目标，希望有所帮助

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

3 个答案: