Navigation bar buttons stack on top of each other - HTML CSS CSS Form

HTML CSS examples for CSS Form:input button style

  1. HOME
  2. HTML CSS
  3. CSS Form
  4. input button style

Description

Navigation bar buttons stack on top of each other

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">

body {<!--from ww w . ja  v a2  s . com-->
   background-color: #FFFFFF;
   margin: 0px;
   padding: 0px;
   text-align: center;
}
header img {
   display: block;
   margin: 0 auto;
}
ul {
   list-style-type: none;
   width: 978px;
   margin: 0;
   padding: 0;
   overflow: hidden;
   display: inline-block;
   border: 5px solid #0009bc;
}
li {
   float: left;
}
a:link, a:visited {
   display: block;
   width: 139px;
   font-weight: bold;
   color: #20dbd4;
   background-color: #000000;
   text-align: center;
   padding: 12px;
   text-decoration: underline;
   text-transform: uppercase;
}
a:hover, a:active {
   background-color: #20dbd4;
   color: #000000;
}


      </style> 
 </head> 
 <body> 
  <header> 
   <img src="https://www.java2s.com/style/demo/Firefox.png" alt="Grid Design" style="width: 987px; height: 243px;"> 
  </header> 
  <nav> 
   <ul> 
    <li> <a href="#home">home</a> </li> 
    <li> <a href="#news">news</a> </li> 
    <li> <a href="#about">about</a> </li> 
    <li> <a href="#products">products</a> </li> 
    <li> <a href="#photos">photos</a> </li> 
    <li> <a href="#contact">contact</a> </li> 
   </ul> 
  </nav>  
 </body>
</html>

Related Tutorials