ThemeKings Custom Web Design
"Old School Web Design Community Forum"

Author Topic: Swift Horizontal Drop Down Menu  (Read 244 times)

Offline Swift

  • Administrator
  • Newbie
  • *****
  • Posts: 16
  • Web Developer
    • View Profile
    • ThemeKings
Swift Horizontal Drop Down Menu
« on: November 05, 2020, 05:58:36 PM »
View Demo Of This Menu Here

Here is the CSS needed to create this menu:
Download CSS File Here

Code: [Select]
/* Some stylesheet reset */.nav, .nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
    line-height: 1;
}

/* The main container */
.nav {
    /* Layout and positioning */
    display: block;
    position: relative;
    height: 34px;
    width: 750px; /* CHANGE this if you want another width or remove it if you want the width of the container */
    border-radius: 3px;
    border: 1px solid #c1c1c1;

    /* Background and effects */
    background: #eaeaea; /* Background for IE9 and older browsers */
    background: -webkit-linear-gradient(bottom, #e1e1e1, #f4f4f4); /* Background for Chrome & Safari */
    background: -moz-linear-gradient(bottom, #e1e1e1, #f4f4f4); /* Background for Firefox */
    background: -o-linear-gradient(bottom, #e1e1e1, #f4f4f4); /* Background for Opera */
    background: -ms-linear-gradient(bottom, #e1e1e1, #f4f4f4); /* Background for Internet Explorer 10 */
    box-shadow: inset 0 1px 0 #fff;
}

.nav>li {
    display: block;
    position: relative;
    float: left;
    margin: 0;
    padding: 0 1px 0 0;
}

/* The main navigation links */
.nav>li>a {
    /* Layout */
    display: block;
    padding: 11px 20px;

    /* Typography */
    font-family: Helvetica, Arial, sans-serif;
    font-size: 12px;
    font-weight: normal;
    text-decoration: none;
    color: #9a9a9a;
    text-shadow: 0 1px 0 #fff;

    /* Effects */
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -ms-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}

/* The hover state of the navigation links */
.nav>li>a:hover, .nav>li:hover>a {
    background: #fff;
    background: rgba(255, 255, 255, .6);
    color: #999;
}

.nav>li:first-child>a {
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
}

.nav>.dropdown>a {
    padding-right: 26px;
}

/* The arrow indicating a dropdown menu */
.nav>.dropdown>a::after {
     content: "";
     position: absolute;
     top: 14px;
     right: 11px;
     width: 4px;
     height: 4px;
     border-bottom: 1px solid #9a9a9a;
     border-right: 1px solid #9a9a9a;
     -webkit-transform: rotate(45deg);
     -ms-transform: rotate(45deg);
     -moz-transform: rotate(45deg);
     -o-transform: rotate(45deg);
    }

/* Changing the color of the arrow on hover */
.nav>.dropdown>a:hover::after, .nav>.dropdown:hover>a::after {
    border-color: #999;
}

.nav ul {
    position: relative;
    position: absolute;
    left: -9999px;
    display: block;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
}

/* Level 1 submenus */
.nav>li>ul {
    padding-top: 0px;
    z-index: 99;
    border-top: 1px solid #c9c9c9;
    top: 34px;
}

/* Making the level 1 submenu to appear on hover */
.nav>li:hover>ul {
    left: -1px;
}

/* Level 2+ submenus */
.nav ul ul {
    left: -9999px;
    top: 0px;
    z-index: 999;
}

/* Making the level 2+ submenu to appear on hover */
.nav ul>li:hover>ul {
    left: 120px;
    top: -1px;
}

/* The submenu link containers */
.nav ul li {
    position: relative;
    display: block;
    border-left: 1px solid #c1c1c1;
    border-right: 1px solid #c1c1c1;

    /* Creating the slide effect. The list elements which contain the links have 0 height. On hover, they will expand */
    height: 0px;
    -webkit-transition: height .3s;
    -moz-transition: height .3s;
    -o-transition: height .3s;
    -ms-transition: height .3s;
}

/* Expanding the list elements which contain the links */
.nav li:hover>ul>li {
    height: 25px;
}

.nav ul li:hover>ul>li:first-child {
    height: 26px;
}

/* The links of the submenus */
.nav ul li a {
    /* Layout */
    display: block;
    width: 90px;
    padding: 6px 10px 6px 20px;
    border-bottom: 1px solid #e1e1e1;

    /* Typography */
    font-size: 12px;
    color: #a6a6a6;
    font-family: Helvetica, Arial, sans-serif;
    text-decoration: none;
   
    /* Background & effects */
    background: #fff;
    -webkit-transition: background .3s;
    -moz-transition: background .3s;
    -ms-transition: background .3s;
    -o-transition: background .3s;
    transition: background .3s;
}

/* The hover state of the links */
.nav ul li>a:hover, .nav ul li:hover>a {
    background: #e9e9e9;
    color: #a1a1a1;
}

.nav ul ul>li:first-child>a {
    border-top: 1px solid #c1c1c1;
}

.nav ul>li:last-child>a {
    border-bottom: 1px solid #c1c1c1;
}


/* The arrow indicating a level 2+ submenu */
.nav ul>.dropdown>a::after {
    content: "";
     position: absolute;
     top: 10px;
     right: 8px;
     width: 4px;
     height: 4px;
     border-bottom: 1px solid #a6a6a6;
     border-right: 1px solid #a6a6a6;
     -webkit-transform: rotate(-45deg);
     -ms-transform: rotate(-45deg);
     -moz-transform: rotate(-45deg);
     -o-transform: rotate(-45deg);
}

.nav ul>.dropdown:hover>a::after, .nav ul>.dropdown>a:hover::after {
    border-color: #a1a1a1;
}

 And here is the HTML code placed obviously within the body tags:
Code: [Select]
<ul class="nav">
    <li><a href="#">Home[/url]</li>
    <li class="dropdown"><a href="#">Link 2[/url]
    <ul>
        <li><a href="#">Level 1[/url]</li>
        <li><a href="#">Level 1[/url]</li>
        <li class="dropdown"><a href="#">Level 1[/url]
        <ul>
            <li><a href="#">Level 2[/url]</li>
            <li><a href="#">Level 2[/url]</li>
            <li><a href="#">Level 2[/url]</li>
            <li class="dropdown"><a href="#">Level 2[/url]
            <ul>
                <li><a href="#">Level 3[/url]</li>
                <li><a href="#">Level 3[/url]</li>
                <li><a href="#">Level 3[/url]</li>
                <li><a href="#">Level 3[/url]</li>
                <li><a href="#">Level 3[/url]</li>
            </ul>
            </li>
            <li><a href="#">Level 2[/url]</li>
        </ul>
        </li>
        <li><a href="#">Level 1[/url]</li>
        <li><a href="#">Level 1[/url]</li>
    </ul>
    </li>
    <li><a href="#">Link 2[/url]</li>
    <li><a href="#">Link 3[/url]</li>
    <li><a href="#">Link 4[/url]</li>
    <li><a href="#">Link 5[/url]</li>
</ul>


And thatís it! Simple to use, and works on every browser. Every browser looks and works just fine with this menu. If you have any comments about the use or revisions on this menu please post a comment below. Thanks again!  ;)
« Last Edit: November 05, 2020, 06:18:32 PM by Swift »
Todd Swift
Web Developer