初学JS碰到的点击事件的问题，请指教~~~

如何用JS实现点击下面div框中的任何一个a标签，a标签中的内容自动跳转到上面的输入框且下面div框的内容都隐藏？？ 好吧，思路清晰点来说就是这样：
1，点击
显示下面的ul内容。

2.点击下面ul>li>a标签，ul的display又变为none;且被点击的a标签的内容替代上面中“请选择公告类型”.

3.如果点击事件1后，不进行事件2，而是鼠标点击到页面任何其他的地方，则执行ul中的display:none(等于页面又变为初始效果）。
写的比较啰嗦，我刚开始看JS，只完成了事件1，求各位大神，大仙，大牛，叔叔阿姨，哥哥姐姐，以及问道先于我的弟弟妹妹们，传我解答事件2之法，解我未解3之惑~~~
万分感谢，谢谢~谢谢~
这是HTML:

<div class="container">
   <div class="nav" onclick="showTitle()"><span>请选择公告类型</span> <i class="fa fa-caret-down fa-4x"></i></div>
   <ul class="title">
      <li><a href="">百货零售</a></li>
      <li><a href="">半导体</a></li>
      <li><a href="">保险业</a></li>
      <li><a href="">不动产</a></li>
      <li><a href="">采矿业</a></li>
      <li><a href="">餐饮业</a></li>
      <li><a href="">黑色金属</a></li>
      <li><a href="">汽车制造业</a></li>
      <li><a href="">容器与包装</a></li>
      <li><a href="">软件</a></li>
      <li><a href="">家具制造业</a></li>
      <li><a href="">商务服务业</a></li>
      <li><a href="">建筑与房地产</a></li>
      <li><a href="">金融服务业</a></li>
      <li><a href="">生态保护和环境治理</a></li>
      <li><a href="">石油和天然气</a></li>
      <li><a href="">食品制造业</a></li>
      <li><a href="">百货零售</a></li>
      <li><a href="">半导体</a></li>
      <li><a href="">保险业</a></li>
      <li><a href="">不动产</a></li>
      <li><a href="">采矿业</a></li>
      <li><a href="">餐饮业</a></li>
      <li><a href="">黑色金属</a></li>
      <li><a href="">汽车制造业</a></li>
      <li><a href="">容器与包装</a></li>
      <li><a href="">软件</a></li>
      <li><a href="">家具制造业</a></li>
      <li><a href="">商务服务业</a></li>
      <li><a href="">建筑与房地产</a></li>
      <li><a href="">金融服务业</a></li>
      <li><a href="">生态保护和环境治理</a></li>
      <li><a href="">石油和天然气</a></li>
      <li><a href="">食品制造业</a></li>
      <li><a href="">百货零售</a></li>
      <li><a href="">半导体</a></li>
      <li><a href="">保险业</a></li>
      <li><a href="">不动产</a></li>
      <li><a href="">采矿业</a></li>
      <li><a href="">餐饮业</a></li>
      <li><a href="">黑色金属</a></li>
      <li><a href="">汽车制造业</a></li>
      <li><a href="">容器与包装</a></li>
      <li><a href="">软件</a></li>
      <li><a href="">家具制造业</a></li>
      <li><a href="">商务服务业</a></li>
      <li><a href="">建筑与房地产</a></li>
      <li><a href="">金融服务业</a></li>
      <li><a href="">生态保护和环境治理</a></li>
      <li><a href="">石油和天然气</a></li>
      <li><a href="">食品制造业</a></li>
      <li><a href="">百货零售</a></li>
      <li><a href="">半导体</a></li>
      <li><a href="">保险业</a></li>
      <li><a href="">不动产</a></li>
      <li><a href="">采矿业</a></li>
      <li><a href="">餐饮业</a></li>
      <li><a href="">黑色金属</a></li>
      <li><a href="">汽车制造业</a></li>
      <li><a href="">容器与包装</a></li>
      <li><a href="">软件</a></li>
      <li><a href="">家具制造业</a></li>
      <li><a href="">商务服务业</a></li>
      <li><a href="">建筑与房地产</a></li>
      <li><a href="">金融服务业</a></li>
      <li><a href="">生态保护和环境治理</a></li>
      <li><a href="">石油和天然气</a></li>
      <li><a href="">食品制造业</a></li>
   </ul>
</div>

这是CSS

.nav
{
    border: 1px solid #4474b7;
    border-radius: 5px;
    color: #4474b7;
    height: 42px;
    width: 188px;
}
.nav span
{
    font-size: 18px;
    font-weight: bold;
    left: 10px;
    line-height: 42px;
    position: relative;
    text-align: center;
    top: -10px;
}
.nav i
{
    color: #99c46a;
    position: relative;
    right: -10px;
}
.title
{
    background-color: #eff6ff;
    border: 1px solid #d4daf8;
    border-radius: 5px;
    display: none;
    margin-top: 20px;
    padding-left: 14px;
    position: relative;
    width: 620px;
}
.title:before
{
    border-color: transparent #eff6ff #eff6ff transparent;
    border-style: solid;
    border-width: 10px;
    content: "";
    height: 0px;
    left: 100px;
    position: absolute;
    top: -20px;
    width: 0px;
}
.title li
{
    display: inline-block;
}
.title li:first-of-type
{
    margin-top: 17px;
}
.title li:last-of-type
{
    margin-bottom: 34px;
}
.title li a
{
    color: #2e2e2f;
    display: inline-block;
    font-size: 12px;
    line-height: 25px;
    width: 150px;
}
title li a:visited
{
    color: #2e2e2f;
}
.title li a:hover
{
    background-color: #d2ecfe;
    text-decoration: none;
}