Anatomy of a Magazine Style Premium WordPress Theme – Part 3.1 “Navigation – Second Level Menu”

If you're new here, you may want to subscribe to my RSS feed. Thanks for visiting!

Next, we open our demo theme’s style.css file and look for classes that define the main menu and copy it. In our case it was .wrap and .menu and liked like below:

#topbar .wrap {
background: #790000;
height: 51px;
width: 958px
}

and

.menu {
background: #F7F7F6;
height: 34px;
line-height: 34px;
border-left: 1px solid #D6D6D6;
border-right: 1px solid #D6D6D6;
border-bottom: 1px solid #D6D6D6;
padding: 0;
margin: 0;
}
.menu a {
color : #74797E;
background : inherit;
text-decoration : none;
padding: 0 10px 0 10px;
line-height : 23px;
}
.menu a:hover, .menu .current {
color : #000;
background : inherit;
height : 23px;
text-decoration: underline
}
.menu ul {
list-style : none;
padding : 0;
margin : 0;
}
.menu li {
float : left;
margin : 0 0 0 0px;
display: inline;
}

Paste this style information just below the above code within the style.css and replace .wrap with .subwrap and .menu with .submenu.

02.11.2008 - 7:22 pm - Design, How to, Resources, Tips - 1,150 views -