Codrops Playground

#cssref :hover (2) by SaraSoueidan

HTML

19
1
<div class="container">
2
  <ul class="menu">
3
    <li>Home</li>
4
    <li>Blog</li>
5
    <li class="has-submenu">About &#9662;
6
      <ul>
7
        <li>Who we Are</li>
8
        <li>What We Do</li>
9
      </ul>
10
    </li>
11
    <li>Pricing</li>
12
    <li class="has-submenu">Contact &#9662;
13
      <ul>
14
        <li>Email</li>
15
        <li>Phone</li>
16
      </ul>
17
    </li>
18
  </ul>
19
</div>

CSS

56
 
1
body {
2
  background-color: #F5F5F5;
3
  color: #555;
4
  font-size: 1.1em;
5
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
6
}
7
8
hr {
9
  margin: 50px 0;
10
}
11
12
.container {
13
  margin: 40px auto;
14
  max-width: 700px;
15
  text-align: center;
16
}
17
18
ul {
19
  text-align: left;
20
  display: inline-block;
21
  list-style: none;
22
  padding-left: 0;
23
}
24
25
.menu li {
26
  float: left;
27
  padding: .65em 1em;
28
  border: 1px solid #eee;
29
  background-color: black;
30
  color: white;
31
  cursor: pointer;
32
  -webkit-transition: all .3s;
33
  transition: all .3s;
34
  position: relative;
35
}
36
37
.menu li:hover {
38
  background-color: deepPink;
39
}
40
41
li ul {
42
  position: absolute;
43
  top: 100%;
44
  left: 0%;
45
  width: 150px;
46
  display: none;
47
  z-index: 1;
48
}
49
50
li ul li {
51
  width: 100%;
52
}
53
54
li:hover ul {
55
  display: block;
56
}

JS

1
 
1

#cssref :hover (2)

by SaraSoueidan on

Demo for the Codrops CSS Reference entry :hover

Codrops Logo Codrops Playground

Version 0.0.9 (alpha)

Codrops Playground is currently in development with many features to come, including mobile support. We are in alpha stage right now, so if you find a bug, please send a mail to playground@codrops.com or use the contact form on Codrops.

If you'd like to stay updated, follow us on Twitter @codrops. Thank you and stay tuned :)