how to add hover effect on header in html5?

I am new in UI or web development .I am trying to make simple simple pages .So I take http://ionicframework.com/getting-started/ page .And trying to make same as in my demo application .So I split my whole page into three parts header , contend , and footer .So I worked first for header .I face few problem .

  • on header there is option "products,getting started ,docs" etc they become white when hover event fire .could you please tell how I will do in my demo .
  • how to set position of products,getting started ,docs" in right side ?
  • how to add search input field in lower header . here is my code.

http://codepen.io/anon/pen/rabRoO 

<html ng-app="ionicApp">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>Ionic List Directive</title>

    <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
    <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
  </head>

  <body >
 <div >
   <div class="header">
  <a href="#">product</a>
    <a href="#">Getting Started</a>
     <a href="#">docs</a>
    <a href="#">showcase</a>
    <a href="#">forum</a>
    <a href="#">Blog</a>
  </div>
   <div class ="container">
     <h1>Getting Started with Ionic</h1>
     <p>Build mobile apps faster with the web technologies you know and love</p>
      <div class ="smallheader">
     <div class="col-sm-8 news-col">
          Questions? Head over to our <a href="http://forum.ionicframework.com/">Community Forum</a> to chat with others using the framework.
        </div>
     </div>
   </div>

 </div>



  </body>
</html>

Are you mean css hover? like that: 

.header:hover {
  border :5px solid green;
}

(1) Menu item style: you should first wrap the links into list, and use display: inline-block; on the <li> is most commonly used for this kind of job.

<ul class="navbar">
    <li><a href="#">product</a></li>
</ul>

(2) To align items to the right: simply add text-align: right; to the <ul> and all the <li>s inside will be right aligned, because we made them as inline elements already.

Updated demo: http://jsfiddle.net/oLws3fsk/

(3) You don't have a search box in your code, but you can just add it under the navbar.