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
    Member #
    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's pretty obvious whats wrong:

    Thank you!


  3. #2
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Boston, MA
    Member #
    205 times
    Try something like this:
    			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;
    			} {
    				margin: 0;
    				padding: 0;
    				list-style-type: none;
    			} li {
    				margin: 0;
    				padding: 0;
    				float: left;
    				border-left: solid 1px #FFF;
    			} a {
    				background-color: #F60;
    				display: block;
    				color: #000;
    				padding: 4px 10px;
    				font-weight: bold;
    				font-size: 11pt;
    			} 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;
    			} { display: none; }
    			ul.on { display: block; }
    		<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';
    		<div id="mainMenu">
    		  <ul class="menu">
    			<li><a href="Http://">Home</a></li>
    			<li><a href="">About</a></li>
    			<li><a href="">Videos</a></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="">Entertainment</a></li> 
    					<li><a href="">Weather</a></li> 
    					<li><a href="">World News</a></li> 
    			<li><a href="">Awards</a></li>
    			<li><a href="">Contact</a></li>
    		  <br clear="left">
    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:33 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2020 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: