創建下拉UL導航欄

Question

這裏是我到目前爲止的代碼：

<?php 

echo ' 
     <nav class="floatfix">  
       <ul> 
        <li><a href="index.php">Home</a></li> 
    <ul> 
     <li><a href="index2.php">£3.99 T-Shirts</a></li> 
     <li><a href="index3.php">£4.99 T-Shirts</a></li> 
     </ul> 
        <li><a href="login.php">Log In</a></li> 
        <li><a href="#">Account</a></li> 
        <li><a href="feedback.php">Feedback</a></li> 
        <li><a href="#">Checkout</a></li> 
        <li><a href="aboutus.php">About Us</a></li> 
        </ul> 
      </nav> 
    '; 

?> 

這裏是我的CSS

/* =float clearing 
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/ 
.floatfix { 
    display: block; 
    height: 1%; 
    text-transform: uppercase; 

} 
.floatfix:after { 
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden; 
} 

我怎樣才能獲得3.99£襯衫& 4.99£襯衫作爲一個下拉菜單下的導航欄上的「主頁」。

三江源非常

Answer 1

甚至沒有進入你需要附上輔UL在首頁的CSS李象下面這樣：

 <nav class="floatfix">  
      <ul> 
       <li><a href="index.php">Home</a> 
        <ul> 
         <li><a href="index2.php">£3.99 T-Shirts</a></li> 
         <li><a href="index3.php">£4.99 T-Shirts</a></li> 
        </ul> 
       </li> 
       <li><a href="login.php">Log In</a></li> 
       <li><a href="#">Account</a></li> 
       <li><a href="feedback.php">Feedback</a></li> 
       <li><a href="#">Checkout</a></li> 
       <li><a href="aboutus.php">About Us</a></li> 
       </ul> 
     </nav> 

CSS從快速教程被盜：

ul { 
font-family: Arial, Verdana; 
font-size: 14px; 
margin: 0; 
padding: 0; 
list-style: none; 
} 
ul li { 
display: block; 
position: relative; 
float: left; 
} 
li ul { 
display: none; 
} 
ul li a { 
display: block; 
text-decoration: none; 
color: #ffffff; 
border-top: 1px solid #ffffff; 
padding: 5px 15px 5px 15px; 
background: #1e7c9a; 
margin-left: 1px; 
white-space: nowrap; 
} 
ul li a:hover { 
background: #3b3b3b; 
} 
li:hover ul { 
display: block; 
position: absolute; 
} 
li:hover li { 
float: none; 
font-size: 11px; 
} 
li:hover a { background: #3b3b3b; } 
li:hover li a:hover { 
background: #1e7c9a; 
} ​ 

演示：http://jsfiddle.net/calder12/7j6H9/

Answer 2

除非我失去了一些東西，你想用一個選擇喜歡像這樣：

<nav class="floatfix">  
       <ul> 
        <li><a href="index.php">Home</a></li> 
        <select id="lstPrice"> 
        <option value="3.99">£3.99 T Shirts</option> 
       <option value="4.99">£4.99 T Shirts</option> 
       </select> 
        <li><a href="login.php">Log In</a></li> 
        <li><a href="#">Account</a></li> 
        <li><a href="feedback.php">Feedback</a></li> 
        <li><a href="#">Checkout</a></li> 
        <li><a href="aboutus.php">About Us</a></li> 
        </ul> 
      </nav>