BYOW: Coding Menus

Now that we are past the boring stuff, setting up the back end for menus now we can make this fun. Here is what the default menu is on the css style sheet:

Pretty boring! So here is my menu afterwards (followed by a detailed description of the code involved):

The following code styles the whole menu.  This includes menu width, right/left justification and location on the webpage.  There are many other things you can add on here as well.

#primary-menu {
width: 550px;
margin-top: -50px;

This next section begins the “list”.  Generally this is not styled but in the case for my menu I had to justify right.

#primary-menu ul {
background: none;

This next section provides some of the spacing for the menu.  In the case for my menu a margin of 0px was used.

#primary-menu li {
margin: 0px;

This next section styles the text, the spacing, & the background.

#primary-menu li a {
border: 0px;
background: #ffffff;
text-transform: uppercase;
letter-spacing: 1px;
color: #20B2AA;
padding-top: 10px;
height: 22px;

You can’t see it in my picture but I took one of the stars from my logo and made it as a background image as you hover over a menu item. This next section of code is how I created that.  In my case the star is 40px x 40px.

#primary-menu li a:hover {
background: url(‘’) center no-repeat;

The above sections are your general used for all menus type of html, below is the rest of the code that makes my menu work. I am not going to explain it because it won’t be useful for most.

.sf-sub-indicator {

#primary-menu li ul {
border: 0px;

#primary-menu li ul li a {
background: #eeeeee;
border: 0px;
margin-top: 8px;

#primary-menu li ul li a:hover {
background: #cccccc;
color: #ffffff;

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>