在現有導航菜單中添加下拉菜單

我有一個現有的HTML菜單，我需要添加更多導航到。我添加了額外的<ul>和<li>標籤，我相信這些標籤都在正確的位置。我遇到的問題是獲得進一步的選項，以降低「索賠類型」選項。在現有導航菜單中添加下拉菜單

下面是HTML代碼：

<div id="nav"> 
    <ul> 
     <li><a href="index.php">HOME</a></li> 
     <li><a href="injury-claim-calculator.php">INJURY CLAIM CALCULATOR</a></li> 
     <li><a href="personal-injury-solicitors.php">WHO WE ARE</a></li> 
     <li><a href="what-we-do.php">WHAT WE DO</a></li> 
     <li><a href="#">TYPES OF CLAIMS</a> 
     <ul> 
      <li><a href="#">CLAIM 1</a></li> 
      <li><a href="#">CLAIM 2</a></li> 
      <li><a href="#">CLAIM 3</a></li> 
     </ul> 
     </li> 
     <li><a href="contact.php">CONTACT US</a></li> 
    </ul> 
</div>

這裏是CSS代碼：

#nav ul li { 
display: inline; 
width: 100px; 
} 
#nav ul li a:link { 
color: #F1F1F1; 
float: left; 
padding-right: 45px; 
text-decoration: none; 
} 

#nav ul li a:visited { 
color: #F1F1F1; 
float: left; 
padding-right: 45px; 
text-decoration: none; 
} 

#nav ul li a:hover { 
color: #FFF; 
float: left; 
padding-right: 45px; 
text-decoration: underline; 
} 
#nav ul { 
margin: 0px; 
padding: 0px; 
}

任何幫助將不勝感激！

來源

2014-04-01 Robbob

試試這個http://jsfiddle.net/hd3dE/（多層次http://codepen.io/aamirafridi/pen/phKif）。看看http://aamirafridi.com/css/pure-css-responsive-menu –

你需要的東西是這樣的：

#nav ul li ul {opacity:0;} 
#nav ul li:hover ul {opacity;1;}

- 或 -

#nav ul li {display:relative;} 
#nav ul li ul {display:absolute; top:-2000px;} 
#nav ul li:hover ul {top:0;}

- 或 -

#nav ul li ul {width:150px; position:absolute; visibility:hidden; top:-2000px;} 
#nav ul li:hover ul {visibility:visible;}

基本上，你需要告訴嵌套的UL（無序列表）它具有1種使其不可見的父li的風格，以及父li的另一種風格：使其以某種方式可見的hover。有多種方法可以實現這一點。

http://csswizardry.com/2011/02/creating-a-pure-css-dropdown-menu/

來源

2014-04-01 13:18:18 Joshua

您可以使用 #nav ul li ul {visibility:hidden;}和 #nav ul li: hover ul {visibility:visible;}

來源

2014-04-01 13:26:54

在現有導航菜單中添加下拉菜單

回答

相關問題