$(function() {
    $(".menu li.active").click();
    $(document).keydown(function(e) {
        if (typeof(e.target.name) != "undefined" && e.target.name != "" && $(e.target).parents("#contactform").length > 0) {
            return false;
        } else {
            var p = $(".menu li.active");
            if (e.keyCode === 38) {
                e.preventDefault();
                p.prev().find("a").click();
            } else if (e.keyCode === 40) {
                e.preventDefault();
                p.next().find('a').click();
            }
        }
    });

    $(".menu li").click(function() {
        $(".menu li").removeClass("active");
        $(this).addClass("active");
    });
});

Setting Validate Copy Format

.menu{
  list-style:none;
  padding:1px;
  display:inline-block;
  vertical-align:top;
}
.menu li{
  background:#112288;
  padding:5px;
}
.menu li:hover,.menu li.active{
  background:#1144cd;
}
.menu li a{
  color:#eee;
  text-decoration:none;
}
.menu li a:hover{
  text-decoration:underline;
}
#contactform{
  border:1px solid #223388;
  width:50%;
  background:#5888a9;
  margin-left:5px;
  display:inline-block;
}
#contactform ul{
  padding:5px;
}
#contactform h3{
  margin-left:10px;
}
#contactform li{
  list-style:none;
  margin-left:10px;
}

#contactform input[type=text],#contactform textarea{
  border:1px solid #223388;
}
#contactform input[type=text]:focus,#contactform textarea:focus{
  background:#d4c8fb;
}

Setting Validate Copy Format

<ul class="menu">
  <li class="active">
    <a href="#">
      Menu1
    </a>
  </li>
  <li>
    <a href="#">
      Menu1
    </a>
  </li>
  <li>
    <a href="#">
      Menu2
    </a>
  </li>
  <li>
    <a href="#">
      Menu3
    </a>
  </li>
  <li>
    <a href="#">
      Menu4
    </a>
  </li>
</ul>

<form name="contactform" id="contactform" method="post" action="#" _lpchecked="1">
  <ul class="form-block">
    <!-- HONEYPOT -->
    <li class="on-no-robots" style="height:0px; text-indent:-9999px; font-size:0px; overflow:hidden;">
      <label>
        Humans Don't Submit This!! If you can see this, you don't have CSS, and you scare me. This is just here to filter out automated comments!
      </label>
      <input name="robotest" id="robotest" type="text"/>
    </li>
    <!-- HONEYPOT -->
    <li class="third">
      <label for="name">
        Name
      </label>
      <input type="text" name="name" id="name" value="" class="required" />
    </li>
    <li class="third">
      <label for="email">
        Email Address
      </label>
      <input type="text" name="email" id="email" value="" class="required email" />
    </li>
    <li class="third">
      <label for="phone">
        Phone Number
      </label>
      <input type="text" name="phone" id="phone" value="" />
    </li>
  </ul>
  <h3>
    How can we help you?
  </h3>
  <ul class="form-block">
    <li class="full">
      <textarea name="comments" id="comments" class="required">
      </textarea>
    </li>
    <li>
      <input id="submitButton" type="submit" value="Talk to us" />
    </li>
  </ul>
</form>

Copy Format

Download