Results 1 to 2 of 2

Thread: Navigation Bar With Drop down

  1. #1
    Join Date
    Jun 2012
    Posts
    33
    Thanks
    15
    Thanked 0 Times in 0 Posts

    Question Navigation Bar With Drop down

    I am creating a simple navigation bar with drop down menus. I am using code that I have used before, and has worked perfectly, with a change in some of the colours etc. For some reason the drop down will not appear, I don't know if I am missing something.

    The website: http://colour-flow.com/

    CSS code:

    Code:
    /*---------------Nav Bar---------------*/
    
    #menu ul {
    	margin:0;
    	padding:0;
    	height:30px;
    	width:1000px;
    	list-style-type:none;
    }
    
    #menu ul li
    {
    	position:relative;
    	background-image:url(../images/navbar.jpg);
    	margin:0;
    	padding:0;
    	display:inline;
    	height:30px;
    	width:200px;
    	text-align:center;
    	float:left;
    	line-height:30px;
    }
    
    #menu ul ul {
    	display:none;
    }
    
    #menu ul li:hover > ul {
    	display:block;
    }
    
    #menu ul li ul {
    	width:200px;
    	text-align:center;
    }
    
    #menu ul li ul li ul {
    	margin-top:-30px;
    	list-style-type:none;
    	margin-left:200px;
    	width:200px;
    	text-align:center;
    }
    
    #menu ul li ul li, #menu ul li ul li a  {
    	height:auto;
    	padding-bottom:3px;
    	padding-top:3px;
    	line-height:25px;
    	width:200px;
    	background-color:#CCCCCC;
    	color:#000000;
    	border:#000;
    	font-size:14px; 
    }
    
    #menu ul li ul li a:hover  {
    	background-color:#8CC63E;
    	color:#000;
    	border:#000 thin;
    	font-size:14px
    }
    
    
    
    #menu ul li a
    {
    	display:block;
    	height:30px;
    	cursor:pointer;
    	font-family:Tahoma, Geneva, sans-serif;
    	font-size:16px;
    	text-decoration:none;
    	color:#000;
    	font-weight:bold;
    }
    
    #menu ul li a:hover
    {
    	background-image:url(../images/navbarhover.jpg);
    }
    
    /*---------------Nav Bar---------------*/


    HTML

    HTML Code:
    <div id="menu">
        	<ul>
            	<li><a href="index.php">Home</a></li>
                <li><a href="#">page</a></li>
                <li><a href="#">page</a></li>
                <li><a href="#">page</a>
                	<ul>
                    	<li><a href="#">page</a></li>
                        <li><a href="#">page</a></li>
                        <li><a href="#">page</a></li>
                    </ul>
                </li>
                <li><a href="contact.php">Contact us</a></li>
            </ul>
        </div>
    Thank you!

  2. #2
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    688
    Thanks
    1
    Thanked 113 Times in 111 Posts

    Default

    Hi there gemzilla,

    try these two modifications....
    Code:
    
    #wrap {
            width:1000px;
    	min-height:300px;
      	overflow:hidden;
    	margin-left:auto;
    	margin-right:auto;
     }
    #menu ul ul {
            position:absolute;
    	display:none;
     }
    

    coothead

  3. The Following User Says Thank You to coothead For This Useful Post:

    gemzilla (03-04-2014)

Similar Threads

  1. Navigation: Drop Down Menus
    By jerdy in forum JavaScript
    Replies: 7
    Last Post: 04-21-2010, 08:02 AM
  2. Dom Drag & Drop for navigation?
    By celticchrys in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 07-30-2007, 12:50 PM
  3. drop down navigation button
    By forlorn in forum ASP
    Replies: 6
    Last Post: 08-31-2005, 06:32 PM
  4. drop down navigation menu
    By forlorn in forum JavaScript
    Replies: 2
    Last Post: 08-01-2005, 08:44 AM
  5. navigation menu drop down help????
    By silvito in forum JavaScript
    Replies: 6
    Last Post: 07-22-2005, 06:44 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •