hi,
i have a responsive nav menu. but i want to add a dropdown to it. can anyone help? here is my code:
> #menu {
> margin: 2px;
> }
> #menu a {
> text-decoration: none;
> }
> nav {
> display: none;
> font-family: 'Arial Black', 'Arial Bold', Gadget, sans-serif;
> text-align: center;
> background-color: green;
> border-bottom: 1px solid brown;
> }
> nav ul {
> list-style-type: none;
> padding-left: 0;
> font-size: 0;
> }
> nav li {
> display: block;
> font-size: 16px;
> color: white;
> border-bottom: 0px solid cornflowerblue;
> }
> nav a {
> display: block;
> padding: 10px;
> text-decoration: none;
> color: inherit;
> }
> nav a:hover {
> color: brown;
> border-bottom: 0px solid brown;
> }
> #navbar li ul {
> display: none;
> }
> #navbar li:hover ul {
> /*text-align: center;*/
> display: block;
> position: relative;
> vertical-align: left;
> width:75px;
> height:0px;
> float:left;
> }
> #navbar li:hover li {
> float: none;
> }
> /* styling for the dropdown child elements */
> #navbar li:hover li a {
> background-color: pink;
> border-bottom: 1px solid #fff;
> color: white;
> /*width: 575%;*/
> }
> #navbar li li a:hover {
> background-color: brown;
> }
> /*----------------- code for the minimised navigation menu*/
> @media screen and (min-width: 800px) {
> #menu {
> display: none; /*this tells the browser not to load the normal nav menu for big screens - defined above */
> }
> nav {
> display: block !important;
> }
> nav li {
> display: inline-block;
> }
> /*#navbar li:hover li a { width: 250px;}*/
>
}