Question

我正在尝试使此菜单项有效，但每次使用它时，子菜单都会隐藏。请指导我。谢谢。编辑：这是同一个问题： 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 {
}
}

Answer 1

添加css：

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

因此删除了元素之间的空间。

Answer 2

你可以使用它 -

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;
}

当鼠标靠近它时，子菜单会隐藏

2 个答案: