如何防止菜單顯示在鼠標懸停在此菜單中，並使其僅顯示鼠標點擊？

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