<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>BCC TEST SITE</title>
<style type="text/css">
  ul {list-style: none;padding: 0px;margin: 0px;}
  ul li {display: block;position: relative;float: left;border:1px solid #000}
  li ul {display: none;}
  ul li a {display: block;background: #000;padding: 5px 10px 5px 10px;text-decoration: none;
           white-space: nowrap;color: #fff;}
  ul li a:hover {background: #f00;}
  li:hover ul {display: block; position: absolute;}
  li:hover li {float: none;}
  li:hover a {background: #f00;}
  li:hover li a:hover {background: #000;}
  #drop-nav li ul li {border-top: 0px;}

</style>
</head>

<body>

<ul id="drop-nav">
  <li><a href="#">ADMISSIONS</a></li>
  <li><a href="#">FINANCES</a></li>
  <li><a href="#">ACADEMICS</a>
    <ul> 
      <li><a href="#">ACADEMIC DEGREE PROGRAM</a></li> 
      <li><a href="#">ACADEMIC DEPARTMENT</a></li> 
      <li><a href="#">ACADEMIC RESOURCES</a></li> 
    </ul> 
  </li> 
  <li><a href="#">SERVICES</a> 
    <ul> 
      <li><a href="#">ACADEMIC COMPUTER LABS</a></li> 
      <li><a href="#">ACADEMIC SUPPORT SERVICES</a></li> 
      <li><a href="#">BCC SHUTTLE BUS</a></li> 
      <li><a href="#">BOOK STORE</a></li> 
    </ul> 
  </li> 
  <li><a href="#">STUDENT LIFE</a> 
    <ul> 
      <li><a href="#">GET INVOLVED</a></li> 
      <li><a href="#">SUPPORT SERVICES</a></li> 
      <li><a href="#">STUDENT RESOURCES</a></li> 
      <li><a href="#">CAMPUS DINING</a></li> 
    </ul>  
  </li>
  <li><a href="#">ATHLETICS</a></li>
  <li><a href="#">LIBRARY</a></li>
  <li><a href="#">SUPPORT</a>
</ul>
UL Drop Down Menu Code
Tagged on: