How can I select complete <li> element in navigation bar when hovered or selected?

Question 1

Its good if you use a:hover and the properties given to it... which allow user to have clickable area been selected and highlighted.

    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About Us</a></li>
            <li><a href="#">project</a></li>
        </ul>
    </nav>

CSS:

    nav{
        display:block;
        background:#26AD60;
    }
    nav ul{
        list-style:none;
        margin:0px;
        padding:0px;
        overflow:hidden;
    }
    nav ul li{
        float:left;
        border-right: 1px dashed rgba(255, 255, 255, 0.25);    
    }
    nav ul li:last-child{
        border:none;
    }
    nav ul li a{
        transition: all 0.25s linear 0s;
       padding: 0px 20px;
       line-height: 50px;
       outline: medium none;
       font-family:arial;
       font-size:12px;
       color: rgb(255, 255, 255);
       text-shadow: none;
       text-transform: uppercase;
       text-decoration:none;
       display:block;
    }
    nav ul li a:hover{
       background: #229b56;
    }

Please check this jsfiddle to see the same.

Question 2

Add this:

padding: 15px 10px 15px 10px;

To your nav ul li:hover{ CSS

Fiddle: http://jsfiddle.net/39Lzp/

In order to have that item be highlighted based on the page you are on you can add a class to it and style that class accordingly. Then, in each different HTML file, you add that class to the corresponding element. For example, index.html would look like this:

<li class="current"><a href="index.html">HOME</a></li>
<li><a href="how_it_works.html">HOW IT WORKS</a></li>

But how_it_works.html would look like this:

<li><a href="index.html">HOME</a></li>
<li class="current"><a href="how_it_works.html">HOW IT WORKS</a></li>

Now, for the borders, all you need to do is use the border property like so:

nav ul li {
    border-left: 1px dashed white;
}
nav ul li:first-of-type {
    border-left: none;
}

Also, in order for the border to span the entire height of the nav bar, change this:

nav ul li {
    display: inline;
    padding: 5px 10px 5px 10px;
}

To this:

nav ul li {
    display: inline;
    padding: 15px 10px 15px 10px;
}

http://jsfiddle.net/LbBEK/

Also, for future reference, you have 3 separate questions here. Next time, break your questions up to be more concise and you'll find yourself getting a much better response here on SO.

Question 3

Just change the hover statement background-color

nav ul li:hover { 
    background-color: blue; // here
    color: #F9F9F9;;
}

You may want to change the active statement too

nav ul li a:active {
    background-color: red;
    text-decoration: none;
}

For the border, you can like something like this :

nav ul li {
    border-right: 1px dashed rgba(255,255,255,0.25)
}

nav ul li:last-child {
   border: 0; // they dont do this, but I prefer with it. As you want.
}

Demo JSFiddle

Question 4

Apply this on hover padding: 15px 10px 15px 0px;

See demo

Apply border property border-right: 1px dashed #fff for dashed separation between li.