Bootstrap Snippet Drop Down Menu 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="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.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 ---------->
<div class="wrapper">
<!--Navigation Start-->
<nav class="navigation">
  <ul>
    <li class="active">
      <a href="#">Home</a>
      <ul class="children sub-menu">
        <li>
          <a href="#">home 2</a>
        </li>
        <li>
          <a href="#">home 3</a>
        </li>
        <li>
          <a href="#">home 4</a>
        </li>
      </ul>
    </li>
    <li>
      <a href="#">About Us</a>
    </li>
    <li>
      <a href="">Blog</a>
      <ul class="children sub-menu">
        <li>
          <a href="#">blog-detail</a>
        </li>
        <li>
          <a href="#">blog</a>
        </li>
        <li>
          <a href="#">blog-medium</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
.wrapper{
  float:left;
  width:100%;
  min-height:250px;
}
.navigation{
    float: left;
    width: 100%;
    text-align: center;
}
.navigation ul{
    margin: 0;
    padding: 0;
    float: none;
    width: auto;
    list-style: none;
    display: inline-block;
}
.navigation ul li{
    float: left;
    width: auto;
    margin-right: 60px;
    position: relative;
}
.navigation ul li:last-child{
    margin: 0;
}
.navigation ul li a{
    float: left;
    width: 100%;
    color: #333;
    padding: 16px 0;
    font-size: 16px;
    line-height: normal;
    text-decoration:none;
    box-sizing:border-box;
    text-transform: uppercase;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Drop Down Menu"
Bootstrap 4.0.0 Snippet by MuhammadBilalMughal

Related: See More

Questions / Comments:

"Drop Down Menu" Bootstrap 4.0.0 Snippet by MuhammadBilalMughal

Related: See More

Questions / Comments:

"Drop Down Menu"
Bootstrap 4.0.0 Snippet by MuhammadBilalMughal