Bootstrap Snippet Anirudha Bhowmik stylish menubar 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.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
    <div class="row">
     <div>
  <ul class="nav">
  <li><a href="#">Home</a></li> 
  
  
  <li><a href="#">Mobile</a>
   <ul class ="sub">
   <li><a href="#">Lenovo</a></li> 
    <li><a href="#">Nokia</a></li>
    <li><a href="#">LAVA</a></li>
    </ul>
  </li>
  
   
  <li><a href="#">Laptop</a>
  <ul class ="sub">
  <li><a href="#">HP</a></li> 
    <li><a href="#">Dell</a></li>
    <li><a href="#">Lenovo</a></li>
 </ul>
  </li> 
  
  
  <li><a href="#">Fridge</a>
  <ul class ="sub">
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
 .nav,.nav ul 
    {
        margin:0px;
        padding :0px;
        list-style :none outside none;
        height:30px;
        
        
    }
    .nav li
    {
        float :left;
        width:150px;
        position:relative;
        height:50px;
         background:#cc101c;
        display:block;
      box-shadow:10px 0px 10px 0px;
      margin-left:2px;
        
     }
    .nav a
    {
        text-decoration :none;
        height:50px;
        display:block ;
        text-align :center ;
        color:white;
          padding-top:10px;
    }
  
    .sub
    {
        left:-9999px;
        position :absolute ;
        top:-9999px;
        z-index :2;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Anirudha Bhowmik stylish menubar"
Bootstrap 4.1.1 Snippet by anirudhabhowmik

Related: See More

Questions / Comments:

"Anirudha Bhowmik stylish menubar" Bootstrap 4.1.1 Snippet by anirudhabhowmik

Related: See More

Questions / Comments:

"Anirudha Bhowmik stylish menubar"
Bootstrap 4.1.1 Snippet by anirudhabhowmik