
Dropdown menus provide a nice hierarchical view of your menu structure, allowing you to help narrow the visitors focus and find exactly what they're looking for and reducing navigation clutter. Today, we'll take a look at how to create a CSS dropdown menu. This is a very simple implementation that is ideal for just about any situation.

This is the same CSS dropdown that is used here on CSSForge, minus the jQuery slide out animation. If you decide to add jQuery animation, this also serves as a graceful fallback for slow connections and terrible browsers.

Without further ado:

<p data-height="300" data-theme-id="515" data-slug-hash="iwyFs" data-default-tab="css,result" data-user="jonbellah" data-embed-version="2" data-pen-title="Simple CSS Dropdown Menu" class="codepen">See the Pen <a href="https://codepen.io/jonbellah/pen/iwyFs/">Simple CSS Dropdown Menu</a> by Jon Bellah (<a href="https://codepen.io/jonbellah">@jonbellah</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>

### The HTML

There's not a lot about the HTML that's special. The main thing to note is that we've nested the sub-menu `ul` inside the `li` where we want it to drop from, in this case the Snippets `li`. This is the same way that WordPress nests menu and sub-menu items; so if you're using the built-in WordPress menu manager, then you don't need to make any changes to your HTML.

### The CSS

There are a few important parts of our CSS. The first is `.site-navigation ul li ul { visibility: hidden; }`. This hides our dropdown menu by default. The second important piece of CSS is the `.site-navigation ul li:hover > ul { visibility: visible; }`. This makes our dropdown menu display whenever the visitor hovers over the associated `li`. To ensure that our dropdown menu displays under the correct menu item, we set our `.site-navigation li { position: relative; }`, so that we can `positon:absolute;` the dropdown `ul`

How to Create a Simple CSS Dropdown Menu


Impostor syndrome is a psychological phenomenon where people aren't able to internalize or accept their accomplishments. Regardless of evidence to the contrary, there's always a feeling that you don't quite belong or that you've fooled everyone into believing you're smarter than you actually are. You're an impostor. A fraud.

So let's skip the Wikipedia definition and get to the point: I've struggled with impostor syndrome. A lot.

A prime example of this was the first iteration of [CSSForge](http://www.cssforge.com). I wrote so few articles because I was always afraid of writing the wrong thing, making myself seem incompetent. So it sat there collecting dust.

Then, a couple of months ago, Sara Wachter-Boettcher wrote an article titled "[The Imperfectionist](http://sarawb.com/2013/06/24/imperfectionist/)". It was one of those moments where everything sort of clicked.

I wasn't the only one who struggled with impostor syndrome. Sara's article was a turning point for me. That day, I decided that I was going to cut down on the number of projects that I was working on and focus on shipping and iterating. I realized that it was time for me to put my work out there and stop being so paralyzed by the thought of "what if they think I'm stupid?"

Six days later, I [relaunched](http://www.cssforge.com/2013/06/the-redesign-relaunch-and-whats-to-come/) CSSForge with a brand new design and renewed vigor.

In the last month and a half, I have posted 16 articles on CSSForge, gotten my [first speaking engagement](http://www.jonbellah.com/2013/08/front-porch/), redesigned my portfolio, shipped a couple client projects, and have just generally felt better about the work that I'm putting out there.

And you know what? No one has called me out or shamed me for not knowing things.

I won't go so far as to say I'm in the clear now; in fact, I'm sure that I will struggle more in the future. But for now, I'm enjoying having the monkey off my back for a bit.


Impostor Syndrome


Todays snippet is a quick and easy one. While developing a new site for the agency where I work, I decided to display a random set of gifs on the 404 page. There are 7 images and I only wanted to display one per page load.

There are a number of ways to go about it, and the methods get increasingly more complicated when you're wanting to randomly load ads and such, but for this purpose a simple PHP `rand()` does the trick.

This is it looks like:

```html
<img src="http://www.example.com/images/image-<?php echo rand(1,7); ?>.jpg">
```

In order to get this to work, you'll want to name your images: image-1.jpg, image-2.jpg, image-3.jpg, etc.

When the page loads, the PHP rand() will echo a random number (in this case, a number between 1 and 7), completing the URL and thus displaying the corresponding image.

Give it a try in your projects and let me know what you think!

Articles

How to Create a Simple CSS Dropdown Menu

Impostor Syndrome

Load Random Images with PHP

How to Create a Simple CSS Dropdown Menu

Impostor Syndrome

Load Random Images with PHP

Like what you've read?