Bootstrap Snippet pure css different menu hover effect using HTML CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
    <nav>
       <ul>
         <li class="parent-1">
           <a href="#">Menu style-1</a>
           <ul class="sub-menu-1">
             <li><a href="#">Sub Item 1</a></li>
             <li><a href="#">Sub Item 2</a></li>
             <li><a href="#">Sub Item 3</a></li>
             <li><a href="#">Sub Item 4</a></li>
           </ul>
         </li>
         <li class="parent-2"><a href="#">Menu style 2</a>
           <ul class="sub-menu-2">
             <li><a href="#">Sub Item 1</a></li>
             <li><a href="#">Sub Item 2</a></li>
             <li><a href="#">Sub Item 3</a></li>
             <li><a href="#">Sub Item 4</a></li>
             <li><a href="#">Sub Item 5</a></li>
             <li><a href="#">Sub Item 6</a></li>
           </ul>
         </li>
         <li class="parent-3"><a href="#">Menu style 3</a>
           <ul class="sub-menu-3">
             <li><a href="#">Sub Item 1</a></li>
             <li><a href="#">Sub Item 2</a></li>
             <li><a href="#">Sub Item 3</a></li>
             <li><a href="#">Sub Item 4</a></li>
             <li><a href="#">Sub Item 5</a></li>
             <li><a href="#">Sub Item 6</a></li>
           </ul>
         </li>
         <li class="parent-4"><a href="#">Menu style 4</a>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.parent-1,
.parent-2,
.parent-3,
.parent-4,
.parent-5,
.parent-6
{
    position:relative;
}
/* style 1 */
.sub-menu-1{
    visibility:hidden;
    /* hide sub-menu */
    position:absolute;
    top:100%;
    left: 0;
    width:100%;
    opacity:0;
    transform: translateY(-3em);
    z-index:-1;
    transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s;
}
.parent-1:hover .sub-menu-1{
    visibility: visible;
    /* show submenu */
    opacity:1;
    z-index:1;
    transform: translateY(0%);
    transition-delay: 0s,0s,0.3s;
    
}
/* style 2 */
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"pure css different menu hover effect "
Bootstrap 3.0.0 Snippet by foysal991

Related: See More

Questions / Comments:

"pure css different menu hover effect " Bootstrap 3.0.0 Snippet by foysal991

Related: See More

Questions / Comments:

"pure css different menu hover effect "
Bootstrap 3.0.0 Snippet by foysal991