2015-04-24 68 views
0

從父項中移出時,我無法導航到子菜單。從父項中移出時保留子菜單

請檢查測試環節http://tinyurl.com/lncfmd4 [你需要用戶名和密碼都是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; 
} 

回答

0

你可能會需要腳本這一點,無論是動作,顯示菜單,以及在它被隱藏的狀態。 CSS不是一種編程語言,因此您無法指定從元素中將鼠標移出時發生的情況。

相關問題