adding droping menu

charisma44 · 09-29-2012, 02:19 AM

I'm building this site and decided now I want to add drop down menu. I have been fighting with it all day. Have asked on other forums and my navigation is getting screwed up more. Can someone help me please.

http://www.cjwebconsulting.com/destination/index.html

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
 "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>
<style type="text/css">
ul.plain li {font-weight: bold; list-style-type: none;}
</style>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">


<title>Accessible Destinations - Home</title>

<meta name="description" content=" ">

<link rel="stylesheet" type="text/css" href="css/main.css">


</head>


<body bgcolor="#FFFFFF">

 <br>

<div id="banner" align="center">	

<img src="images/banner3.jpg"  alt="">
</div>


<table width="785" border="0" align="center">
  <tr>
    <td><div id="navbar"> 
  <ul> 
        <li><a href="index.html">HOME</a></li> 
        <li><a href="about.html">ABOUT US</a></li>
        <li><a href="destinations.html">DESTINATIONS</a>
       <ul>
                     
          <li><a href="#">Whatever you want in here</a> </li>                 
          </ul>           
                      
                      
              </li>
    
        <li><a href="blog.html">BLOG</a></li>  
        <li><a href="contact.html">CONTACT</a></li>
        <li><l/> 
  </ul> 
</div></td>
  </tr>
</table>

<br>


  



<div>
<center>
<h6>Website designed by <a href="http://www.cjwebconsulting.com" target="_blank">CJ Web Consulting</a></h6>             
        </center></div> 
    </div>
 


</body>

</html>

Code:

@charset "UTF-8";
/* CSS Document */


body {
	margin:auto;   
 }


#banner{
	alignment-adjust:central;
	
 }

#navbar ul { 
        margin: 0 auto; 
        padding: 13px; 
		 font-size:18px;
        list-style-type: none; 
        text-align: center; 
        background-color: #FFF;
		border: 2px solid #000000;
		font-family: calibri,Tahoma,Arial;
		
        }
		
		#navbar li ul{
       display: none;
}

#navbar li:hover ul{
       display: block;
}
		 
  
#navbar ul li {  
        display: inline; 
        } 
  
#navbar ul li a { 
        text-decoration: none; 
        padding: .2em 1em; 
        color: #000;
	    border: 2px solid #000000;
        background-color: #FFF; 
		
        } 
  
#navbar ul li a:hover { 
        color:#FFF; 
        background-color: #000; 
        } 

h1 {
	color:#000000;
  
 }
 
 h2 {
	color:#000000;
  
 }
 
 h3 {
	color:#000000;
  
 }
 
 h4 {
	color:#000000;
  
 }
 
 h5 {
	color:#000000;
  
 }
 
 h6 {
	color:#000000;
  
 }
 
 p{
	 alignment-adjust:auto;
 #content {
	 alignment-baseline:text-after-edge;
 }
 
 
 li:before 
 {  
content:"-"; 
 }  
ul{ 
list-style-type:none; 
 }