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:
Default Menu BYOW: Coding Menus

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

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;
float:right;
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 div.menu ul {
float:right;
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 div.menu li {
margin: 0px;
}

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

#primary-menu div.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 div.menu li a:hover {
background: url(‘http://clay-space.com/images/site/Star_Hover.jpg’) 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 {
display:none;
}

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

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

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