How to Make a Dropdown In a Navbar Using CSS?


Tags: html,css

Problem :

The problem I am having is that the Dropdown Does'nt Display on Hover.

Please can anyone tell me how can i make a dropdown using CSS.
I Have The Following Code:

HTML:

<nav>
    <ul class="navbar">
        <li><a href="#home">Home</a></li>
        <li><a href="#news">News</a></li>
            <ul>
                <li><a href="#home">Home</a></li>
                <li><a href="#news">News</a></li>
            </ul>
        <li><a href="#contact">Contact</a></li>
        <li><a href="#about">About</a></li>
    </ul>
</nav>

CSS:

.navbar > ul  {
    display: none;
}

.navbar > li:hover > ul {
    display: block; 
}

ul .navbar {
    list-style-type:none;
    overflow:hidden;
}

.navbar > li  a {
    color: white;
    text-decoration: none;
    font-family: 'Comic Sans Ms';
}

.navbar > li {
    background: -webkit-linear-gradient(gray,black);
    width: 100px;
    display: block;
    position: relative;
    float: left;
    text-align:center;
    padding-top: 18px;
    padding-bottom: 18px;
    padding-left: 25px;
    padding-right: 25px;
}

.navbar > li:hover {
    cursor: pointer;
    background: gray;
}

JSFiddle:

http://jsfiddle.net/aY5L6/



Solution :

Change your nested list structure. Move the closing li tag of the item News after the sub ul list like below.

<li><a href="#news">News</a></li>

Change this to below

<li><a href="#news">News</a>
            <ul>
                <li><a href="#home">Home</a></li>
                <li><a href="#news">News</a></li>
            </ul>
</li>

Also make the below css change

.navbar > ul  {
    display: none;
}

change the above to this

.navbar ul 
{
  display: none;
}

DEMO


    CSS Howto..

    How to let the user choose a page number?

    How to apply a line wrap/continuation style and code formatting with css

    How can I fix the indentation in a facebook like-box?

    How to create new
  • not affected by SOME css styles
  • how to fix closure compiler error on css({ float: 'left' }) [duplicate]

    How to prevent content from being pushed down on appearance of floating menu in mobile display

    How to render my dialog on top?

    CSS how to target 2 attributes?

    How to add number to current CSS width with jQuery

    How do I correctly fromat this div's contents?

    How to extend a wrapped element background both left and right with different color?

    How to implement Star Rating in Intel XDK by App Framework 3.0

    How to position a CSS triangle using ::after?

    CSS column header with img - how to dock img/div to the right?

    How to exclude an Element (via ID) in CSS

    how to give css only the 1st label span?

    how to set a div to the bottom side in asp.net css

    How to make div scroll down with a page once it reaches top of page?

    How do I remove the white space around my html forms?

    How can I wrap content around a UL CSS Menu so content is seamless?

    Show notification counter with bootstrap

    efficient way to show an beside each instance

    How to find absolute path to @font-face fonts with Firebug?

    How to keep two input box side by side in html using CSS?

    how to creating a separator line which is always in the middle (center)

    Is there a CSS style guide for large existing projects. Or how could I optimize the css for a large project [closed]

    jQuery - How to make images overlap when fading in and out?

    How to center images vertically these divs?

    How can I set CSS only for specific IE browsers?

    How to color every second row using jQuery when the number of element in a row is variable?