Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

CSS Navigation drop-down issues

CSS Navigation drop-down issues

Problem

Aright so there is a problem with my drop down. Its a single dropdown yet I am not having much luck with it. If I or user where to cover over the categories the bellow "ul" would be displayed along with its child "li" and "a" elements. However it does not work that way. Hover over categories does bring up the menu, but ones you try to move the mouse to the menu it hides.

HTML Component

CSS Component

header {
    background: #fefefe;
    padding: 16px 80px;
    box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.65);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10000;
    display: block;
}
nav {
    padding: 20px 0;
    text-transform: uppercase;
    font-weight: 400;
    letter-spacing: 0.06em;
    display: block;
}
nav > ul {
    margin: 18px 0;
    list-style: none;
}
nav > ul > li {
    display: inline-block;
}
nav > ul ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
}
nav ul:after {
    content:"";
    clear: both;
    display: block;
}
nav > ul > li:hover > ul {
    display: inline;
    background: transparent;
    padding: 0px 80px;
}
nav > ul > li:hover > a.cat {
    background: #F77036;
    border-bottom: 2px solid #DD6430;
    color: #fff;
    border-radius: 3px;
    transition: all 400ms;
}
nav > ul ul > li {
    position: relative;
    list-style: none;
    margin: 16px 4px;
    min-width: 400px;
    display: block;
}
nav > ul ul > li > a {
    color: #313131;
    background: #fff;
    border-bottom: 2px solid transparent;
    padding: 15px 15px;
    text-decoration: none;
    display: inline-block;
}
nav > ul ul > li > a:hover {
    background: #4b545f;
}
nav > ul > li > a, .right_menu > li > a {
    color: #313131;
    background: none;
    border-bottom: 2px solid transparent;
    padding: 15px 15px;
    text-decoration: none;
    border-radius: 3px;
    transition: all 400ms;
    outline: none;
}
nav > ul > li > a:hover, .right_menu > li > a:hover {
    background: #F77036;
    border-bottom: 2px solid #DD6430;
    color: #fff;
    border-radius: 3px;
    transition: all 400ms;
}
nav > ul > li > a.active, .right_menu > li > a.active {
    color: #fff !important;
    font-weight: 600;
}
nav > ul > li > a.brand {
    background: #CF4920;
    border-bottom: 2px solid #BA411C;
    color: #fff;
    padding: 15px 15px;
    text-decoration: none;
    border-radius: 3px;
    transition: all 400ms;
    outline: none;
    text-align: center;
}
nav > ul > li > a.brand:hover {
    opacity: 0.8;
    transition: all 400ms;
}
nav > ul > li > a.brand > span {
    color: #fff;
    border-left: 1px solid #fff;
    padding: 0 4px;
    font-family:'Permanent Marker', cursive;
    font-weight: normal;
}
/* Navigation Right Menu */
 nav > ul > .right_menu {
    float: right;
}
nav > ul > .right_menu > li {
    list-style: none;
    display: inline-block;
}
nav > ul > .right_menu > li > a.btn-signup {
    background: #A3D29C;
    border-bottom: 2px solid #91BB8B;
    color: #fff;
    border-radius: 3px;
    transition: all 200ms;
}
nav > ul > .right_menu > li > a.btn-signup:hover {
    opacity: 0.8;
    transition: all 200ms;
}
nav > ul > .right_menu > li.sep {
    border-left: 1px solid #ddd;
    width: 1px;
    margin: -12px 2px;
    padding: 16px 0;
}

Here is a JS Fiddle for the script: http://jsfiddle.net/xrjN2/2/ And full-preview: http://jsfiddle.net/xrjN2/2/embedded/result/

Problem courtesy of: 0111010001110000

Solution

Here is the fiddle link with below corrected css.

header {
    background: #fefefe;
    padding: 16px 80px;
    box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.65);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10000;
    display: block;
}
nav {
    padding: 20px 0;
    text-transform: uppercase;
    font-weight: 400;
    letter-spacing: 0.06em;
    display: block;
}
nav ul {
    margin:18px 0;
    list-style: none;
}
nav ul li {
    float:left;
    margin-right:5px;
    /*position:relative;*/
}
nav ul li a, 
.right_menu li a {
    color: #313131;
    background: none;
    border-bottom: 2px solid transparent;
    padding: 15px 15px;
    text-decoration: none;
    border-radius: 3px;
    transition: all 400ms;
    outline: none;
    }

nav ul li a:hover, 
.right_menu li a:hover {
    background: #F77036;
    border-bottom: 2px solid #DD6430;
    color: #fff;
    border-radius: 3px;
    transition: all 400ms;
}
nav ul li:hover a.cat,
nav ul li.active a.cat {
    background: #F77036;
    border-bottom: 2px solid #DD6430;
    color: #fff;
    border-radius: 3px;
    transition: all 400ms;
}
nav ul li a.active, 
.right_menu li a.active {
    color: #fff !important;
    font-weight: 600;
}
nav ul li a.brand {
    background: #CF4920;
    border-bottom: 2px solid #BA411C;
    color: #fff;
    padding: 15px 15px;
    text-decoration: none;
    border-radius: 3px;
    transition: all 400ms;
    outline: none;
    text-align: center;
}
nav ul li a.brand:hover {
    opacity: 0.8;
    transition: all 400ms;
}
nav ul li a.brand span {
    color: #fff;
    border-left: 1px solid #fff;
    padding: 0 4px;
    font-family:'Permanent Marker', cursive;
    font-weight: normal;
}
/* Navigation Right Menu */
 nav ul .right_menu {
    float: right;
}
nav ul .right_menu li {
    list-style: none;
    display: inline-block;
}
nav ul .right_menu li a.btn-signup {
    background: #A3D29C;
    border-bottom: 2px solid #91BB8B;
    color: #fff;
    border-radius: 3px;
    transition: all 200ms;
}
nav ul .right_menu li a.btn-signup:hover {
    opacity: 0.8;
    transition: all 200ms;
}
nav ul .right_menu li.sep {
    border-left: 1px solid #ddd;
    width: 1px;
    margin: -12px 2px;
    padding: 16px 0;
}

nav ul:after {
    content:"";
    clear: both;
    display: block;
}
/*----------------Drop menu starts----------------*/
nav ul li ul {
    display:none;
    position:absolute;
    top:69px;
    left:0;
    background-color:#313131;
    width:100%;
    padding:15px;
}
nav ul li ul li a {
    color:#313131;
    background-color:#fff;
    border:0;
    border-radius:0px;
    transition: all 0ms;
    float:left;
    margin:0 5px 5px 0;
    }
nav ul li ul li a:hover {
    background:#4b545f;
    border:0;
    color: #313131;
    border-radius:0;
    transition: all 0ms;
}
nav ul li:hover ul {
    display:block;
}
Solution courtesy of: Swarnamayee Mallia

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

CSS Navigation drop-down issues

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×