如何防止菜单显示在鼠标悬停在此菜单中，并使其仅显示鼠标点击？

Question

我从网站下载了sm-blue菜单（我忘了地址，很抱歉）。默认情况下，它显示鼠标悬停和鼠标点击的子菜单。我希望它只在鼠标点击时显示子菜单。下面是代码：一个应用程序菜单的

例如：

<ul class="sm sm-blue pull-left" style="padding-bottom:0px;"> 
    <li> 
     <a href="javascript.void(0);">Menu title</a> 
     <li><a href="some_url">Sub menu</a></li> 
    </li> 
</ul> 

的SM-蓝色CSS：

@import url("googlefont.css"); 
.sm-blue { 
    background: transparent; 
    -webkit-border-radius: 8px; 
    -moz-border-radius: 8px; 
    -ms-border-radius: 8px; 
    -o-border-radius: 8px; 
    border-radius: 8px; 
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); 
    -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); 
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); 
} 
.sm-blue a, .sm-blue a:hover, .sm-blue a:focus, .sm-blue a:active { 
    padding: 10px 20px; 
    /* make room for the toggle button (sub indicator) */ 
    padding-right: 58px; 
    background: #3092c0; 
    background-image: -webkit-gradient(linear, to bottom, to top, color-stop(0%, #3298c8), color-stop(100%, #2e8cb8)); 
    background-image: -webkit-linear-gradient(to bottom, #3298c8, #2e8cb8); 
    background-image: -moz-linear-gradient(to bottom, #3298c8, #2e8cb8); 
    background-image: -o-linear-gradient(to bottom, #3298c8, #2e8cb8); 
    background-image: linear-gradient(to bottom, #3298c8, #2e8cb8); 
    color: white; 
    font-family: "PT Sans Narrow", "Arial Narrow", Arial, Helvetica, sans-serif; 
    font-size: 14px; 
    /*font-weight: bold;*/ 
    line-height: 17px; 
    text-decoration: none; 
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2); 
} 
.sm-blue a.current { 
    background: #006892; 
    background-image: -webkit-gradient(linear, to bottom, to top, color-stop(0%, #006188), color-stop(100%, #006f9c)); 
    background-image: -webkit-linear-gradient(to bottom, #006188, #006f9c); 
    background-image: -moz-linear-gradient(to bottom, #006188, #006f9c); 
    background-image: -o-linear-gradient(to bottom, #006188, #006f9c); 
    background-image: linear-gradient(to bottom, #006188, #006f9c); 
    color: white; 
} 
.sm-blue a.disabled { 
    color: #a1d1e8; 
} 
.sm-blue a span.sub-arrow { 
    position: absolute; 
    top: 50%; 
    margin-top: -17px; 
    left: auto; 
    right: 4px; 
    width: 34px; 
    height: 34px; 
    overflow: hidden; 
    font: bold 16px/34px monospace !important; 
    text-align: left; 
    text-shadow: none; 
    background: rgba(0, 0, 0, 0.1); 
    -webkit-border-radius: 4px; 
    -moz-border-radius: 4px; 
    -ms-border-radius: 4px; 
    -o-border-radius: 4px; 
    border-radius: 4px; 
} 
.sm-blue a.highlighted span.sub-arrow:before { 
    display: block; 
    content: '-'; 
} 
.sm-blue > li:first-child > a, .sm-blue > li:first-child > :not(ul) a { 
    -webkit-border-radius: 8px 8px 0 0; 
    -moz-border-radius: 8px 8px 0 0; 
    -ms-border-radius: 8px 8px 0 0; 
    -o-border-radius: 8px 8px 0 0; 
    border-radius: 8px 8px 0 0; 
} 
.sm-blue > li:last-child > a, .sm-blue > li:last-child > *:not(ul) a, .sm-blue > li:last-child > ul, 
.sm-blue > li:last-child > ul > li:last-child > a, .sm-blue > li:last-child > ul > li:last-child > *:not(ul) a, .sm-blue > li:last-child > ul > li:last-child > ul, 
.sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > a, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > *:not(ul) a, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > ul, 
.sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > a, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > *:not(ul) a, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul, 
.sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > a, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > *:not(ul) a, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul { 
    -webkit-border-radius: 0 0 8px 8px; 
    -moz-border-radius: 0 0 8px 8px; 
    -ms-border-radius: 0 0 8px 8px; 
    -o-border-radius: 0 0 8px 8px; 
    border-radius: 0 0 8px 8px; 
} 
.sm-blue > li:last-child > a.highlighted, .sm-blue > li:last-child > *:not(ul) a.highlighted, 
.sm-blue > li:last-child > ul > li:last-child > a.highlighted, .sm-blue > li:last-child > ul > li:last-child > *:not(ul) a.highlighted, 
.sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > a.highlighted, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > *:not(ul) a.highlighted, 
.sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > a.highlighted, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > *:not(ul) a.highlighted, 
.sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > a.highlighted, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > *:not(ul) a.highlighted { 
    -webkit-border-radius: 0; 
    -moz-border-radius: 0; 
    -ms-border-radius: 0; 
    -o-border-radius: 0; 
    border-radius: 0; 
} 
.sm-blue ul { 
    background: white; 
} 
.sm-blue ul ul { 
    background: rgba(102, 102, 102, 0.1); 
} 
.sm-blue ul a, .sm-blue ul a:hover, .sm-blue ul a:focus, .sm-blue ul a:active { 
    background: transparent; 
    color: #2b82ac; 
    font-size: 14px; 
    text-shadow: none; 
    border-left: 8px solid transparent; 
} 
.sm-blue ul a.current { 
    background: #006892; 
    background-image: -webkit-gradient(linear, to bottom, to top, color-stop(0%, #006188), color-stop(100%, #006f9c)); 
    background-image: -webkit-linear-gradient(to bottom, #006188, #006f9c); 
    background-image: -moz-linear-gradient(to bottom, #006188, #006f9c); 
    background-image: -o-linear-gradient(to bottom, #006188, #006f9c); 
    background-image: linear-gradient(to bottom, #006188, #006f9c); 
    color: white; 
} 
.sm-blue ul a.disabled { 
    color: #b3b3b3; 
} 
.sm-blue ul ul a, 
.sm-blue ul ul a:hover, 
.sm-blue ul ul a:focus, 
.sm-blue ul ul a:active { 
    border-left: 16px solid transparent; 
} 
.sm-blue ul ul ul a, 
.sm-blue ul ul ul a:hover, 
.sm-blue ul ul ul a:focus, 
.sm-blue ul ul ul a:active { 
    border-left: 24px solid transparent; 
} 
.sm-blue ul ul ul ul a, 
.sm-blue ul ul ul ul a:hover, 
.sm-blue ul ul ul ul a:focus, 
.sm-blue ul ul ul ul a:active { 
    border-left: 32px solid transparent; 
} 
.sm-blue ul ul ul ul ul a, 
.sm-blue ul ul ul ul ul a:hover, 
.sm-blue ul ul ul ul ul a:focus, 
.sm-blue ul ul ul ul ul a:active { 
    border-left: 40px solid transparent; 
} 
.sm-blue ul li { 
    border-top: 1px solid rgba(0, 0, 0, 0.05); 
} 
.sm-blue ul li:first-child { 
    border-top: 0; 
} 

@media (min-width: 768px) { 
    /* Switch to desktop layout 
    ----------------------------------------------- 
    These transform the menu tree from 
    collapsible to desktop (navbar + dropdowns) 
    -----------------------------------------------*/ 
    /* start... (it's not recommended editing these rules) */ 
    .sm-blue ul { 
    position: absolute; 
    width: 12em; 
    } 

    .sm-blue li { 
    float: left; 
    } 

    .sm-blue.sm-rtl li { 
    float: right; 
    } 

    .sm-blue ul li, .sm-blue.sm-rtl ul li, .sm-blue.sm-vertical li { 
    float: none; 
    } 

    .sm-blue a { 
    white-space: nowrap; 
    } 

    .sm-blue ul a, .sm-blue.sm-vertical a { 
    white-space: normal; 
    } 

    .sm-blue .sm-nowrap > li > a, .sm-blue .sm-nowrap > li > :not(ul) a { 
    white-space: nowrap; 
    } 

    /* ...end */ 
    .sm-blue { 
    background: #3092c0; 
    background-image: -webkit-gradient(linear, to bottom, to top, color-stop(0%, #3298c8), color-stop(100%, #2e8cb8)); 
    background-image: -webkit-linear-gradient(to bottom, #3298c8, #2e8cb8); 
    background-image: -moz-linear-gradient(to bottom, #3298c8, #2e8cb8); 
    background-image: -o-linear-gradient(to bottom, #3298c8, #2e8cb8); 
    background-image: linear-gradient(to bottom, #3298c8, #2e8cb8); 
    -webkit-border-radius: 8px; 
    -moz-border-radius: 8px; 
    -ms-border-radius: 8px; 
    -o-border-radius: 8px; 
    border-radius: 8px; 
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); 
    -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); 
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); 
    } 
    .sm-blue a, .sm-blue a:hover, .sm-blue a:focus, .sm-blue a:active, .sm-blue a.highlighted { 
    padding: 13px 24px; 
    background: #3092c0; 
    background-image: -webkit-gradient(linear, to bottom, to top, color-stop(0%, #3298c8), color-stop(100%, #2e8cb8)); 
    background-image: -webkit-linear-gradient(to bottom, #3298c8, #2e8cb8); 
    background-image: -moz-linear-gradient(to bottom, #3298c8, #2e8cb8); 
    background-image: -o-linear-gradient(to bottom, #3298c8, #2e8cb8); 
    /*background-image: linear-gradient(to bottom, #3298c8, #2e8cb8);*/ 
    background-image: linear-gradient(to bottom, #3c8dbc, #3c8dbc); 
    color: white; 
    } 
    .sm-blue a:hover, .sm-blue a:focus, .sm-blue a:active, .sm-blue a.highlighted { 
    background: #2b82ac; 
    background-image: -webkit-gradient(linear, to bottom, to top, color-stop(0%, #2d89b4), color-stop(100%, #297ca3)); 
    background-image: -webkit-linear-gradient(to bottom, #2d89b4, #297ca3); 
    background-image: -moz-linear-gradient(to bottom, #2d89b4, #297ca3); 
    background-image: -o-linear-gradient(to bottom, #2d89b4, #297ca3); 
    background-image: linear-gradient(to bottom, #2d89b4, #297ca3); 
    } 
    .sm-blue a.current { 
    background: #006892; 
    background-image: -webkit-gradient(linear, to bottom, to top, color-stop(0%, #006188), color-stop(100%, #006f9c)); 
    background-image: -webkit-linear-gradient(to bottom, #006188, #006f9c); 
    background-image: -moz-linear-gradient(to bottom, #006188, #006f9c); 
    background-image: -o-linear-gradient(to bottom, #006188, #006f9c); 
    background-image: linear-gradient(to bottom, #006188, #006f9c); 
    color: white; 
    } 
    .sm-blue a.disabled { 
    background: #3092c0; 
    background-image: -webkit-gradient(linear, to bottom, to top, color-stop(0%, #3298c8), color-stop(100%, #2e8cb8)); 
    background-image: -webkit-linear-gradient(to bottom, #3298c8, #2e8cb8); 
    background-image: -moz-linear-gradient(to bottom, #3298c8, #2e8cb8); 
    background-image: -o-linear-gradient(to bottom, #3298c8, #2e8cb8); 
    background-image: linear-gradient(to bottom, #3298c8, #2e8cb8); 
    color: #a1d1e8; 
    } 
    .sm-blue a span.sub-arrow { 
    top: auto; 
    margin-top: 0; 
    bottom: 30%; 
    margin-left: -5px; 
    right: 5%; 
    width: 0; 
    height: 0; 
    border-width: 5px; 
    border-style: solid dashed dashed dashed; 
    border-color: #a1d1e8 transparent transparent transparent; 
    background: transparent; 
    -webkit-border-radius: 0; 
    -moz-border-radius: 0; 
    -ms-border-radius: 0; 
    -o-border-radius: 0; 
    border-radius: 0; 
    } 
    .sm-blue a.highlighted span.sub-arrow:before { 
    display: none; 
    } 
    .sm-blue > li:first-child > a, .sm-blue > li:first-child > :not(ul) a { 
    -webkit-border-radius: 8px 0 0 8px; 
    -moz-border-radius: 8px 0 0 8px; 
    -ms-border-radius: 8px 0 0 8px; 
    -o-border-radius: 8px 0 0 8px; 
    border-radius: 8px 0 0 8px; 
    } 
    .sm-blue > li:last-child > a, .sm-blue > li:last-child > :not(ul) a { 
    -webkit-border-radius: 0 8px 8px 0 !important; 
    -moz-border-radius: 0 8px 8px 0 !important; 
    -ms-border-radius: 0 8px 8px 0 !important; 
    -o-border-radius: 0 8px 8px 0 !important; 
    border-radius: 0 8px 8px 0 !important; 
    } 
    .sm-blue > li { 
    border-left: 1px solid #2b82ac; 
    } 
    .sm-blue > li:first-child { 
    border-left: 0; 
    } 
    .sm-blue ul { 
    border: 1px solid #a8a8a8; 
    padding: 7px 0; 
    background: white; 
    -webkit-border-radius: 0 0 4px 4px; 
    -moz-border-radius: 0 0 4px 4px; 
    -ms-border-radius: 0 0 4px 4px; 
    -o-border-radius: 0 0 4px 4px; 
    border-radius: 0 0 4px 4px; 
    -webkit-box-shadow: 0 5px 12px rgba(0, 0, 0, 0.2); 
    -moz-box-shadow: 0 5px 12px rgba(0, 0, 0, 0.2); 
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.2); 
    } 
    .sm-blue ul ul { 
    -webkit-border-radius: 4px; 
    -moz-border-radius: 4px; 
    -ms-border-radius: 4px; 
    -o-border-radius: 4px; 
    border-radius: 4px; 
    background: white; 
    } 
    .sm-blue ul a, .sm-blue ul a:hover, .sm-blue ul a:focus, .sm-blue ul a:active, .sm-blue ul a.highlighted { 
    border: 0 !important; 
    padding: 9px 23px; 
    background: transparent; 
    color: #2b82ac; 
    -webkit-border-radius: 0 !important; 
    -moz-border-radius: 0 !important; 
    -ms-border-radius: 0 !important; 
    -o-border-radius: 0 !important; 
    border-radius: 0 !important; 
    } 
    .sm-blue ul a:hover, .sm-blue ul a:focus, .sm-blue ul a:active, .sm-blue ul a.highlighted { 
    background: #3092c0; 
    background-image: -webkit-gradient(linear, to bottom, to top, color-stop(0%, #3298c8), color-stop(100%, #2e8cb8)); 
    background-image: -webkit-linear-gradient(to bottom, #3298c8, #2e8cb8); 
    background-image: -moz-linear-gradient(to bottom, #3298c8, #2e8cb8); 
    background-image: -o-linear-gradient(to bottom, #3298c8, #2e8cb8); 
    background-image: linear-gradient(to bottom, #3298c8, #2e8cb8); 
    color: white; 
    } 
    .sm-blue ul a.current { 
    background: #006892; 
    background-image: -webkit-gradient(linear, to bottom, to top, color-stop(0%, #006188), color-stop(100%, #006f9c)); 
    background-image: -webkit-linear-gradient(to bottom, #006188, #006f9c); 
    background-image: -moz-linear-gradient(to bottom, #006188, #006f9c); 
    background-image: -o-linear-gradient(to bottom, #006188, #006f9c); 
    background-image: linear-gradient(to bottom, #006188, #006f9c); 
    color: white; 
    } 
    .sm-blue ul a.disabled { 
    background: white; 
    color: #b3b3b3; 
    } 
    .sm-blue ul a span.sub-arrow { 
    top: 50%; 
    margin-top: -5px; 
    bottom: auto; 
    left: auto; 
    margin-left: 0; 
    right: 10px; 
    border-style: dashed dashed dashed solid; 
    border-color: transparent transparent transparent #a1d1e8; 
    } 
    .sm-blue ul li { 
    border: 0; 
    } 
    .sm-blue span.scroll-up, 
    .sm-blue span.scroll-down { 
    position: absolute; 
    display: none; 
    visibility: hidden; 
    overflow: hidden; 
    background: white; 
    height: 20px; 
    } 
    .sm-blue span.scroll-up-arrow, .sm-blue span.scroll-down-arrow { 
    position: absolute; 
    top: -2px; 
    left: 50%; 
    margin-left: -8px; 
    width: 0; 
    height: 0; 
    overflow: hidden; 
    border-width: 8px; 
    border-style: dashed dashed solid dashed; 
    border-color: transparent transparent #2b82ac transparent; 
    } 
    .sm-blue span.scroll-down-arrow { 
    top: 6px; 
    border-style: solid dashed dashed dashed; 
    border-color: #2b82ac transparent transparent transparent; 
    } 
    .sm-blue.sm-rtl.sm-vertical a span.sub-arrow { 
    right: auto; 
    left: 10px; 
    border-style: dashed solid dashed dashed; 
    border-color: transparent #a1d1e8 transparent transparent; 
    } 
    .sm-blue.sm-rtl > li:first-child > a, .sm-blue.sm-rtl > li:first-child > :not(ul) a { 
    -webkit-border-radius: 0 8px 8px 0; 
    -moz-border-radius: 0 8px 8px 0; 
    -ms-border-radius: 0 8px 8px 0; 
    -o-border-radius: 0 8px 8px 0; 
    border-radius: 0 8px 8px 0; 
    } 
    .sm-blue.sm-rtl > li:last-child > a, .sm-blue.sm-rtl > li:last-child > :not(ul) a { 
    -webkit-border-radius: 8px 0 0 8px !important; 
    -moz-border-radius: 8px 0 0 8px !important; 
    -ms-border-radius: 8px 0 0 8px !important; 
    -o-border-radius: 8px 0 0 8px !important; 
    border-radius: 8px 0 0 8px !important; 
    } 
    .sm-blue.sm-rtl > li:first-child { 
    border-left: 1px solid #2b82ac; 
    } 
    .sm-blue.sm-rtl > li:last-child { 
    border-left: 0; 
    } 
    .sm-blue.sm-rtl ul a span.sub-arrow { 
    right: auto; 
    left: 10px; 
    border-style: dashed solid dashed dashed; 
    border-color: transparent #a1d1e8 transparent transparent; 
    } 
    .sm-blue.sm-vertical { 
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); 
    -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); 
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); 
    } 
    .sm-blue.sm-vertical a { 
    padding: 9px 23px; 
    } 
    .sm-blue.sm-vertical a span.sub-arrow { 
    top: 50%; 
    margin-top: -5px; 
    bottom: auto; 
    left: auto; 
    margin-left: 0; 
    right: 10px; 
    border-style: dashed dashed dashed solid; 
    border-color: transparent transparent transparent #a1d1e8; 
    } 
    .sm-blue.sm-vertical > li:first-child > a, .sm-blue.sm-vertical > li:first-child > :not(ul) a { 
    -webkit-border-radius: 8px 8px 0 0; 
    -moz-border-radius: 8px 8px 0 0; 
    -ms-border-radius: 8px 8px 0 0; 
    -o-border-radius: 8px 8px 0 0; 
    border-radius: 8px 8px 0 0; 
    } 
    .sm-blue.sm-vertical > li:last-child > a, .sm-blue.sm-vertical > li:last-child > :not(ul) a { 
    -webkit-border-radius: 0 0 8px 8px !important; 
    -moz-border-radius: 0 0 8px 8px !important; 
    -ms-border-radius: 0 0 8px 8px !important; 
    -o-border-radius: 0 0 8px 8px !important; 
    border-radius: 0 0 8px 8px !important; 
    } 
    .sm-blue.sm-vertical > li { 
    border-left: 0 !important; 
    } 
    .sm-blue.sm-vertical ul { 
    -webkit-border-radius: 4px !important; 
    -moz-border-radius: 4px !important; 
    -ms-border-radius: 4px !important; 
    -o-border-radius: 4px !important; 
    border-radius: 4px !important; 
    } 
    .sm-blue.sm-vertical ul a { 
    padding: 9px 23px; 
    } 
} 

那么如何防止从子菜单显示在这种情况下悬停？

Answer 1

这是SmartMenu jQuery插件，实际上sm-blue是一个主题类。

首先，我认为你的结构并不完整。你不能在李氏下筑巢。它应该是：

<ul class="sm sm-blue pull-left" style="padding-bottom:0px;"> 
 
    <li> 
 
     <a href="javascript.void(0);">Menu title</a> 
 
     <ul> 
 
      <li><a href="some_url">Sub menu Item</a></li> 
 
     </ul> 
 
    </li> 
 
</ul>

总之，我想他们提供noMouseOver选项，初始化脚本时，它只是设置为true。

或者你可以通过实现JavaScript处理程序手动执行，因为css甚至无法检测到点击。首先通过更改显示属性来禁用默认的css：hover行为。然后，你可以使用这样的事情（jQuery的）：

$('.sm>li').click(function(){ 
 
    $(this).find('ul').toggle(); 
 
});

或者

$('.sm>li').click(function(){ 
 
    
 
    if($(this).find('ul').hasClass('open')){ 
 
    $(this).find('ul').removeClass('open'); 
 
    } else { 
 
    $(this).find('ul').addClass('open'); 
 
    } 
 
    
 
});

凡类open应该在你的CSS与显示器进行定义：块属性，默认的子菜单应该有显示：无财产。

有几种方式，通过jQuery