CSS: Basic Drop Down Menu

This is the basic of creating horizontal drop-down menu like mine above. You can use pure CSS or using the help of jQuery. The above static menu is using pure CSS (and some CSS3 fx). The floating menu above is also positioned using CSS. I just use little jQuery script to control the appearance.

Here's a little demo of the basic horizontal list, with some simple styling.

---

• option 1
• option 2
• option 3

---

CSS
I put explanation comments on most lines.

<style>

#menu ul {
/*this line is to hide the style of the list, bullet - disc - etc*/
    list-style-type:none;

/*this line eliminates the space between the whole list and other HTML elements*/
    padding:0;

/*makes nothing goes beyond the list area*/
    overflow:hidden;}

#menu li {
/*this what makes the list horizontal*/
    display:inline-block;

  /*the looks of the list wrapper and fonts*/
    background:#ffb700;
    margin:5px;
    padding:20px 40px;
    font-family:Courier;
    font-weight:800;
    font-size:1.2em;}

#menu li:hover
/*the transition when the list gets hovered*/
 { background:#ff8800;
    box-shadow:0 1px 2px 1px #c7c7c7;}

#menu li a
{/*to prevent the default look of text link*/
    text-decoration:none;

/*the color of the text link*/
    color:black;}

</style>

HTML

<ul id="menu">
  <li><a href="#"> option 1 </a></li>
  <li><a href="#"> option 2 </a></li>
  <li><a href="#"> option 3 </a></li>
</ul>

Result can be seen above
That's it! You can substitute the href source and the word option (1,2,3) inside the <li> to be actual url and title to your other posts or external sites. And then, probably add some more content on the list.

FYI, I didn't put fixed width and height on the list. It will expand or shrink (horizontally/vertically) according to the text content inside the list. You can try it out yourself.

Update

You can see other simple demos I made earlier, the very basic, pure CSS : #1 (without comments/explanation) & #2 (with many explanations)

---

I simplified the tutorial from Chris Spooner. He has written a great tutorial on that.

THE LOOK OF DEMO #1

Check out this Pen!

THE LOOK OF DEMO#2

Check out this Pen!

Thanks for visiting!