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:


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


.navbar > ul  {
    display: none;

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

ul .navbar {

.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;
    padding-top: 18px;
    padding-bottom: 18px;
    padding-left: 25px;
    padding-right: 25px;

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


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>
                <li><a href="#home">Home</a></li>
                <li><a href="#news">News</a></li>

Also make the below css change

.navbar > ul  {
    display: none;

change the above to this

.navbar ul 
  display: none;


    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 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?