CODEWITHSUNDEEP
jqueryhtmlcssdrop-down-menu
user2293381
user2293381

Reputation:

CSS Navigation drop-down issues

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

<header role="header">
    <div class="frame">
        <nav role="navigation" class="bit-1">
            <ul>
                <li> <a href="" class="brand">Tutor <span>Hive</span></a>

                </li>
                <li> <a href="#" class="cat">Categories</a>

                    <ul class="cat-drop">
                        <li> <a href="/cat/all">All Categories</a>
 <a href="/cat/math">Math</a>
 <a href="/cat/biology">Biology</a>
 <a href="/cat/sciences">Sciences</a>
 <a href="/cat/chemistry">Chemistry</a>
 <a href="/cat/physics">Physics</a>
 <a href="/cat/business">Business</a>
 <a href="/cat/health">Health & Medicine</a>
 <a href="/cat/english">English</a>
 <a href="/cat/french">French</a>
 <a href="/cat/foreign">Foreign Languages</a>
 <a href="/cat/esl">ESL</a>
 <a href="/cat/literacy">Reading & Writing</a>
 <a href="/cat/computers">Computers</a>
 <a href="/cat/arts">Visual Arts</a>
 <a href="/cat/sports">Sports & Couching</a>
 <a href="/cat/preschool">Pre-school Education</a>
 <a href="/cat/music">Music</a>
 <a href="/cat/disability">Learning Disabilities</a>
 <a href="/cat/social">Social Studies</a>
 <a href="/cat/psychology">Psychology</a>
 <a href="/cat/religion">Religion</a>

                        </li>
                    </ul>
                </li>
                <div class="right_menu">
                    <li> <a href="#region">Brampton</a>

                    </li>
                    <li class="sep"></li>
                    <li> <a href="#signin">Sign in</a>

                    </li>
                    <li> <a href="#signup" class="btn btn-signup">Sign up</a>

                    </li>
                </div>
            </ul>
        </nav>
    </div>
</header>

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/

Upvotes: 0

Views: 161

Answers (2)

Swarnamayee Mallia
Swarnamayee Mallia

Reputation: 2008

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;
}

Upvotes: 2

Manu M
Manu M

Reputation: 1064

Only thing u can do is to bring the dropdown menu nearer to the MAIN MENU using the css

 .cat-drop {
    margin-top: -50px;
 }

event hover should bind the drop down menu class also like this

 $(document).ready(function () {

 $(".cat .cat-drop").hover(

 function () {
     $(".cat-drop").show();
 },

 function () {
     $(".cat-drop").delay("400").hide();
 });

});

http://jsfiddle.net/xrjN2/3/

Upvotes: 0

Related Questions