Categorized | CSS, Menu, Tutorial, Wordpress

An Easy Way to Create a Dropdown Menu using css

In the post this time, You deserve for it. This post shows you how to create dropdown menus.

Dropdown menus is very important for a site that makes a lot of pages and categories.

Let us consider how to create it. Please try to follow in the steps as follows.

This way I assume we’re ceating a theme from scratch. Let’s we try it.

1. Create a new folder to contain your theme files, for example = dropdown-menu1.

2. Under dropdown-menu1  folder, create two new folders with name =css and = js


3. Copy the code below and paste it into notepad, then save with name = dropdown.css. And save into css folder.

@charset “UTF-8″;
ul.dropdown,
ul.dropdown li,
ul.dropdown ul {
list-style: none;
margin: 0;
padding: 0;
}
ul.dropdown {
position: relative;
z-index: 597;
float: left;
}
ul.dropdown li {
float: left;
line-height: 1.3em;
vertical-align: middle;
zoom: 1;
}
ul.dropdown li.hover,
ul.dropdown li:hover {
position: relative;
z-index: 599;
cursor: default;
}
ul.dropdown ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
z-index: 598;
width: 100%;
}
ul.dropdown ul li {
float: none;
}
ul.dropdown ul ul {
top: 1px;
left: 99%;
}
ul.dropdown li:hover > ul {
visibility: visible;
}

4. Copy the code below and paste it into notepad, then save with name = style.css . And save into css folder.

@charset “UTF-8″;

@import “default.css”;

/*——————————————————————-/

* @section Base Style Extension

*/

ul.dropdown a,

ul.dropdown span {

display: block;

padding: 5px 30px;

}

/*——————————————————————–/

* @section Base Style Override

*/

ul.dropdown li {

padding: 0;

}

ul.dropdown ul a,

ul.dropdown ul span { /* POI, proposal: override abstract a, span */

padding: 8px;

}

/*——————————————————————-/

* @section Base Style Reinitiate: post-override activities

*/

ul.dropdown *.dir { /* POI */

padding: 5px 30px;

}

ul.dropdown ul *.dir {

padding: 8px 30px 8px 8px;

}

/*——————————————————————-/

* @section Custom Styles

*/

ul.dropdown ul a {

width: 133px;

}

ul.dropdown ul a.dir {

width: 111px;

}

/*——————————————————————-/

* @section Support Class `open` Usage

* @source js, artificial

*

*/

ul.dropdown *.open {

background-color: #3d3d3d;

}

ul.dropdown ul *.open {

background-color: #4c4c4c;

color: #fff;

}

ul.dropdown ul ul *.open {

background-color: #595959;

color: #fff;

}

/* Override UPPER TWO definitions */

ul.dropdown a.open:hover {

background-color: #4698ca;

color: #fff;

}

ul.dropdown ul a.open:hover {

color: #fff;

}

/* Clone in CSS 2 */

ul.dropdown li:hover > *.dir {

background-color: #3d3d3d;

}

ul.dropdown ul li:hover > *.dir {

background-color: #4c4c4c;

}

ul.dropdown ul ul li:hover > *.dir {

background-color: #595959;

color: #fff;

}

/* Override UPPER TWO definitions */

ul.dropdown li:hover > a.dir:hover {

background-color: #4698ca;

color: #fff;

}

ul.dropdown ul li:hover > a.dir:hover {

color: #fff;

}

5. Copy the code below and paste it into notepad, then save with name = default.css . And save into css folder.

@charset “UTF-8″;

/*—————————————————————————/

@section Style Framework  */

/* First-level expected directory tag – li */

ul.dropdown li {

padding: 5px;

}

ul.dropdown *.dir {

padding-right: 30px;

background-image: none;

background-position: 100% 50%;

background-repeat: no-repeat;

}

/* Non-first level */

ul.dropdown ul *.dir {

padding-right: 15px;

background-image: url(images/nav-arrow-right.png);

background-position: 100% 50%;

background-repeat: no-repeat;

}

ul.dropdown ul ul *.dir {

background-image: url(images/nav-arrow-right2.png);

}

/* Components override */

ul.dropdown-vertical *.dir {

background-image: url(images/nav-arrow-right.png);

}

ul.dropdown-vertical-rtl *.dir {

padding-right: 15px;

background-image: url(images/nav-arrow-left.png);

background-position: 0 50%;

}

/*————————————————————————/

@section Base Drop-Down Styling  */

/* ALL LEVELS (incl. first) */

ul.dropdown {

font: bold 17px/normal Arial, Helvetica, sans-serif;

}

ul.dropdown li {

background-color: #333;

color: #fff;

}

ul.dropdown li.hover,

ul.dropdown li:hover {

}

/* Links */

ul.dropdown a:link,

ul.dropdown a:visited { color: #fff; text-decoration: none;}

ul.dropdown a:hover {

border-top-color: #5db1e0 !important;

border-left-color: #5db1e0;

background-color: #4498c7;

color: #fff;

}

ul.dropdown ul a.dir:hover { /* proposal */

background-color: #4698ca;

background-image: url(images/comnav-arrowon.png);

color: #fff;

}

ul.dropdown a:active {

background: #058acf url(images/nav-sub-press.png) 0 0 repeat-x !important;

color: #fff;

}

/* NON-FIRST LEVEL */

ul.dropdown ul {

left: auto;

right: 0;

width: 150px;

margin-top: -1px;

border-top: 1px solid #1a1a1a;

border-left: solid 1px #4c4c4c;

font: bold 11px/1em Tahoma, Geneva, Verdana, sans-serif;

}

ul.dropdown ul li {

background-color: #3a3a3a;

}

ul.dropdown ul ul {

top: 0;

right: auto;

left: 100%;

margin-top: 0;

border-top: none;

border-left: none;

font-weight: normal;

}

ul.dropdown ul ul li {

background-color: #4c4c4c;

}

ul.dropdown ul ul ul li {

background-color: #595959;

}

/* Mixed */

ul.dropdown li a,

ul.dropdown *.dir {

border-style: solid;

border-width: 1px;

border-color: #404040 #1a1a1a #1a1a1a #505050;

}

ul.dropdown ul li a,

ul.dropdown ul *.dir { border-color: #4a4a4a #242424 #242424; border-left: none; }

ul.dropdown ul ul li a,

ul.dropdown ul ul *.dir { border-color: #595959 #333 #333; }

ul.dropdown ul ul ul li a,

ul.dropdown ul ul ul *.dir { border-color: #767676 #404040 #404040; }

6.. Copy the code below and paste it into notepad, then save with name = index.html (for testing, if it’s ok you can change to be index.php later) . And save into under dropdown-menu1  folder.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” lang=”en”>

<head>

<title>Black CSS Drop-Down Menu</title>

<!– Start –>

<link href=”css/dropdown.css” media=”screen” rel=”stylesheet” type=”text/css” />

<link href=”css/style.css” media=”screen” rel=”stylesheet” type=”text/css” />

<!–[if lt IE 7]>

<script type=”text/javascript” src=”js/jquery.js”></script>

<script type=”text/javascript” src=”js/jquery.dropdown.js”></script>

<![endif]–>

<!– / END –>

</head>

<body>

<h1>Black CSS Drop-Down Menu Theme</h1>

<!– Beginning of compulsory code below –>

<ul id=”nav” class=”dropdown dropdown-horizontal”>

<li><a href=”./”>Home</a></li>

<li><a href=”./”>OS</a>

<ul>

<li><a href=”./”>Windows</a>

<ul>

<li><a href=”./”>Windows1</a></li>

<li><a href=”./”>Windows2</a></li>

<li><a href=”./”>Windows3</a></li>

<li><a href=”./”>Windows4</a></li>

<li><a href=”./”>Windows5</a></li>

<li><a href=”./”>Windows6</a></li>

<li><a href=”./”>Windows7</a></li>

</ul>

</li>

<li><a href=”#”>Linux</a>

<ul>

<li><a href=”./”>Redhat</a></li>

<li><a href=”./”>Ubuntu</a></li>

<li><a href=”./”>Centos</a></li>

<li><a href=”./”>Redhat2</a></li>

<li><a href=”./”>Ubuntu2</a></li>

<li><a href=”./”>Centos2</a></li>

<li><a href=”./”>Redhat3</a></li>

<li><a href=”./”>Ubuntu3</a></li>

<li><a href=”./”>Centos3</a></li>

</ul>

</li>

<li><a href=”./”>Unix</a></li>

<li><a href=”./”>Mac</a>

<ul>

<li><a href=”./”>10</a></li>

<li><a href=”./”>11</a></li>

</ul>

</li>

<li><a href=”./”>Mobile</a></li>

</ul>

</li>

<li<a href=”./”>Tutorial</a>

<ul>

<li><a href=”./”>Wordpress</a></li>

<li><a href=”./”>Blog</a></li>

<li><a href=”./”>Paypal</a></li>

<li><a href=”./”>PDF</a></li>

<li><a href=”./”

target=”_blank”>Office</a></li>

</ul>

</li>

<li><a href=”./”>Ebook</a></li>

<li><a href=”#”>Free Download</a></span></li>

</ul>

<!– / END –>

</body>

</html>

Finishhhhh…!!

For Online Demo,

For Download All File Above,

If you want to apply on your site for pages and category, you can see THIS POST.

One Response to “An Easy Way to Create a Dropdown Menu using css”

  1. webdesigner says:

    of course, we should use not just css…
    but javascript too :)

Trackbacks/Pingbacks


Leave a Reply

*

Our Partner

Our Partner

Update ESET Nod32

Update 11322, 15 Mar 2015

Update 15 Mar 2015

~ For Eset All Version, OS XP, Vista dan Win7