Centre nav bar with panel - HTML CSS CSS Widget

Description

Centre nav bar with panel
Demo Code

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
#nav-bar {<!--   w w  w  .  j a  v  a 2s .  c om-->
   margin:0px 0px 11px 0px;
   height:61px;
}

#nav-bar ul {
   margin-top:21px;
   text-align:center;
}

#nav-bar .dropdown  ul {
   text-align:left;
}

.col-md-3 a {
   padding:16px 41px 16px 41px;
   font-size:21px;
   text-decoration:none;
   text-align:center;
   color:Chartreuse;
}

#nav-bar a:hover {
   color:yellow;
}

.col-md-3 {
   display:inline;
}

.col-md-9 {
   float:none;
   margin:auto;
   left:0;
   right:0;
}

.dropdown {
   padding:0;
   margin-top:-49px;
   position:absolute;
   z-index:11;
   background-color:blue;
   box-shadow:-6px -6px 21px;
   border-radius:6px;
   height:211px;
   width:276px;
}

.dropdown ul {
   padding:0;
   margin-top:0;
}

.dropdown li {
   list-style:none;
   padding:0;
   width:311px;
}

#games2 {
   color:pink;
}

#spaced {
   margin-top:11px;
}

#first {
   padding-top:21px;
   border-top:2px solid OrangeRed;
   margin-top:23px;
}
</style> 
 </head> 
 <body> 
  <div class="row" id="nav-bar"> 
   <div class="col-md-9"> 
    <ul> 
     <li class="col-md-3 nav-btn" id="home"> <a href="index.html">Lore</a> </li> 
     <li class="col-md-3 nav-btn" id="about"> <a href="about.html">Lorem</a> </li> 
     <li class="col-md-3 nav-btn dropdown-toggle" id="games"> <a href="#">Lorem ipsum do</a> 
      <div class="dropdown"> 
       <ul> 
        <li> <a href="#" id="games2">Lorem ipsum do</a> </li> 
        <li id="first"> <a href="#">Lorem ipsum</a> </li> 
        <li id="spaced"> <a href="#">Lorem ipsum dolor si</a> </li> 
        <li id="spaced"> <a href="#">Lorem ipsum dolor sit a</a> </li> 
       </ul> 
      </div> </li> 
     <li class="col-md-3 nav-btn" id="blog"> <a href="blog.html">Lore</a> </li> 
    </ul> 
   </div> 
  </div>  
 </body>
</html>
Centre nav bar with panel - HTML CSS CSS Widget

Description

Demo Code

Related Tutorials
