CSS Sub Menu Part II

Simple drop down menu using CSS Part II

As mentioned in part one, part two will show you how to add some graphics to the drop down menu. If you have not viewed part one please do as this gives you the basics into how to create the drop down menu in CSS.

Step – 1. Changing some code.

<ul>
<li><a href="#">Element 1</a></li>
    <li><a href="#">Element 2</a></li>

	<li><a href="#">Element 3<span></span></a>
 		 <ul>
			<li><a href="#">subelement 1</a></li>
			<li><a href="#">subelement 2</a></li>
			<li><a href="#">subelement 3</a></li>
	    	<li><a href="#">subelement 4</a></li>
			<li><a href="#">subelement 5</a></li>
     	</ul>
  </li>

	<li><a href="#">Element 4</a></li>

	<li><a href="#">Element 5<span></span></a>
		<ul>
    		<li><a href="#">subelement 6</a></li>
  			<li><a href="#">subelement 7</a></li>
			<li><a href="#">subelement 8</a></li>
			<li><a href="#">subelement 9</a></li>
			<li><a href="#">subelement 10</a></li>
	  	</ul>
  </li>

	<li><a href="#">Element 5</a></li>
    <li><a href="#">Element 6</a></li>
    <li><a href="#">Element 7</a></li>
</ul>

Here we have changed some of the text and code, we deleted the text to make it more neat and allow the text to fit within the button so that some buttons dont look out of place and we will be replacing the text that said drop down menu with an arrow image.

We have placed a <span></span> into the drop down menus as this will help us style the arrow image into the menu.

Step – 2. Creating the Images.

We will be using Photoshop to create our images for our menu. So lets go ahead and get started.

If you dont feel like you want to do the photoshop bit then you can download them and go ahead to Step 3. Or if you dont want to use images just change the CSS to a colour background instead of an image.

Step – 2a. The Main Background.

Lets open Photoshop and start with a New Document, choose settings of width 100px and height of 30px with a 72dpi.

Now fill the background with Black then using the rectangle selection tool drag from the top left of the image to about half way down on the right hand side as shown in the image below.

Creat a new layer then using white and the Gradient tool going from white to transparent this is selected from the gradient menu in the top left of the screen, drag from the top of your selection down the bottom and let go change th opacity of this layer to about 20% this is you background done so lets save this as a .jpg if you want to optimize the image for the web then just CTRL + SHIFT + ALT + S and a new dialog box will open up. I will go into optimizing at another time.

Step – 2b. The Roll Over.

We now want to make the graphic that will be displayed when the user rolls over each menu.

Start with the file you have just made and select the pencil tool and using white and a brush size of 1px create a new layer and make a white line across the screnn about a third of the size of the document, hold down SHIFT whill you do this to make sure you get a straight line.

Position this line in the middle of your document and then go to Filter — Blur — Motion Blur, using a blur of 45 and angle of 0. Press Ok and change the opacity to 20% save this new image as menu-hover and as a jpg.

Step – 2c. The Arrow.

To create the arrow we will be using the Custom Shape Tool. Once selected Right Click anywhere on your screen and you will have a box appear in this box are all the shapes that come with photoshop so go ahead and select one of the arrows.

With the arrow you like selected drag and creat a arrow about half the size of the current document. Right Click and select Create Selection this will give you a selection of your shape create a new layer and select the paint bucket using white and fill in the arrow. Thats the arrow done you just need to hide the other layers move the arrow to the right had side of the document and then save it as a .png

Step – 3. To your CSS add below code:

ul {
	list-style-type: none;
	margin: 0px;
	padding: 0px;
	border: 2px solid #333;
	width: 100px;
}

ul li {
	position: relative;
	width: 100px;
}
ul li a{
	display: block;
	background-color: #000;
	color: #FFF;
	text-decoration: none;
	height: 18px;
	background-image: url(menu-bk-up.jpg);
	background-repeat: repeat-x;
	font-size: 14px;
	text-align: center;
	padding-top: 8px;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 5px;
}
span   {
	background-image: url(arrow.png);
	background-repeat: no-repeat;
	position: absolute;
	top: 0px;
	right: 0px;
	display: block;
	height: 30px;
	width: 18px;
}
ul li a:hover{
	background-image: url(menu-bk-hover.jpg);
	background-repeat: no-repeat;
	background-position: center;
}
ul li ul {
	display: none;
}

Here you can see we have added a lot of new code lets go throught the new bits, ul li a this code is what we use to style each of the tabs in the menu as you can see we have added some colour some padding and the background image.

The next new bit is the span this is what allows the image of the arrow to be placed on the tabs that have sub menus attached.

Finallt the ul li a:hover this is the bit of code that makes the hover over effect happen and applying the image that was created.

Step – 4. Next we add this code.

ul li:hover ul {
    display: block;
    position:
    absolute;
    left: 100px;
    top: -2px;
}

This code is similair to what we had before but a few changes to make everything look right.

Thats it the drop down menu given a bit of depth.