HTML Code:
<ul id="menu">
<li><a href="index.php">Home</a></li>
<li><a href="">Family</a>
<ul>
<li><a href="about-homepage.php">About Homepage</a></li>
<li><a href="directory.php">Directory</a></li>
<li><a href="events.php">Events</a></li>
<li><a href="pictures.php">Pictures</a></li>
<li><a href="pages.php">Pages</a></li>
</ul>
</li>
<li><a href="company-about.php">Company</a>
<ul>
<li><a href="company-about.php">About Company</a></li>
<li><a href="company-projects.php">Company Projects</a></li>
<li><a href="company-portfolio.php">Company Portfolio</a></li>
<li><a href="company-services.php">Company Services</a></li>
</ul>
</li>
<li><a href="">Information</a>
<ul>
<li><a href="christmas-info.php">Christmas Info</a></li>
<li><a href="feedback.php">Website Feedback</a></li>
<li><a href="view-info.php">User Account Information</a></li>
<li><a href="user-weather.php">Your Local Weather</a></li>
</ul>
</li>
</ul>
CSS Code:
ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
width: 25.0em;
}
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: #2C5463;
margin-left: 1px;
white-space: nowrap;
}
ul li a:hover { background: #617F8A; }
li:hover ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
font-size: 14px;
}
li:hover a { background: #617F8A; }
li:hover li a:hover { background: #95A9B1; }

New Topic/Question
Reply



MultiQuote





|