SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot
    Join Date
    Mar 2013
    Location
    Philippines
    Posts
    114
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Fixing sub menus in wordpress

    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!



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

    --HTML--
    Code:
        <!--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--

    Code:
        .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. #2
    SitePoint Addict WebMachine's Avatar
    Join Date
    Jun 2007
    Location
    Ontario, Canada
    Posts
    392
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    Code:
    nav { position: relative }
    . Note there is no dot before the word nav.

  3. #3
    SitePoint Zealot
    Join Date
    Mar 2013
    Location
    Philippines
    Posts
    114
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question

    Quote Originally Posted by WebMachine View Post
    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
    Code:
    nav { position: relative }
    . Note there is no dot before the word nav.
    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. #4
    SitePoint Addict
    Join Date
    Oct 2008
    Location
    Virtual World is my location
    Posts
    307
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    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.
    RecipesNext.com - recipes, kitchen queries, videos & more...
    BargainNext.com - coupons / deals / bargains / offers & more...


Tags for this Thread

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
  •