CODEWITHSUNDEEP
htmlcssdrop-down-menunavigation
rangasathish
rangasathish

Reputation: 605

how to hide navigation menu list?

i am doing website which i have drop down list like following imageenter image description here

it works fine, but while my browser size decreasing that menu will fall down like following imageenter image description here

here is my css code:

  nav ul ul {
display: none;
        }
  nav ul li:hover > ul {
    display: block;
}
nav ul {
background: #efefef; 
background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);  
background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%); 
background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%); 
box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
padding: 0 20px;
border-radius: 10px;  
list-style: none;
position: fixed;
display: inline-table;
overflow:hidden;
   }
  nav ul:after {
    content: ""; clear: both; display: block;

}
nav ul li {
float: left;

    }
nav ul li:hover {
    background: #4b545f;
    background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
    background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
    background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
}
    nav ul li:hover a {
    color: #fff;
    }

 nav ul li a {
display: block; padding: 25px 40px;
color: #757575; text-decoration: none;
}
nav ul ul {
background: #5f6975; border-radius: 0px; padding: 0;
position: absolute; top: 100%;
   }

and here is my html code: 

![enter image description here][3]

Upvotes: 0

Views: 2750

Answers (1)

chrki
chrki

Reputation: 6323

You can use CSS media queries to hide the menu when the screen resolution gets smaller. Add this to your CSS code:

@media (max-width: 640px) {

nav {
    display:none;
}

}

For mobile users, add this line to your <head> segment too:

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

Upvotes: 1

Related Questions