As described in an earlier post, text based menus are best for SEO purposes. If you are looking for a simpler menu or want to read about the benefits of a CSS menu, please visit our previous post here. This post is demonstrating a more complicated 3-level CSS menu. Again, please do not copy and paste as some characters will not copy properly. So let’s jump right in…
First Thing we need to do is set the look of the menu. Let’s remove bullets from the list, remove margin and padding so we can dictate later, and establish the width of the list. Notice we are not setting the height so that it will automatically fit to what we need.
ul {
list-style:none;
margin:0;
padding:0;
width:180px;
border:solid 1px #000;
background-color:#fbeae4;
}
We also need to set the look of each line item. Again let’s remove all padding and margin so we can dictate later, and set the width and height.
li {
width:180px;
height:40px;
padding:0;
margin:0;
}
No lets set the look of each item when it is hovered. Let’s dictate the height and width, as well as removing the margin and padding. I know this is redundant but any misplacing will throw the whole thing off so I like to be safe. Let’s also change the background color and put a border around the item we are hovering.
li:hover {
width:180px;
height:40px;
margin:0;
padding:0px;
border:solid 1px #000;
background-color:#fecdbe;
}
Since each title within our menu will be a text link, let’s control the look of the anchor. We also want to remove the underline and dictate the color. An important step is to set the anchor to display as a block and set the width and height to 100%. If we didn’t do this then the visitor would have to hover directly over the text to activate, where visitors are familiar with hovering over the area as a button. This sets the link to the entire area as if it was a button.
li a {
margin: 0px;
display:block;
width: 100%;
height: 100%;
text-decoration:none;
color:#000;
font-size:12px;
}
We also want to do the same for the text links when they are hovered. Notice in this example we are not changing text color, but you can do so very easily as well as text size if you so desire. If changing text size, please compensate for width.
li a:hover {
margin: 0px;
display:block;
width: 100%;
height: 100%;
text-decoration:none;
color:#000;
font-size:12px;
}
Now let’s hide second and third levels until they are needed. We are doing this by setting the display to none for everything after what we are looking at.
ul ul,
ul li:hover ul ul,
ul ul li:hover ul ul
{display: none;}
Now we want to display them as block when the previous li is hovered. Please note earlier reference to displaying as a block to achieve the feel of a button.
ul li:hover ul,
ul ul li:hover ul,
ul ul ul li:hover ul
{display: block;}
Now we have the menu working but the menu items do not align as they should. Let’s dictate that now. To make the menu items align we need to bring them up and out to the right.
ul ul {
margin-top:-50px;
margin-left: 180px;
}
Now, since we removed the margin and padding from all ul and li we need to set a constant for all items. So let’s create a class to achieve this.
.indent {
padding:10px 0 0 10px;
}
And last but not least, let’s create a containing box for the menu.
.menu {
height: 450px;
width: 180px;
margin-left: 30px;
margin-top: 20px;
float:left;
}
That is the CSS side. Now let’s look at the HTML side:
<div>
<ul>
<li><a href=”link”>Level 1</a></li>
<li><a href=”link”>Level 1</a></li>
<li><a href=”#”>Level 1</a>
<ul><li><a href=”link”>Level 2</a></li>
<li><a href=”link”>Level 2</a></li>
</ul></li>
<li><a href=”#”>Level 1</a>
<ul><li><a href=”#”>Level 2</a>
<ul><li><a href=”link”>Level 3</a></li>
<li><a href=”link”>Level 3</a></li>
<li><a href=”link”>Level 3</a></li>
</ul></li>
</ul></li>
</ul></div>
Hope that works for you as well as it has worked for me. If you require any help or are looking for effective custom website design, please visit us at www.beloudonline.com.
