WordPress.org

Ready to get started?Download WordPress

Forums

Big Mega Menu (2 posts)

  1. mvanboordt
    Member
    Posted 2 years ago #

    Hi all,

    I have created a mega menu.
    This works however I can't get a big image behind the complete drop down.

    For example:
    MENUTOP
    - sub 1
    -- sub sub 1
    -- sub sub 2

    If someone hovers "MENUTOP" it shows the drop down
    I want to have an image for a background for the complete drop down and not just one item.

    This is what I have sofar:

    PHP to get the menu:

    <div id="menu">
    		<div id="nav_drop">
    				<ul id="nav">
    			    <li style="margin-left:20px;"><a href="<? bloginfo('siteurl'); ?>">Home</a></li>
    				<?php
    					wp_list_pages('title_li=&sort_column=menu_order&depth=0'); 
    
    					if($post->post_parent)
    						$children = wp_list_pages("title_li=&child_of=0&echo=0");
    					if ($children) {
    						echo '<ul>' .$children. '</ul>';
    						}
    				?>
                    </ul>
    		</div>
        </div>

    CSS to style the whole:

    #menu{
     width:100%;
     height:71px;
     margin:0 auto;
     background:url(images/background_menu.png) no-repeat;
    }
    
    #nav_drop{
    	background:#0000FF;
    }
    /*navigation menu */
    
    #nav {
    bottom:0;
    left:0;
    margin:0;
    padding:0;
    width:100%;
    z-index:1;
    }
    #nav, #nav ul {
    line-height:40px;
    list-style-type:none;
    width:100%;
    }
    #nav a, #nav a:hover {
    display:block;
    text-decoration:none;
    }
    #nav li {
    float:left;
    height:75px;
    list-style-type:none;
    }
    #nav li ul li {
    float:left;
    list-style-image:url(images/list_style_orange.png) !important;
    height:35px;
    }
    #nav li.page_item page-item-2 a{
    float:left;
    list-style-type:none;
    }
    
    #nav a {
    color:#FFFFFF;
    font-size:17px;
    display:block;
    margin: 0 0 0 -20px;
    padding: 0 30px 0 20px;
    height: 65px;
    }
    
    #nav a:hover, #nav a:active{
    color:#271d67;
    font-size:17px;
    background:url(images/menu_back.png) repeat-x;
    }
    
    #nav a:hover, #nav a:active, .current_page_item a, #home .on {
    text-decoration:none;
    }
    #nav li ul {
    height:auto;
    left:-999em;
    line-height:30px;
    margin: 7px 0 0 -75px;
    padding:0;
    position:absolute;
    width:auto;
    z-index:10;
    }
    #nav li li {
    width: 123px;
    }
    #nav li li a{
    color: #E84E0F;
    font-size: 12px;
    font-weight: bold;
    height: 29px;
    line-height: 14px;
    }
    
    #nav li li a:hover, #nav li li a:active{
    background:none;
    color: #E84E0F;
    font-size: 12px;
    text-decoration:underline;
    }
    
    #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
    left:auto;
    background:url(images/drop_down_back.png) repeat-y;
    width:765px;
    }
    
    #nav li ul li ul{
    clear:both;
    height:auto;
    left:-999em;
    line-height:30px;
    margin:0;
    padding:0;
    position:absolute;
    width:auto;
    z-index:10;
    }
    #nav li ul li ul li{
    float:left;
    list-style-image:url(images/list_style_blue.png) !important;
    height:35px;
    clear:both;
    }
    #nav li ul li ul li a{
    color: #271d67;
    font-size: 11px;
    line-height: 10px;
    margin-top: 10px;
    }
    #nav li ul li ul li a:hover, #nav li ul li ul li a:active{
    color: #271d67;
    text-decoration:underline;
    font-size: 11px;
    line-height: 10px;
    margin-top: 10px;
    }
    
    /*navigation menu */

    M.

  2. esmi
    Forum Moderator
    Posted 2 years ago #

    I'm sorry but it is beyond the scope of these forums to deal with general CSS issues. Try a dedicated CSS resource such as http://www.css-discuss.org/ instead. In the meantime, using Firefox with the Firebug add-on for this kind of CSS work. Or use whatever developer tool is available in your web browser.
    http://getfirebug.com/

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.