How to Create an Attractive Dropdown Blogroll with CSS

Dropdown menus are great ways to use navigation on your site without cluttering up the page. They can get annoying though, because they can be really hard to style. Most people would use JavaScript, but we’re going to use CSS for flexibility, speed, and compatibility. Unfortunately, this method will not work with IE6, but will still be more compatible than JavaScript. (If you’d like to see the final product of this tutorial check out this page.)

1-Create the Image

We won’t be using codes in our HTML, so it’s not going to look anything like a dropdown. The image you create can look however you want it. You’ll probably want to include an arrow to indicate that this is a dropdown menu. It can be whatever height you want, but it must be the width of your dropdown.

This is what is used in the example:

 

pbd-css-blogroll-rollover-img

 

2-Set Up the HTML

We’re going to be using simple HTML that you can later style however you want. We need an unordered list to store all the links. We will then precede that with a paragraph (or ‘h’ tag if you want) to title it, and finally, we’ll wrap the whole thing in a div.

The final markup should look like this:

<div class="blogroll">
<p>Blogroll</p>
<ul>
<li><a href="http://www.site.com/">Example Site</a></li>
<li><a href="http://www.site.com/">Example Site</a></li> 
<li><a href="http://www.site.com/">Example Site</a></li>
</ul>
</div>

You may want to use WordPress’s wp_list_bookmarks(); function to use the built in linkroll instead. You can do it either way.

3-Style the Menu

Now we’re going to just design the dropdown as it will be when it’s dropped down and forget about the functionality.

First we need to replace the paragraph text with the image we created earlier.

.blogroll p {
background:url(pbd-css-blogroll-rollover-img.png) 0 0 no-repeat;
width:274px;
height:21px;
text-indent:-9999px;
}

We apply the image as the background first. We then set the dimensions of the paragraph to be the same as those of the image and we use text-indent to hide blogroll1the “Blogroll” text from our HTML.

Next we have to style the list. Because our HTML is so simple, it should be easy styling this however you want. For example, you can add a background to the list or use other types of HTML.

All we’re doing is setting up a plain list of all the links and changing the background color of each link on rollover. The CSS is as follows:

.blogroll ul {
width:272px;
background:#214868;
border:1px solid #48758d;
border-width:0 1px 1px 1px;
padding:0;
list-style:none;
}

blogroll ul a:link, .blogroll ul a:visited {
display:block;
width:252px;
padding:2px 10px 2px 10px;
text-decoration:none;
color:#93b8d3;
font-weight:normal;
}

.blogroll ul a:hover, .blogroll ul a:active {background:#366386;}

Right now, we have a space between our image and our dropdown. We can remove this by amending the CSS with:

.blogroll p, .blogroll ul {margin:0;}

4-Create the Dropdown

Now to create the dropdown. We’re going to use the div to hide everything other than the image until the user’s mouse is over it.

To start with, let’s hide everything other than the image.

.blogroll {
width:274px;
height:21px;
overflow:hidden;
}

The we just use the :hover pseudo-class to allow the rest to be shown when the user scrolls over the image.

.blogroll:hover {overflow:visible;}

5-Fix the Pushing-Down-Content Issue

The rollover now works, but the menu pushes all the content beneath it down.

We’re going to fix that by using absolute positioning to put the dropdown menu above all the other content.

The first step is to amend the blogroll div to be positioned relatively, so that the dropdown’s absolute positioning can be anchored by the div:

.blogroll {position:relative;}

Now use CSS to position the menu right under the image:

.blogroll ul {
position:absolute;
left:0;
top:21px;
}

6-Issues with IE6

This menu won’t work with IE6 because it doesn’t support :hover on anything other than links.

There are some workarounds available using JavaScript. You could use conditional comments so that IE6 users use JavaScript to see the menu. Or you could try to teach IE6 to use :hover properly.

Since the whole idea of all this was to avoid extra scripts, it might just be best to simply hide the menu. Just use this code:

.blogroll {display:none;}
html>body .blogroll {display:block;}

(Info from: Pro Blog Design)