懸停時顯示子菜單

我是jQuery新手，當光標懸停時，我需要顯示子菜單。懸停時顯示子菜單

這是我的代碼：

<li class="menu"> 
    <a href="adresses.php">Qui sommes nous?</a> 
    <ul class="submenu"> 
     <li><a href="history.php">Notre histoire</a></li> 
     <li><a href="philosophie.php">Notre philosophie</a></li> 
    </ul> 
</li>

來源

2015-10-14 Ghassen Zayani

你想使用jquery或CSS？請解釋更多。 – Alex

不，我是新來的jquery我想要一個提議，但現在沒關係我用css –

這可以使用純CSS來完成。試試這個：

.submenu { 
    height: 0; 
    width: auto; 
    background: url(../../../themes/images/...png) repeat; 
    position: relative; 
    top: 15px; 
    line-height: 11px; 
} 
.submenu li { 
    height: 12px; 
    font-size: 12px; 
    color: #FFF; 
    padding: 15px; 
    padding-right: 5px; 
    font-family: Arial, Helvetica, sans-serif; 
    display: none; 
    cursor: pointer; 
} 
.submenu li:hover { 
    color: #FFF; 
    background: #A526CA; 
}

來源

2015-10-14 10:49:05

你確定這會工作嗎？我不認爲。 –

你可以用css做，使用visbility樣式。

有例如：

ul 
 
{ 
 
    position:relative; /*need for properly .submenu positioning */ 
 
    margin:0; padding:0; 
 
} 
 
li 
 
{ 
 
    list-style-type:none; /*remove style type (circles) for all li*/ 
 
} 
 
.menu 
 
{ 
 
    display:inline-block; 
 
} 
 
/*submenu will be placed under parent li and hidden, until .menu is hovered*/ 
 
.submenu 
 
{ 
 
    visibility:hidden; 
 
    position:absolute; 
 
    top:100%; 
 
} 
 
/*on hover .menu, .submenu will be showed*/ 
 
.menu:hover > .submenu 
 
{ 
 
    visibility:visible; 
 
}

<ul> 
 
    <li class="menu"> 
 
    <a href="adresses.php">Qui sommes nous?</a> 
 
    <ul class="submenu"> 
 
     <li><a href="history.php">Notre histoire</a></li> 
 
     <li><a href="philosophie.php">Notre philosophie</a></li> 
 
    </ul> 
 
    </li> 
 
    <li class="menu"> 
 
    <a href="adresses.php">Qui sommes nous?</a> 
 
    <ul class="submenu"> 
 
     <li><a href="history.php">Notre histoire</a></li> 
 
     <li><a href="philosophie.php">Notre philosophie</a></li> 
 
    </ul> 
 
    </li> 
 
<ul>

來源

2015-10-14 11:29:12 nelek

懸停時顯示子菜單

回答

相關問題