Creating Drop Down UL Navigation Bar

Here is my code so far:

• Home

  Solution 1:

  Not even going into the CSS you need to enclose the secondary UL in the Home LI like below:

          <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 stolen from a quick tutorial:

  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;
  }   ​
  

  Demo: http://jsfiddle.net/calder12/7j6H9/

  
  

  Solution 2:

  Unless I am missing something, you want to use a select like like so:

   <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>
  

  
  

Share