Drop Down Menu on button

rc3477 · #1 (**permalink**) 02-01-09, 07:37 PM

Basically what I'm looking to do is make a four option drop down menu on an already existing button on my site. They would be Remodeling, New Construction, Kitchens, and Bathrooms, not that it matters at this point. I've seen many examples on how to do this using css and javascript however I'm not sure how to apply it in my situation. I used photoshop to building the site layout and sliced it, now I edit it using dreamweaver. I have several buttons up at the top, but am not sure how to make the drop down under one of them. I made the assumption that the button would have to be its own div , but thats as far as I got.

any advice?
p.s the site is here if u need to see the button im talking about www.rjccomps.com

thanks guys

ajit22 · #2 (**permalink**) 02-02-09, 12:42 AM

Hope you are searching for that.

Code:

<html>
<head>

<style>

body {
	behavior: url(csshover.htc);
	font-size:11px;
	font-family:Arial, Helvetica, sans-serif;
}
 
p a {
	color: 	#000;
	text-decoration:underline!important;

}
a{
	color:	#000;
	text-decoration:none;
	}
p a:hover{	text-decoration: none!important;
}

ul#nav {
	list-style: none;
	padding: 0;
	margin: 0;
}


ul#nav li a {
	display: block;
	font-weight: bold;
	padding: 2px 10px;
	background:	#A52A2A;
}

ul#nav li a:hover{
	background:#888;
	color:#fff;
	}
	
li {
	float: left;
	position: relative;
	width: 100px;
	text-align: center;
	margin-right:5px;
	border:1px solid #ccc;

}

ul#nav li.current a{
	background:	#A52A2A;
	}

ul#nav li.current a:hover{
	background:	#A52A2A;
	}

li ul {
	display: none;
	position:absolute;
	width:100px;
	top: 18px;
	left: 0;
	font-weight: normal;
	padding: 1px 0 10px 0;
	margin-left:-1px;
}

ul#nav li ul.sub li{
	border-width:0 1px 1px 1px!important;
}

ul#nav li ul.sub li a{
	font-weight: normal!important;	
}
li&gt;ul {
	top: auto;
	left: auto;
}

li:hover ul, li.over ul {
	display: block;
}

</style>


</head>
<body>

<ul id='nav'>

   	<li class='current'><a href='#'>My Drawing</a></li>

   	<li><a href='#'>Internet</a>

      <ul class='sub'>

         <li>
                  <a href='#' title='Internet &gt; Free public fast proxy servers'>Proxy</a></li>

         <li>
                 <a href='#' title='Services &gt; How to block a site'>Block site
                </a>
        </li>

         <li>
                <a href='#' title='Services &gt; Illustration'>Illustration
                </a>
         </li>

         <li>
                <a href='#' title='Services &gt; Search Engine'>Search engine
               </a>
        </li>

         <li>
                <a href='' title='Services &gt; Wordpress'>Wordpress
                </a>

         </li>
      
    </ul>
   	</li>

   	<li>
                <a href='#'>Computer
                
                </a>
      <ul class='sub'>
        <li>
                <a href='#' title='computer &gt; Rename start button'>start button
                </a>
       </li>
         
       <li>
                <a href='#' title='computer &gt; Rename All Files From One Extension to Another'>Extension
               </a>
      </li>
      
     <li>
               <a href='#' title='computer &gt; How to make your Desktop Icons Transparent'>Transparent</a></li>
               
    <li>
              <a href='#' title='computer &gt; Create Shutdown and Restart Buttons on your desktop'>Shutdown button
             </a>
		


      </ul>
	
  </li>

   	<li>
             <a href='#'>Mobile
             </a>
        </li>
      </ul>

</body>
</html>

rc3477 · #3 (**permalink**) 02-02-09, 12:49 PM

Thanks for the code. The problem wasn't really getting the code it was how to apply it to my situation. I wasn't sure where to place the code whether it had to be with the button in a div or not.