Question

将此代码设为＆＃34; .active＆＃34;点击功能不起作用，但如果我更改div class =＆＃34; top-menu-popup＆＃34; div class =＆＃34; top-menu-popup active＆＃34;当我打开页面时，菜单已经激活。

<div class="top-menu-popup">
            <div class="top-menu-arrow" style="margin-right: 17.5px;"></div>
            <div class="top-menu-item home" style="display: block;">Homepage</div>
            <div class="context-menu-divider homepage" style="display: none;"></div>
            <div class="top-menu-item contains-submenu">
                "MASINI"
                <div class="top-submenu-popup">
                    <div class="top-menu-item volkswagen">Volkswagen</div>
                    <div class="top-menu-item mercedes">Mercedes</div>
                    <div class="top-menu-item ford">Ford Mustang</div>
                    <div class="top-menu-item ferrari">Ferrari</div>
                    <div class="top-menu-item dodge">Dodge</div>
                    <div class="top-menu-item lincoln">Lincoln</div>
                    <div class="top-menu-item jaguar">Jaguar</div>
                </div>
            </div>
        </div>

.top-menu-popup {
    min-width: 178px;
    position: absolute;
    background-color: white;
    -webkit-border-bottom-left-radius: 7px;
    -moz-border-radius-bottomleft: 7px;
    border-bottom-left-radius: 7px;
    border: 2px solid rgba(0, 0, 0, .3);
    border-top: 0;
    border-right: 0;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    z-index: 500;
    padding: 5px 0;
    min-height: 40px;
    top: 50px;
    right: 0;
    display: none;
}

.top-menu-popup.active {
    display: block;
}

Answer 1

我只是在猜测，但我认为你的意思是::active伪类：

＆＃13;

.top-menu-popup {
    min-width: 178px;
    position: absolute;
    background-color: white;
    -webkit-border-bottom-left-radius: 7px;
    -moz-border-radius-bottomleft: 7px;
    border-bottom-left-radius: 7px;
    border: 2px solid rgba(0, 0, 0, .3);
    border-top: 0;
    border-right: 0;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    z-index: 500;
    padding: 5px 0;
    min-height: 40px;
    top: 50px;
    right: 0;
    display: none;
}

html:active .top-menu-popup {
    display: block;
}

＆＃13;

Click Anywhere...
<div class="top-menu-popup">
            <div class="top-menu-arrow" style="margin-right: 17.5px;"></div>
            <div class="top-menu-item home" style="display: block;">Homepage</div>
            <div class="context-menu-divider homepage" style="display: none;"></div>
            <div class="top-menu-item contains-submenu">
                "MASINI"
                <div class="top-submenu-popup">
                    <div class="top-menu-item volkswagen">Volkswagen</div>
                    <div class="top-menu-item mercedes">Mercedes</div>
                    <div class="top-menu-item ford">Ford Mustang</div>
                    <div class="top-menu-item ferrari">Ferrari</div>
                    <div class="top-menu-item dodge">Dodge</div>
                    <div class="top-menu-item lincoln">Lincoln</div>
                    <div class="top-menu-item jaguar">Jaguar</div>
                </div>
            </div>
        </div>

＆＃13;

Answer 2

首先，如果您正在创建菜单，语义标签nav，ul，ol或li标签在哪里？
其次，您可以尝试这样的事情：http://jsfiddle.net/Lpnepzdf/

基本上你有一个像这样的菜单：

<ul class="horz"> <li><a href="#">Item 1</a> <ul class="vert"> <li><a href="#">Sub item 11</a></li> <li><a href="#">Sub item 12</a></li> </ul> </li> <li><a href="#">Item 2</a> <ul class="vert"> <li><a href="#">Sub item 21</a></li> <li><a href="#">Sub item 22</a></li> </ul> </li> <li><a href="#">Item 3</a></li> <li><a href="#">Item 4</a></li> </ul>

然后你可以用这个CSS简单地显示内容：

ul { margin:0; padding:0 }
.horz > li { display:inline-block; position:relative; padding:0 20px; }
.vert { margin-left:1rem; }
.vert li { line-height:100%; }

ul .vert {
    position: absolute;
    display: none;
    list-style: none;
    width:100%;
}

ul .vert li {
    padding:5px 0;
}

ul > li.active > .vert,
ul > li:hover > .vert {
    display: block; 
}

a:hover { color:red; }

基本上，您的li或div.top-menu-item.contains-submenu会显示以下内容：hover，您还可以向任何.active添加课程li，它会显示在子菜单永久。

Css类：菜单弹出不使用.active

2 个答案: