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:

  <navclass="floatfix"><ul><li><ahref="index.php">Home</a><ul><li><ahref="index2.php">£3.99 T-Shirts</a></li><li><ahref="index3.php">£4.99 T-Shirts</a></li></ul></li><li><ahref="login.php">Log In</a></li><li><ahref="#">Account</a></li><li><ahref="feedback.php">Feedback</a></li><li><ahref="#">Checkout</a></li><li><ahref="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;
  }
  ulli {
  display: block;
  position: relative;
  float: left;
  }
  liul {
  display: none;
  }
  ullia {
  display: block;
  text-decoration: none;
  color: #ffffff;
  border-top: 1px solid #ffffff;
  padding: 5px15px5px15px;
  background: #1e7c9a;
  margin-left: 1px;
  white-space: nowrap;
  }
  ullia:hover {
  background: #3b3b3b;
  }
  li:hoverul {
  display: block;
  position: absolute;
  }
  li:hoverli {
  float: none;
  font-size: 11px;
  }
  li:hovera { background: #3b3b3b; }
  li:hoverlia: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:

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

Share