<!doctype html>
<html>
<head>
<meta charset=”UTF-8″>
<title>BCC DROP DOWN MENU</title>
<style type=”text/css”>
body {
width: 2000px;
height: 2000px;
}
ul {
list-style: none;
padding: 0px;
margin: 0px;
font-family: “Gill Sans”, “Gill Sans MT”, “Myriad Pro”, “DejaVu Sans Condensed”, Helvetica, Arial, sans-serif;
}
ul li {
display: block;
position: relative;
float: left;
border:1px solid #000
}
li ul {
display: none;
}
ul li a {
display: block;
background: #50AD91;
padding: 15px 10px 5px 30px;
text-decoration: none;
white-space: nowrap;
color: #fff;
}
ul li a:hover {
background: #428D77;
}
li:hover ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
}
li:hover a {
background: #50AD91;
}
li:hover li a:hover {
background: #428D77;
}
#drop-nav li ul li {
border-top: 0px;
}
#boom {
width: 100%
}
a {
display: block;
float: left;
border-right-width: 1px;
border-right-color: #FFFFFF;
text-decoration: none;
margin-left: 1px;
width: 122px;
padding-left: 30px;
padding-right: 20px;
height: 30px;
margin-top: -1px;
padding-top: 10px;
border-bottom-style: solid;
}

.grey {
display: block;
float: left;
background-color: #CBCBCB;
clear: left;
width: 230px;
font-size: 13px;
border-bottom: 2px dotted #FFFFFF;
padding-top: 12px;
color: Black;
font-weight: bold;
}
.yellow {
clear: left;
background-color: #cbcbcb;
width: 230px;
font-size: 15px;
padding-top: 12px;
color: black;
font-weight: bold;
border-bottom-color: #FEFEFE;
}
.gray:hover {
background-color: darkgrey;
}
.yellow:hover {
background-color: darkgrey;
}
</style>
</head>

<body>
<div id=”boom”>
<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>
<a href=”#” class=”grey”>Academic/Support Services</a>
<a href=”#” class=”grey”>President’s Office</a>
<a href=”#” class=”grey”>About BCC</a>
<a href=”#” class=”grey”>ASAP</a>
<a href=”#” class=”grey”>Future Students</a>
<a href=”#” class=”grey”>Current Students</a>
<a href=”#” class=”grey”>Factulty and Staff</a>
<a href=”#” class=”grey”>Alumni and Freidsn</a>
<a href=”#” class=”grey”>Workforce/ Community Programs</a>
<a href=”#” class=”grey”>Centers and Institutes</a>
<a href=”#” class=”yellow”>News</a>
</div>
</body>
</html>

BCC Drop Down Menu
Tagged on: