CSS Did You Know? - November 20, 2012

13 min read

Deviation Actions

bradleysays's avatar
By
Published:
10K Views
:iconujz:
Drop-down Menus (non-dA)

This is going to be a tutorial on CSS drop-down menus. You also must understand that this tutorial uses some fairly advanced CSS which have not been explained; so new readers or beginners may have to read through the previous articles to understand this. Unfortunately the previews don't work with deviantART journal skins, so instead I have included a image of what we will create :peace:

What we will eventually create




The HTML code


Lets start with the basic HTML code for a navigation. This is quite easy to understand I guess. The <nav> code states that this is a navigation and we will be using a simple list structure in-order to get the menus.
The <ul> code states that this is a list and the <li> creates the main list items. The <ul> inside the <li> tags creates the sub lists items or in our case the sub menus.



<nav>
<ul>
<li><a href="#">Deviant</a>
<ul>
<li><a href="#">Profile</a></li>
<li><a href="#">Groups</a></li>
<li><a href="#">Settings</a>
<ul>
<li><a href="#">Upgrade</a></li>
<li><a href="#">Logout</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Messages</a></li>
<li><a href="#">Prints</a></li>
</ul>
</nav>



The full CSS code


Now that we have the basic HTML structre ready we can style each of the list CSS properties inorder to create the menu. The CSS code here is going to be a bit lengthy and might be confusing, I'll try my best to explain each bit afterwards but the truth is if you look carefully at the CSS and read it line by line its not too hard to understand. :)



nav ul ul {
display: none;
}

nav ul li:hover > ul {
display: block;
}

nav ul {
background: #617566;
-moz-box-shadow: inset 0 0 1px #fff;
-webkit-box-shadow: inset 0 0 1px #fff;
box-shadow: inset 0 0 1px #fff;
background: linear-gradient(top, #405147 0%, #617566 100%);
background: -moz-linear-gradient(top, #405147 0%, #617566 100%);
background: -webkit-linear-gradient(top, #405147 0%,#617566 100%);
border:1px solid #2b3432;
padding: 0 20px;
border-radius: 5px;
list-style: none;
position: relative;
display: inline-table;
color: #c0d0c1;
}
nav ul:after {
content: ""; clear: both; display: block;
}

nav ul li {
float: left;
}
nav ul li:hover {
background: #3c4441;
border-radius:0px;
}
nav ul li:hover a {
color: #c0d0c1;
}

nav ul li a {
display: block;
padding: 10px 40px;
color: #c0d0c1;
text-decoration: none;
font-family:Arial, Arial, Helvetica, sans-serif;
}

nav ul ul {
background: #3c4441;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
box-shadow: none;
padding: 0;
position: absolute;
top: 100%;
border:none;
}
nav ul ul li {
float: none;
position: relative;

}

nav ul ul li a {
font-size: 12px;
padding: 7px 40px;
color: #fff;
}
nav ul ul li a:hover {
background: linear-gradient(top, #518fa1 , #39798d );
background: -moz-linear-gradient(top, #518fa1 , #39798d );
background: -webkit-linear-gradient(top, #518fa1 ,#39798d );
color:white;
}

nav ul ul ul {
position: absolute; left: 100%; top:0;
border-radius:0px;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
border-top-right-radius:5px;
}



If you do not understand any of the CSS properties used above I suggest you read through the previous articles which explains all these properties and how they are used (links to previous articles can be found at the bottom).

Now let me explain the essentials of the CSS so that you can get your own drop-down menu customised :)
Firstly we are going to hide the sub-menus using some advanced selectors which will keep the <ul> within <ul> hidden and only show up when hovering over the main menu item (<li>).


nav ul ul {
display: none;
}

nav ul li:hover > ul {
display: block;
}



Now we can style the main menu using the code below: In this case it's the main preview of the menu before you click or hover or anything. You are free to style this in anyway you want in order to get the desired effect. But I suggest that you leave the display, position and line-style unchanged, as these have got nothing to do with the style but simply keep all the content in place.



nav ul {
background: #617566;
-moz-box-shadow: inset 0 0 1px #fff;
-webkit-box-shadow: inset 0 0 1px #fff;
box-shadow: inset 0 0 1px #fff;
background: linear-gradient(top, #405147 , #617566);
background: -moz-linear-gradient(top, #405147 , #617566 );
background: -webkit-linear-gradient(top, #405147 ,#617566 );
border:1px solid #2b3432;
padding: 0 20px;
border-radius: 5px;
list-style: none;
position: relative;
display: inline-table;
color: #c0d0c1;
}


The CSS gradients used here are a bit different from how you may use it on deviantART, I have repeated the background gradients a few times to make sure its compatible on all browsers. However on deviantART you only have to state: background: linear-gradient(top, color, color); and it will automatically add all the other code.

The submenu items can be styled using the CSS code below:


nav ul ul {
background: #3c4441;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
box-shadow: none;
padding: 0;
position: absolute;
top: 100%;
border:none;
}


For those of you who may wonder what the nav ul ul;its an advanced selector which allows you a style a element in a element. Here it means that you are styling the <ul> in the <ul> which is within the <nav>.

Once you have edited this CSS in your own creative style you have your very own dropdown menu! :happybounce:
I did this tutorial as someone had requested for a drop-down menu tutorial; I hope you found this useful and if you get into any problems with the CSS please do comment here or send me ( UJz ) a note.


:iconbradleysays:
CSS Resources on deviantART

In this section of the article, I will share a list of places on deviantART that have CSS resources.

  • eCSSited - The group aims to be your first choice CSS resource, collecting useful tutorials and guides. You can find all of the tutorials in their gallery here.
  • GinkgoWerkstatt - Without question, Anne has the most amount of CSS tutorials/guides in her gallery. I highly recommend checking out her tutorials folder, even if you're a CSS expert, you will more than likely learn something new.
  • deviantCSS - is another group, though not primarily for educating deviants, is still a great resource. Check out their blogs on what CSS cursors and fonts are compatible with deviantART.
  • Browsing deviantART - Looking for something in particular? There may be a tutorial that meets your needs here.
  • CSS Did You Know? - and of course, this article series! CSS Did You Know? is posted weekly, so keep an eye out for it by watching bradleysays or communityrelations. :)


:iconbradleysays:
What would you like to know?

CSS will be difficult when you're unfamiliar to it. So that's why we're writing these articles! If you have any suggestions or would like to write a section in future CSS Did You Know? articles, please note bradleysays.

If you write a section for us, you will be credited! :)

:iconexcitedlaplz:
Previous editions

Want to learn more about CSS and how to use it? We've collated all of our previous articles and put them into one document for your convenience.

Read the CSS Did You Know? archive :pointr: here!




© 2012 - 2024 bradleysays
Comments33
Join the community to add your comment. Already a deviant? Log In
IridescentStardust's avatar
I don't even know the first thing about CSS but I love to learn about it and hope that someday I can make something cool
And these articles are so well laid out and so friendly I just

I learned about them recently and go OH GOD YES I DON'T HAVE THIS ON FAV'D THAT MEANS I HAVEN'T SEEN IT
XDD :heart: Thank you so much for these