Override a border for menu - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Menu

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Menu

Description

Override a border for menu

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">

nav {<!--from w  w  w .  j  a  v  a  2s.  c  om-->
   border-top: 1px solid grey;
   border-bottom: 3px solid black;
   width: 100%;
}
nav ul {
   width: 1056px;
   margin: 0 auto;
   text-align: center;
   width: 1056px;
}
nav ul li {
   display: inline-block;
   width: 17%;
}
nav ul li a {
   display: block;
   padding: 21px 0;
   font-size: 18px;
   text-align: center;
   letter-spacing: 1px;
   text-transform: uppercase;
}
nav a {
   border-bottom: solid transparent 3px;
}
nav a:hover {
   color: orange;
   transition: 0.2s;
   border-bottom: solid orange 3px;
}
a {
   color: black;
   text-decoration: none;
   outline: 0;
}


      </style> 
 </head> 
 <body> 
  <header> 
   <div class="top-banner"> 
    <a href="#"> <img src="https://www.java2s.com/style/demo/Safari.png"> </a> 
    <div class="top-phone"> 
     <p>Tel: 01246 295401</p> 
    </div> 
   </div> 
   <nav> 
    <ul> 
     <li> <a href="#">Home</a> </li> 
     <li> <a href="#">Products</a> </li> 
     <li> <a href="#">About</a> </li> 
     <li> <a href="#">Careers</a> </li> 
     <li> <a href="#">Contact</a> </li> 
    </ul> 
   </nav> 
  </header>  
 </body>
</html>

Related Tutorials