Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 2 of 2
  1. #1
    Junior Member
    Join Date
    Nov 2007
    Posts
    1
    Member #
    16082
    Hi everyone,

    I programmed a drop down menu for my site, however, when I put the code on the site (it's a wordpress blog), there is no "dropping down" action..the drop down menu always stays out.

    Take a look...it's pretty obvious whats wrong:

    www.westranchtv.com

    Thank you!

  2.  

  3. #2
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    Try something like this:
    Code:
    <html>
    	<head>
    		<style>
    
    			div#mainMenu {
    				padding: 0px 0.5em;
    				width: 460px;
    				margin-right: 0;
    				margin-left: 10px;
    				font-family: arial narrow, helvetica condensed, sans-serif;
    			}
    			div#mainMenu a {
    				text-decoration: none;
    			}
    			ul.menu {
    				margin: 0;
    				padding: 0;
    				list-style-type: none;
    			}
    			ul.menu li {
    				margin: 0;
    				padding: 0;
    				float: left;
    				border-left: solid 1px #FFF;
    			}
    			ul.menu a {
    				background-color: #F60;
    				display: block;
    				color: #000;
    				padding: 4px 10px;
    				font-weight: bold;
    				font-size: 11pt;
    			}
    			ul.menu a:hover {
    				background-color: #FFF;				
    			}
    			ul.dropdown {
    				position: absolute;
    				margin: 0;
    				padding: 0;
    				list-style-type: none;
    			}
    			ul.dropdown li {
    				float: none;
    				background-color: #000;
    				border-top: solid 1px #FFF;
    			}
    			ul.dropdown a {
    				display: block;
    				color: #FFF;
    				padding: 2px 10px;
    				font-weight: normal;
    				background: transparent;
    				font-size: 11pt;
    			}
    			ul.dropdown a:hover {
    				background-color: #666;
    			}
    			ul.off { display: none; }
    			ul.on { display: block; }
    		</style>
    		<script language="javascript">
    			function openMenu(id) {
    				var menu = document.getElementById(id);
    				menu.className = 'dropdown on';
    			}
    
    			function closeMenu(id) {
    				var menu = document.getElementById(id);
    				menu.className = 'dropdown off';
    			}
    				
    		</script>
    		<div id="mainMenu">
    		  <ul class="menu">
    			<li><a href="Http://www.westranchtv.com">Home</a></li>
    			<li><a href="http://westranchtv.com/about/">About</a></li>
    			<li><a href="http://westranchtv.com/archives-2/">Videos</a></li>
    			<li>
    				<a href="#sectionMenu" onmouseover="openMenu('sectionMenu');" onmouseout="closeMenu('sectionMenu');">Sections</a>
    				<ul id="sectionMenu" class="dropdown off" onmouseover="openMenu('sectionMenu');" onmouseout="closeMenu('sectionMenu');">
    					<li><a href="http://westranchtv.com/entertainment">Entertainment</a></li> 
    					<li><a href="http://westranchtv.com/weather">Weather</a></li> 
    					<li><a href="http://westranchtv.com/worldnews">World News</a></li> 
    				</ul>
    			</li> 
    			<li><a href="http://westranchtv.com/awards/">Awards</a></li>
    			<li><a href="http://westranchtv.com/contact-us/">Contact</a></li>
    	
    		  </ul>
    		  <br clear="left">
    		</div>
    	</body>
    </html>
    I know it uses javascript, but hey, it works... you can also add a delay effect to the dropdown that way.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 12:17 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com