Html5 nav height style - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Nav Bar

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Nav Bar

Description

Html5 nav height style

Demo Code

ResultView the demo in separate window 


<html lang="en">
 <head> 
  <meta charset="utf-8"> 
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
  <title>Lore</title> 
  <meta name="description" content=""> 
  <meta name="author" content=""> 
  <meta name="viewport" content="width=device-width; initial-scale=1.0"> 
 </head> <!--   ww  w. ja  v  a 2s .com-->
 <body>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit 
  <link rel="apple-touch-icon" href="https://www.java2s.com/style/demo/Safari.png"> 
  <style>
body {
   margin:0 auto;
   width:801px;
   border:2px solid Chartreuse;
}

nav {
   border:2px solid yellow;
   background-color:blue;
}

nav ul {
   list-style:none;
   margin:0;
   text-align:right;
}

nav li {
   display:inline;
}

nav li a {
   text-decoration:none;
   padding-right:6px;
   color:pink;
   font-weight:bold;
   font-family:Cantarell, Arial, Helvetica, sans-serif;
}

nav li a:hover {
   color:OrangeRed;
}
</style> 
  <div> 
   <header>
     Lorem i 
   </header> 
   <nav> 
    <ul> 
     <li> <a href="">Lore</a> </li> 
     <li> <a href="">Lorem </a> </li> 
     <li> <a href="">Lorem</a> </li> 
    </ul> 
   </nav> 
   <div id="content"> 
    <article>
      Lorem ipsum 
    </article> 
   </div> 
   <footer> 
    <p>Lorem ipsum dolo</p> 
   </footer> 
  </div>  
 </body>
</html>

Related Tutorials