WordPress.org

Ready to get started?Download WordPress

Forums

help styling two tiered navigation! thanks :) (1 post)

  1. julian5000
    Member
    Posted 5 years ago #

    hi there, i hope someone can help with this as it is causing some grief! i need to make a two tiered tab style navigation. i've got it working but styling it correctly is causing some trouble.

    when the parent link is hovered over or active it jumps to the right. i'm also not sure how i can add rounded corners to the tabs, is it possible to put the navigation items into divs?

    here it is now.

    and here is a screen shot of how i would like it to look.

    here is the code that generates the nav:

    <?php if($post->post_parent)
    $children = wp_list_pages("title_li=&child_of=".$post->post_parent."&echo=0");
    else
    $children = wp_list_pages("title_li=&child_of=".$post->ID."&echo=0");
    if ($children) { ?>
    <ul id="subnav">
    <?php echo $children; ?>
    </ul>
    <?php } else { ?>
    <ul id="subnav">
    </ul>
    <?php } ?>

    and here is the css:

    #nav {
    	background:#ffffff;
    	height:20px;
    	}
    
    #nav li {
    	margin:0 0px 0 30px;
    	}
    
    #nav li, #subnav li {
    	float:left;
    	list-style:none
    	}
    
    #nav a, #nav a:visited {
    	color:#4d4d4d;
    	text-decoration:none;
    	}
    
    #nav a:hover, #nav a:active
    li.current_page_parent a,
    li.current_page_parent a:visited,
    #nav li.current_page_item a,
    #nav li.current_page_item a:visited {
    	background:#4d4d4d;
    	margin:0;
    	padding:5px;
    	color:#FFFFFF;
    	}
    
    #subnav {
    	background:#4d4d4d;
    	height:20px;
    	}
    
    #subnav li {
    	padding:0 7px;
    	}	
    
    #subnav a, #subnav a:visited {
    	color:#FFFFFF;
    	text-decoration:none;
    	}
    
    #subnav a:hover, #subnav a:active,
    #subnav li.current_page_item a,
    #subnav li.current_page_item a:visited {
    	text-decoration:underline;
    	}

Topic Closed

This topic has been closed to new replies.

About this Topic