wordpress_add

Showing posts with label menu. Show all posts
Showing posts with label menu. Show all posts

Wednesday, 18 September 2013

How to style the sub menu in word press Complete code..!!! Dr-wordpress

Here is the exact code to style you sub menu in wordpress.
Before using It just keep in mind the few things.
Note : .menu is the main menu.
           ( you can change it according to your design )

After It Just paste these line to your style Sheet. Than your menu is completely styled Just Change the color and effects according to you web design.. 

.menu
{
width:660px;
height:30px;
float:left;
margin-left:4px;
margin-top:30px;
}



.menu ul, .menu li {
    list-style: none outside none;
    margin: 0;
    padding: 0;
}
.menu li {
  /*  background-image: url("images/sep.gif");*/
    background-position: 0 15px;
    background-repeat: no-repeat;
    float: left;
    margin-left: 5px;
    margin-top: 2px;
    padding-left: 9px;
    position: relative;
}
.menu li.first {
    background-image: none;
    padding-left: 0;
}
.menu li a {
    color: #FFFFFF;
    display: block;
    padding: 8px 5px;
    text-decoration: none;
}
.menu li a:hover {
    color: #A59B00;
    text-decoration: none;
}
.menu ul {
    margin-left: 26px;
    margin-top: 43px;
}
.menu ul ul {
    display: none;
    float: left;
    left: 0;
    margin: 0;
    position: absolute;
    top: 34px;
    width: 150px;
    z-index: 200;
}
.menu ul ul li {
    background: none repeat scroll 0 0 transparent;
    border-bottom: 1px solid #716A00;
    float: none;
    height: auto;
    margin: 0;
    min-width: 120px;
    padding: 0;
}
.menu ul ul li a {
    background-color: #B7AF34;
    color: #FFFFFF;
    display: block;
    height: auto;
    line-height: 1em;
    padding: 5px 10px;
    text-decoration: none;
}
.menu ul ul li a:hover {
    background-color: #D2CA55;
    color: #FFFFFF;
}
.menu ul ul ul {
    left: 100%;
    top: 0;
}
.menu ul li:hover > ul {
    display: block;
}
.menu ul li.current_page_item > a, .menu ul li.current_page_ancestor > a, .menu ul li.current_menu_item > a, .menu ul li.current_page_parent > a {
    color: #A59B00;
}


Subscribe Dr-Wordpress for Important Knowledge of wordpress..your's suggestions are most welcomed.