Fixing sub menus in wordpress

CMS & WordPress
1

I’m having problems trying to fix my sub-menus in wordpress. Whenever i hover on a parent menu, the sub-menu isn’t positioning it self properly under the parent men!

1024×194 128 KB

The events sub-menu should be under the news but it looks like it is floating to the left.

–HTML–


    <!--NAVIGATION -->
    <div class="row">
        <div class="col5">
		    <nav class="left_nav nav_shadow_top">
			    <div class="nav_shadow_bottom">
			    <?php wp_nav_menu( array( 'theme_location' => 'left-menu' ) ); ?>
				</div>
			</nav>
	    </div>
	
	    <div class="col6">
		<h1 class="logo"><a href="<?php echo home_url('/') ?>" title="Federal Land">federal land</a></h1>
	    </div>
	
	    <div class="col5">
		    <nav class="right_nav nav_shadow_top">
			    <div class="nav_shadow_bottom">
			    <?php wp_nav_menu( array( 'theme_location' => 'right-menu' ) ); ?>
				</div>
			</nav>
	    </div>
		<div class="row-end">&nbsp;</div>
	</div>
    <!--END NAVIGATION -->

–CSS–

    .nav{positon:relative}

    nav li:hover ul.sub-menu{display:block;}

    ul.sub-menu {
        background-color:white;
        display:none;
        position:absolute;
        z-index:1;
        border-radius:5px;
        top:35px;
        box-shadow:0 0 10px rgba(0,0,0,.3);
    }


    ul.sub-menu li{display:block !important; padding-bottom:10px;}

    .current-menu-item{border-bottom:1px solid #DBD9D9}

Here is a link for the website

http://digitalspin.ph/federalland/

2

There’s a typo in your css - .nav{positon:relative} should be position not positon. So the absolute positioning of the submenu will not be relative to the menu which technically is not positioned.

Also, do you have an element with the class name nav ( so your css uses .nav), or are you referring to the nav element - in which case the css should be

nav { position: relative }

. Note there is no dot before the word nav.

3

Thanks, i fixed the typo on my css but it still won’t position properly below the parent menu. Is there still something that i’m missing?

4

There are other issues with the positioning, like 1 I think that the sub menu should also be positioned relative. Other than that you can check the sub menu max width / main menu float with max width and so on and improve the menu.