WordPress-Sub-menu-css

<h2>How to Create CSS for wordpress sub menu </2>

.main {border-radius: 12px; margin-top: 30px; padding-left: 14px;
width: 989px;}

.main-nav li a { color: #fff; display: inline-block; font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: bold; line-height: 50px; padding: 0px 25px 0; text-transform: uppercase; }

.main-nav li.current-menu-item a{color: #fff; padding: 0 25px; background: none repeat scroll 0 0 #ff6801;}

 

/*.main-nav li .current-menu-item a {background: none repeat scroll 0 0 #ff6801; border-color: #D4D4D4 #D4D4D4 -moz-use-text-color; border-style: solid solid none; border-width: 1px 1px 0; color: #fff; padding: 0 33px; }
*/
.main-nav li a:hover { background: none repeat scroll 0 0 #ff6801; color: #fff; padding: 0 25px; }

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

.sub-menu { background: none repeat scroll 0 0 #282828; display: none; position: absolute; width: 384px; z-index: 9999; margin-top:0px; }

.sub-menu li { float:none !important; text-align:left !important; background:#282828; border: 0 none !important; padding-right:0 !important; margin-left:0px !important; }

.sub-menu li a { border: 0 none !important; font-size: 13px !important; border-radius:0px !important; color: #fff !important; }

.sub-menu li a:hover{width:334px; }

.sub-menu li.current-menu-item a{width:334px;}

.main-nav .current-menu-parent {
background: none repeat scroll 0 0 #ff6801; color: #fff;
}

 

 

 

 

 

 

 

 

/**
* 4.2 Navigation
* —————————————————————————-
*/
a{text-decoration:none;}
.main-navigation {
clear: both;
margin: 0 auto;
max-width: 1080px;
min-height: 45px;
position: relative;
}

ul.nav-menu,
div.nav-menu > ul {
margin: 0;
padding: 0 40px 0 0;
}

.nav-menu li {
display: inline-block;
position: relative;
}

.nav-menu li a {
color: #141412;
display: block;
font-size: 15px;
line-height: 1;
padding: 0 20px;
text-decoration: none;
}

.nav-menu li:hover > a,
.nav-menu li a:hover {
/*background-color: #220e10;
*/    color: #fff;
}

.nav-menu .sub-menu,
.nav-menu .children {
/*background-color: #220e10;*/
color:#9E9D9D;
border-top: 0;
display: none;
padding: 0;
position: absolute;
left: -2px;
z-index: 99999;

}

.nav-menu .sub-menu ul,
.nav-menu .children ul {
border-left: 0;
left: 100%;
top: 0;
}

ul.nav-menu ul a,
.nav-menu ul ul a {
color: #fff;
margin: 0;
width: 127px;
}

ul.nav-menu ul a:hover,
.nav-menu ul ul a:hover {
/*background-color: #db572f;*/
}

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

.nav-menu .current_page_item > a,
.nav-menu .current_page_ancestor > a,
.nav-menu .current-menu-item > a,
.nav-menu .current-menu-ancestor > a {
color: #EB8E2A;
/*font-style: italic;*/
}

.menu-toggle {
display: none;
}

.nav .sub-menu li a{padding-top:10px; margin-left:14px; padding-bottom:10px;}

 

 

 

/*****************************/

<h1>How to create active class</h1>

 

#halo .public-nav .navbar-nav .current_page_item > a, #halo .public-nav .navbar-nav .current_page_ancestor > a, #halo .public-nav .navbar-nav .current-menu-item > a, .site-navigation .current-menu-ancestor > a:active{color:#000;}

 

.nave-main-class .current_page_item > a, .nave-main-class .current_page_ancestor > a, .nave-main-class .current-menu-item > a, .site-navigation .current-menu-ancestor > a:active{color:#000;}