You should try figuring it out out yourself before posting a question here. StackOverflow is about helping with programming questions, not doing programming homework for you. With that said, you're new and this is a pretty simple thing to do, so I decided to post a sliding CSS dropdown that I've made for you. It should be a good place to start.
On a desktop, the dropdown is activated by hovering. On iOS it's activated when you tap once.
Here's a live preview.
html
css
ul { list-style: none; padding: 0; margin: 0;}
/* Style */
a {
color: #000;
display: block;
font-size: 14px;
text-decoration: none;
font-family: 'Open Sans', serif;
}
nav {
width: 100%;
height: 45px;
}
#nav ul li:hover,
#nav > li:hover {
background: #2e98d5;
}
#nav ul > li:hover > a,
#nav > li:hover > a {
color: #fff;
}
#nav > li {
float: left;
position: relative;
}
#nav > li > a {
padding: 13px 30px;
height: 20px;
}
/************
This transition is for iOS :hover doubleclick.
http://www.nczonline.net/blog/2012/07/05/ios-has-a-hover-problem/
************/
#nav > li:hover ul {
visibility: visible;
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s;
}
#nav ul {
top: 46px;
width: 170px;
position: absolute;
background-color: #eee;
z-index: 1;
visibility: hidden;
-webkit-transition-property: visibility;
-moz-transition-property: visibility;
-o-transition-property: visibility;
transition-property: visibility;
-webkit-transition-duration: 0s;
-moz-transition-duration: 0s;
-o-transition-duration: .0s;
transition-duration: 0s;
-webkit-transition-delay: .25s;
-moz-transition-delay: .25s;
-o-transition-delay: .25s;
transition-delay: .25s;
}
/* The slide */
#nav li li a {
height: 0px;
padding: 0px 30px;
opacity: 0;
-webkit-transition-property: height, padding, opacity;
-moz-transition-property: height, padding, opacity;
-o-transition-property: height, padding, opacity;
transition-property: height, padding, opacity;
-webkit-transition-duration: .25s, .25s, .08s;
-moz-transition-duration: .25s, .25s, .08s;
-o-transition-duration: .25s, .25s, .08s;
transition-duration: .25s, .25s, .08s;
-webkit-transition-delay: 0s, 0s, .05s;
-moz-transition-delay: 0s, 0s, .05s;
-o-transition-delay: 0s, 0s, .05s;
transition-delay: 0s, 0s, .05s;
}
#nav li:hover li a {
height: 20px;
padding: 13px 30px;
opacity: 1;
}
