Question

有人可以向我解释为什么导航离开主菜单项会导致子菜单消失吗？并可能提供修复。今天早上我的google-foo技能低于标准杆。谢谢大家。

CSS：

body, html{
        margin: 0;
    }

    .content{
        padding: 30px;
    }

    .nav-main{
        width: 100%;
        background-color: #222;
        height: 70px;
        color: #fff;
    }

    .nav-main > ul{
        margin: 0;
        padding: 0;
        float: left; 
        list-style-top: none;
    }

    .nav-main > ul > li {
        float: left;
    }

    .nav-item {
        display: inline-block;
        padding: 15px 20px;
        height: 40px;
        line-height: 40px;
        color: #fff;
        text-decoration: none;
    }

    .nav-item:hover{
        background-color: #444;
    }

    .nav-content{
        position: absolute;
            top: 70px;
            overflow: hidden;
            background-color: #222; /* same color as main nav*/
            max-height: 0; /*will not display if .nav-content no padding */
    }

    .nav-content a{
        color: #fff;
        text-decoration: none;
    }

    .nav-content a:hover{
        text-decoration: underline;
    }

    .nav-sub{
        padding: 20px;
    }

    .nav-sub ul{
        padding: 0;
        margin: 0;
        list-style-type: none;
    }

    .nav-sub > ul > li{
        display: inline-block;
    }

    .nav-sub ul li a{
        padding: 5px 0;
    }

    .nav-item:focus{
        background-color: #444; /*remove if click focus not necessary*/
    }

    .nav-item:hover ~ .nav-content{ 
        max-height: 400px;
        -webkit-transition:max-height 0.6s ease-in;
        -moz-transition:max-height 0.6s ease-in;
        transition:max-height 0.6s ease-in;
    }

HTML：

<body>
    <nav class="nav-main">
        <ul>
            <li>
                <a href="#" class="nav-item">first</a>
                <div class="nav-content">
                    <div class="nav-sub">
                        <ul>
                            <li><a href="#">this is a thing</a></li>
                            <li><a href="#">this is a thing 2</a></li>
                        </ul>
                    </div>
                </div>
            </li>
            <li>
                <a href="#" class="nav-item">second</a>
            </li>
            <li>
                <a href="#" class="nav-item">third</a>
            </li>
        </ul>
    </nav>

    <div class="content">this is content</div>
</body>

Answer 1

我改变了：

  Do While True
    Dim i As Integer
    i = 2
    If Cells(i, 1).Value <> "" And Not IsError(Cells(i, 2).Value) Then
        Range(Cells(i, 1), Cells(i, 22)).Copy
        Range(Cells(i, 1), Cells(i, 22)).PasteSpecial
        i = i + 1
    Else
        Exit Do
    End If
  Loop

到

.nav-item:hover ~ .nav-content{

现在它的工作 - 例如： https://jsfiddle.net/saxkayv2/

鼠标关闭主菜单项后子菜单消失

1 个答案: