Front-end Project: Drop-down menu [HTML/CSS]

In this front-end project tutorial, we'll be creating a drop-down menu with HTML and CSS.

Code for the project is here: https://github.com/codebubb/drop-down-menu-tutorial

— Follow Me —
Twitter: https://www.twitter.com/codebubb
Facebook: https://www.facebook.com/juniordevelopercentral/
Blog: https://www.juniordevelopercentral.com/
— Thanks! —

Creating a drop-down menu with HTML/CSS
------------------------------------------------------------
00:00 Introduction
00:35 HTML Markup
01:10 Styling the menu
03:00 Creating the drop down
07:51 Improvements
10:59 Making it Responsive

In this web design tutorial, we’ll be creating a drop down menu with HTML and css. There are a few options when creating a drop down HTML CSS menu and in this tutorial, we’ll create a drop down menu that opens when you hover over a particular menu item.

We’ll start off by creating some simple HTML markup (just a few ul tags to contain the menu elements). Then we’ll move on to some basic styling for the nav elements before looking at the drop down menu.

To create the drop down menu with HTML and CSS we’ll use some simple CSS rules to hide the extra ul elements which form the drop down list. When the user hovers over the parent menu item we’ll show the child ul element directly underneath the parent menu item.

Before we wrap up we’ll add some additional styling to tidy up our design and also look at how we can handle the drop down menu on on a responsive mobile view.

#frontendprojects #css Channel Handle @codebubb