www.webdeveloper.com
Results 1 to 5 of 5

Thread: Can't get dropdown menu to appear

Hybrid View

  1. #1
    Join Date
    Sep 2013
    Posts
    3

    Can't get dropdown menu to appear

    I cannot get my drop down css menu to appear when I hover over the menu. Here is my code:

    HTML Code:
    nav ul ul {
    	display: none;
    }
    
    nav ul li:hover > ul {
    		display: block;
    	}
    	
    #container #nav{
        list-style:none;
        margin-bottom:0px;
        float:right;
        width:700px;
    	background-image:url(../images/template/a1.jpg);
    	background-repeat:repeat-x;
    	background-size:auto;
        position:relative;
        z-index:5;
    }
    
    #container #nav li{
        float:left;
        margin-right:0px;
        position:relative;
    }
    
    #container #nav a{
        display:block;
        padding:5px;
        color:#FFC;
    	background-image:url(../images/template/a1.jpg);
        text-decoration:none;
    }
    
    #container #nav a:hover{
        color:#F60;
        background-image:url(../images/template/a1.jpg)
    }
    
    #nav ul{
        background:#000; 
        list-style:none;
        position:absolute;
        left:-1px;
    }
    
    #nav ul li{
        padding-top:1px; 
        float:none;
    }
    
    #nav ul a{
        white-space:nowrap; 
    }
    
    #nav li:hover ul{ 
        left:0; 
    }
    #nav li:hover a{ 
        background:#000;
    	color:#F60;
    
    }
    #nav li:hover ul a{ 
        text-decoration:none;
    }
    #nav li:hover ul li a:hover{ 
        background:#000;
    	color:#F60;

  2. #2
    Join Date
    Sep 2013
    Posts
    221
    You need to add a trigger to the dropdown:-

    <div class="dropdown">

    <a class="dropdown-toggle" id="drop4" role="button"
    data-toggle="dropdown" href="#">Dropdown
    <b class="caret"></b></a> <!--Here-->

    <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
    <li><a tabindex="-1" href="#">Action</a></li>
    <li><a tabindex="-1" href="#">Another action</a></li>
    <li><a tabindex="-1" href="#">Something else here</a></li>
    <li class="divider"></li>
    <li><a tabindex="-1" href="#">Separated link</a></li>
    </ul>
    </div>

    When you remove the class dropdown-menu it appears because it just appears the ul as is with some styling.

    or just add this $('.dropdown-menu').toggle(); with out trigger.

  3. #3
    Join Date
    Sep 2013
    Posts
    221
    Try out with the below code...it may help you.

    .navbar li ul li a {
    border-left: 1px solid #1f5065;
    border-right: 1px solid #1f5065;
    border-top: 1px solid #74a3b7;
    border-bottom: 1px solid #1f5065;
    }

    .navbar li ul li a:hover {background-color: #366b82;}

  4. #4
    Join Date
    Sep 2013
    Posts
    3
    Okay I got the drop down to work. I had to place the closing tag </li> after the drop down section as in the following code:

    ul id="menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">Services</a>
    <ul>
    <li><a href="#">Concrete Crack Injections</a>
    <ul>
    <li><a href="#">Epoxy</a></li>
    <li><a href="#">Polyurethane</a></li>
    <li><a href="#">Hydro Panel Leak</a></li>
    <li><a href="#">Cold Joint Sealing</a></li>
    <li><a href="#">Honeycomb Sealing</a></li>
    </ul></li>
    <li><a href="#">Basement Waterproofing</a>
    <ul>
    <li><a href="#">Interior Drainage System</a></li>
    <li><a href="#">Exterior Basement Waterproofing</a></li>
    <li><a href="#">French Drain / Drywell</a></li>
    <li><a href="#">Window Well & Drain</a></li>
    <li><a href="#">Weeping Tile Drain</a></li>
    </ul></li>
    <li><a href="#">Other Services</a></li>
    </ul>
    </li>
    <li><a href="#">Service Area</a></li>
    <li><a href="#">Reviews</a></li>
    <li><a href="#">Links</a></li>
    <li><a href="#">Contact Us</a></li>
    </ul></nav>

    Now I have run into another problem. My second drop down drops down ontop of my primary drop down and not beside it. How do I get the secondary drop down to appear on the right side of the primary drop down?

  5. #5
    Join Date
    Sep 2013
    Posts
    221
    Try this css code:

    1)in your theme's php page add following code

    register_nav_menu( 'primary', 'Primary Menu');
    register_nav_menu( 'secondary', 'Secondary Menu');
    2)then call these two menus side-by-side in header.php

    wp_nav_menu( array( 'theme_location' => 'primary' ) );
    wp_nav_menu( array( 'theme_location' => 'secondary' ) );
    Rest, you gonna have to do the css to make them appear in the same line and with different font size etc..

    3)Create two menus and assign them to primary and secondary menu

    I guess that should do it...Thnx!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles