html中的子菜單

我在菜單上創建了一個子菜單。它顯示了菜單中的名稱，然後我在子菜單中顯示了我想要的名稱，這些名稱僅在光標懸停在菜單上時才顯示。由於html中的子菜單

CSS：

#nav li a { 
    text-decoration: none; 
    color: #fff; 
    display: block; 
    padding-left: 15px; 
    border-bottom: 1px solid #888; 
    transition: .3s background-color; 
} 
#nav ul { 
    list-style-type: none; 
    margin: 1; 
    padding: 1; 
    overflow: hidden; 
    background-color: #333; 
} 
#nav li { 
    float: left; 
} 
#nav a { 
    display: inline; 
    color: white; 
    text-align: center; 
    padding: 14px 16px; 
    text-decoration: none; 
} 
#li a:hover:not(.active) { 
    background-color: #111; 
} 
.active { 
    background-color: #4CAF50; 
}

HTML：

<div id="nav"> 
    <ul> 
    <li> <a href="Index.php">Home</a></li> 
    <li><a href=".php">Who are we</a></li> 
    <li> 
     <a href=".php">Sports </a> 
     <ul> 
     <li><a href=".php">Football</a></li> 
     <li><a href=".php">Rugby</a></li> 
     <li><a href=".php">Hockey</a></li> 
     <li><a href=".php">Golf</a></li> 
     <li><a href=".php">Tennis</a></li> 
     </ul> 
    </li> 
    <li><a href="health.php">Health</a></li> 
    <li><a href=".php">Nutrition</a></li> 
    <li><a href="personaltrainers.php">Personal Trainers</a></li> 
    <ul style="float:right;list-style-type:none;"> 
     <li><a href=".php">Contact Us</a></li> 
     <li><a href=".php">Login</a></li> 
    </ul> 
    </ul> 
</div>

感謝

來源

2016-02-11 K Broom

什麼，*確切*，是你的問題？ –

允許菜單不顯示「橄欖球，橄欖球」，但此刻它顯示即使您沒有點擊菜單。 –

看這個例子，你想要這個嗎？ [JSFiddle]（https://jsfiddle.net/h740e1yv/） – Pedram

你應該給你的東西類。你也應該擺脫你的浮動留在#nav li，而是給他們display: inline-block;然後給你的孩子ul一個display: none;，position: absolute;和padding: 0;有display: block激活父li的懸停。你可以給li的display: block;讓他們坐在彼此的頂部。看到這個JSFiddle

<li class="sport-wrapper"> 
    <a href=".php">Sports </ 
    <ul class="sports"> 
    <li><a href=".php">Football</a></li> 
    <li><a href=".php">Rugby</a></li> 
    <li><a href=".php">Hockey</a></li> 
    <li><a href=".php">Golf</a></li> 
    <li><a href=".php">Tennis</a></li> 
    </ul> 
</li> 



.sports { 
    display: none; 
    padding: 0; 
    position: absolute; 
} 
.sport-wrapper:hover .sports { 
    display: block; 
} 



#nav .sports li { 
    display: block; 
} 
#nav li { 
    display: inline-block; 
}

來源

2016-02-11 20:57:27

非常感謝@jordanmulder –

嘗試是這樣的：

#nav ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
#nav ul.submenu { 
 
    position: absolute; 
 
    display:none; 
 
    background-color: red; 
 
} 
 

 
#nav > ul > li { 
 
    float: left; 
 
    position: relative; 
 
    background: #333; 
 
} 
 

 
#nav a { 
 
    color: white; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    display: block; 
 
    padding: 15px; 
 
} 
 

 
#nav > ul > li:hover ul { 
 
    display: block; 
 
}

<div id="nav"> 
 
    <ul> 
 
    <li><a href="Index.php">Home</a></li> 
 
    <li><a href=".php">Who are we</a></li> 
 
    <li><a href=".php">Sports</a> 
 
     <ul class="submenu"> 
 
     <li><a href=".php">Football</a></li> 
 
     <li><a href=".php">Rugby</a></li> 
 
     <li><a href=".php">Hockey</a></li> 
 
     <li><a href=".php">Golf</a></li> 
 
     <li><a href=".php">Tennis</a></li> 
 
     </ul> 
 
    </li> 
 
    <li><a href="health.php">Health</a></li> 
 
    <li><a href=".php">Nutrition</a></li> 
 
    <li><a href="personaltrainers.php">Personal Trainers</a></li> 
 
    </ul> 
 
</div>

來源

2016-02-11 20:55:09 smdsgn

非常感謝@smdsgn –

html中的子菜單

回答

相關問題