'menu' class stick to the top of the screen and height - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Menu

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

Description

'menu' class stick to the top of the screen and height

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <style>
body {<!--from w  w  w.  jav  a 2 s.c o  m-->
   margin:0px;
   padding:0px;
   font-family:Roboto;
}

body, html {
   width:100%;
   height:100%;
}

header {
   background:url('https://www.java3s.com/style/demo/Google-Chrome.png') 51% 51%;
   width:100%;
   height:100%;
   background-size:cover;
   background-repeat:no-repeat;
}

.menu {
   background:Chartreuse;
   width:100%;
   height:71px;
}

.menu ul {
   list-style:none;
   margin:0;
}

.menu li {
   display:inline-block;
   background:yellow;
   padding:31px;
}

.menu a {
   color:blue;
   text-decoration:none;
   font-size:21px;
}
</style> 
 </head> 
 <body translate="no"> 
  <header> 
   <div class="menu"> 
    <ul> 
     <li class="current"> <a href="#">Lore</a> </li> 
     <li> <a href="#">Lore</a> </li> 
     <li> <a href="#">Lorem</a> </li> 
     <li> <a href="#">Lorem </a> </li> 
     <li> <a href="#">Lorem i</a> </li> 
    </ul> 
   </div> 
  </header>  
 </body>
</html>

Related Tutorials