Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Creating dropdown-menus without JavaScript

Monday, January 30th, 2017 by Servage

dropdownDropdown menus are found on almost every website. The most common place for a dropdown is the main navigation bar, although a website can have dropdowns in almost any context. You can create a dropdown menu with JavaScript but this often makes it unnecessarily complicated. Let’s explore what it takes to make a simple navigation bar with only HTML and CSS.

HTML Structure

New designs are usually started by considering the HTML structure, so let’s do that first. The HTML of a dropdown menu is usually quite simple, and we only need three elements: <ul>, <li>, and <a>. You may also want to wrap the whole navigation bar inside a <div> or <nav> element so that would be four in total.

To create a typical navigation bar, you create an <ul> element with <li> elements inside. Each <li> element equals to one clickable link, so therefore you usually have an <a> element inside <li>. To clarify this, have a look at the following example: <ul><li><a href=”#”>Home</a></li><li><a href=”#”>Contact Us</a></li></ul>. This is all the HTML code you need for a navigation bar with two links.

Nested Dropdowns

To get a little more fancy, you can create nested dropdown menus. This means you can open another dropdown when hovering over a certain link. Doing this may sound like an advanced topic, but it is actually simple to implement. All you have to do is add a new <ul> element inside any <li> element, for example: <ul><li><a href=”#”>Home</a><ul><li><a href=”#”>About</a></li></ul></li></ul>. In this version, we have moved the “About” menu item and made it a child dropdown of “Home”.

CSS for Dropdowns

The child dropdown menus should not be visible by default. To achieve this, all <ul> elements within <ul> elements should have their display property set to “none”. Here is an example CSS code to do this: ul ul { display: none; }.

This is enough to hide the dropdowns by default, but we also have to make them become visible when a mouse enters a parent menu item. We can do this by using the direct descendant selector (>). When a <ul> element is hovered on, its child element should become visible. Here is an example implementation: ul li:hover > ul { display: inherit; }. This code makes the child dropdown inherit the display property from the parent, which means it will become visible.

This is all we need for a simple CSS dropdown. We did not have to resort to any JavaScript code, and this type of dropdown menu is easily extendable. You can add animations and customize child dropdown items to be displayed either horizontally or vertically. Feel free to try and turn this into a fully-functional CSS dropdown menu!

Creating dropdown-menus without JavaScript, 5.0 out of 5 based on 2 ratings
Categories: Tips & Tricks

Keywords: , ,

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.