當鼠標移動到附近時，子菜單隱藏

我正在嘗試使此菜單項有效，但每次使用它時，都會隱藏子菜單。請指導我。謝謝。編輯：這是同一個問題，因爲這： CSS Space between menu and submenu 網站：http://www.inspuratesystems.com/mntextile 當鼠標移動到附近時，子菜單隱藏

JS Fiddle

#navmenu { 
padding-top:30px; 
} 
.nav-header { 
    margin: auto; 
    padding: 0; 
    display: block; 
} 
#navmenu ul { 
    margin: 0px; 
    padding: 0px; 
    padding-left: 5px; 
} 
#navmenu ul li { 
    list-style-type: none; 
    display: inline-block; 
    position: relative; 
    margin-top: 0px; 
    padding-top: 15px; 
    /* 
    height:60px; 
    */ 
    padding-left:10px; 
    padding-right:10px; 
} 

#navmenu li a { 
    font-size: 13px; 
    color: #FFFFFF; 
    font-weight: 500; 
    font-family: 'Raleway', sans-serif; 
} 

#navmenu li a:hover { 
    font-size: 13px; 
    color: #f28c18; 
    font-weight: 500; 
} 

#navmenu li a:active { 
    color: #f28c18; 
} 

/* Effect 1: Brackets */ 
#navmenu ul { 
    -webkit-transition: color 0.3s; 
    -moz-transition: color 0.3s; 
    transition: color 0.3s; 
    margin-top: 5px; 
} 

#navmenu ul > li::before { 
    position: absolute; 
    bottom:65%; 
    left: 50%; 
    color: transparent; 
    /* Removing the balls 
    content: '•'; 
    */ 
    /* 
    text-shadow: 0 0 transparent; 
    */ 
    font-size: 1.2em; 
    -webkit-transition: text-shadow 0.3s, color 0.3s; 
    -moz-transition: text-shadow 0.3s, color 0.3s; 
    transition: text-shadow 0.3s, color 0.3s; 
    -webkit-transform: translateX(-100%); 
    -moz-transform: translateX(-100%); 
    transform: translateX(-100%); 
    pointer-events: none; 
    margin-left: 5px; 
    background:#051449;; 
} 

#navmenu ul > li:hover::before, 
#navmenu ul > li:focus::before { 
    color: #fff; 
    text-shadow: 10px 0 #fff, -10px 0 #fff; 
} 

#navmenu ul > li:hover, 
#navmenu ul > li:focus { 
    color: #FFF; 
} 

#navmenu ul >li ul li::before{ display:none;} 

#menu-icon { 
    display: none; 
} 
/*SUBMENU*/ 
#navmenu ul li ul { 
    position:absolute;width:140px; z-index:999999; padding-left:0; margin-left:0px; display:none;left: 10px; opacity: 0.9;} 
    /* old= width:120px; */ 

#navmenu ul li ul li { 
    float:none; margin:0; text-align:left; background:#FFFFFF ; 
    padding-right:10px; 
    padding-left:10px; 
    padding-top:-10px; 
    /* 
    padding:10px 10px; 
    */ 
/* 
padding-top:5px; 
*/ 

display:block; border-bottom: 1px solid #333; height:auto; } 

#navmenu ul li ul li:hover { 
    background-color: #0099CC; 
} 
#navmenu ul > li ul li:hover { 
    color: white; /* Old browsers */ 
    background-color: #0099CC ; 
} 
#navmenu ul li ul li a 
    { width:100%; margin:0px; display:block; color: #FFFFFF; 
} 


#navmenu ul li ul li a:hover 
    { width:100%; margin:0px; display:block; color: #FFFFFF; 

} 
#navmenu ul li ul li ul { 
    left: 100%; 
    /* sub menus of sub menu's same 
    margin-top: -32px; 
    */ 
    margin-top: -27px; 
    float: none; 
    border-left-width: 1px; 
    border-left-style: solid; 
    border-left-color: #CCC; 
} 

@media only screen and (max-width: 768px) { 
/*MENU*/ 
body #menu_wrap { 
    width: 100%; 
} 
body #navmenu { 
    width: 100%; 
    text-align: center; 
} 

#navmenu ul li { 
    list-style-type: none; 
    display: inline-block; 
    position: relative; 
    margin-top: 0px; 
    padding-top: 15px; 
    height: auto; 
    padding-left:10px; 
    padding-right:10px; 
    background-color:#051449; 
} 

/* nav-wrap */ 
#menu_wrap { 
    position: relative; 
} 
/* menu icon */ 
#menu-icon { 
    padding: 10px 0px; 
    cursor: pointer; 
    font-size: 20px; 
    display: block!important; /* show menu icon */ 
} 
#menu-icon:hover { 
} 
/* main nav */ 
body #navmenu ul.menu { 
    clear: both; 
    position: absolute; 
    top: 50px; 
    width: 100%; 
    z-index: 10000; 

    /* 
    border: solid 1px #999; 

    */ 
    display: none; 
    margin-top: 5px; 
    /* 
    background-color: rgb(51,51,51); 
*/ 
     background-color:#051449; 
} 
body #navmenu ul.menu li { 

    width: 100%; 
    clear: both; 
    float: none; 
    text-align: center; 
    padding-top: 6px; 
    padding-right: 30px; 
    padding-bottom: 6px; 
    padding-left: 0px; 
    /* 
    border-top-width: 2px; 
    border-right-width: 2px; 
    border-bottom-width: 2px; 
    border-left-width: 2px; 
    border-top-style: solid; 
    border-right-style: solid; 
    border-bottom-style: solid; 
    border-left-style: solid; 
    */ 
} 
body #navmenu ul > li:hover { 
    background: #051449 !important; 
} 
body #navmenu ul.menu li ul li { 
    background:#051449!important; 
    width: 100%; 
    border: none; 
} 
body #navmenu ul.menu li ul li:hover { 
    background:#051449!important; 
} 
body #navmenu ul.menu a, body #topmenu ul.menu ul a { 
    background: #051449!important; 
    display: inline; 
    padding: 0; 
    border: none; 
} 
body #navmenu ul.menu a:hover, body #topmenu ul.menu ul a:hover { 
    background: #051449!important; 
} 
/* dropdown */ 
body #navmenu ul.menu ul { 
    width: auto; 
    position: static; 
    display: block; 
    border: none; 
    background: inherit; 
    margin-top: 0px; 
} 
body #navmenu ul.menu ul li { 
} 
}

來源

2014-10-03 Fahad Uddin

添加在CSS：

#navmenu ul li ul { 
    margin-top: 0; 
}

所以元素之間的空間被刪除。

來源

2014-10-03 11:32:16 lili

當你的代碼可能（或不會）工作，如果你添加有關問題的簡要說明這將是偉大的，請問你的代碼解決它。正如它不提供根據[幫助中心]（http://stackoverflow.com/help/how-to-answer）的完整答案 – dic19 2014-10-03 11:59:27

和代碼格式。 – 2014-10-03 12:32:15

你可以使用它 -

Demo

nav ul li { 
     float: left; 
     position:relative 
    } 

    nav ul ul { 
     background-color:#fff; 
     border-radius: 0px; 
     padding: 0; 
     position: absolute; 
     top: 100%; 
     box-shadow: 0px 0px 9px rgba(0,0,0,0.15); 
     margin-top:5px; 
}

來源

2014-10-07 11:34:28

當鼠標移動到附近時，子菜單隱藏

回答

相關問題