Question

我从母版鼠标输出时无法导航到我的子菜单。

请检查测试链接http://tinyurl.com/lncfmd4 [您需要用户ID和密码 vts ]

我尝试过较低的分辨率并且工作正常。

我当前的分辨率为1920x1080。

我的CSS

nav {
    /*background:#0099FF;*/
    background: none repeat scroll 0 0 #fafafa;
    border-bottom: 1px solid #7e7e7e;
    padding: 0 0 0 10px;
    min-height:10vh;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    z-index: 11;
}
nav ul {
    text-align: center;
    /*display: inline;*/
    list-style: none;
    /*20150113*/
    min-height:10vh;
    display: inline;
    list-style: none;
    width: 100%;
    float: left;
    margin-top: -2px;

}
nav ul ul {
    margin-left: 0% !important;
}
nav ul li {
    font: bold 12px/18px sans-serif;
    display: inline-block;
    position: relative;
    vertical-align: middle;
    -moz-appearance: none;
    text-align: center;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    font-size: 12px;
    font-family: arial, helvetica, sans-serif;
    text-decoration: none;
    display: inline-block;
    font-weight: bold;
    color: #262638;
    margin: 0px -1px;
    line-height:1;
    top:1vh;

}
ul#nav > li li {display: table-row;}
nav ul li a {
    margin: 5px 5px 0px 10px; /*20150113*/
    text-decoration: none;
    color: #262638;
    display: block;
}

nav ul li a:hover {
    text-decoration: none;
    margin: 5px 5px 0px 10px;
    color: #000000;
    display: block;
    font-size: 12px;
    font-family: arial, helvetica, sans-serif;
    text-decoration: none;
    display: inline-block;
    font-weight: bold;

}
nav ul li ul {
    display: none;
    width: 960px;
    position: fixed;
    left: 17%;
    top: 10vh;
    border-top: none;
    margin-top: 1pt;
    overflow: scroll;
    height: 32%;
    overflow-x: hidden;
    text-align: left;
    border-bottom:5px solid #cccccc;
    padding-bottom:10px;

}
nav ul li ul li {
    width: 33.333%;
    border-left: solid 1px #ccc;
    margin: 0 -3px;
    /*padding:0px 25.5px;*/
    background: #FAFAFA !important;
    border-radius: 0px;
    text-align: left;
}
nav ul li ul li a {
    font-family: 'Arial', Helvetica Neue, Helvetica, sans-serif !important;
    -webkit-font-smoothing: antialiased;
    font-size: 12px;
    text-decoration: none;
    color: #666;
    background: #fff;
    cursor: pointer;
    padding: 14px;

}
nav ul li ul li a:hover {
    text-decoration: none;
    color: #de4a4a;
    cursor: pointer;
    padding: 14px;
}
nav ul li ul li h5 {
    font-family: 'Arial', Helvetica Neue, Helvetica, sans-serif;
    -webkit-font-smoothing: antialiased;
    font-size: 16px;
    font-weight: normal;
    margin-bottom: 10px;
}
nav ul li ul li p {
    font-size: 12px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
    padding: 0 16px;
}
nav ul li:hover ul {
    display: block;
    background: #fff;
    width: 64.1%;
    border: 1px solid #ccc;
    position: fixed;
    left: 18%;
    border-top: none;
}

Answer 1

您可能需要编写此脚本，包括显示菜单的操作以及隐藏它的条件。 CSS不是一种编程语言，所以你不能指定当你从元素中鼠标时会发生什么。

从Parent移出鼠标时保持列出子菜单

1 个答案: