Navigation bar Menu dọc

HTML code:
-------------------------------------------------------------------------------------------
<ul id="nav">
  <li class="item"><a href="">item 1</a></li>
  <li class="item"><a href="">item 2</a></li>
  <li class="item"><a href="">item 3</a></li>
  <li class="item"><a href="">item 4</a></li>
</ul>
<div id="main">
  <h2>Fixed Full-height Side Nav</h2>
  <h3>Try to scroll this area, and see how the sidenav sticks to the page</h3>
  <p>Notice that this div element has a left margin of 25%. This is because the side navigation is set to 25% width. If you remove the margin, the sidenav will overlay/sit on top of this div.</p>
  <p>Also notice that we have set overflow:auto to sidenav. This will add a scrollbar when the sidenav is too long (for example if it has over 50 links inside of it).</p>
  <p>Some text..</p>
  <p>Some text..</p>
  <p>Some text..</p>
  <p>Some text..</p>
  <p>Some text..</p>
  <p>Some text..</p>
  <p>Some text..</p>
</div>
-------------------------------------------------------------------------------------------

CSS code:
-------------------------------------------------------------------------------------------
 #nav {
  list-style-type: none;
  /* xoa dau cham*/
  margin: 0px;
  padding: 0px;
  border: 1px solid blue;
  width: 25%;
  height: 100%;
  overflow: auto;
  position: fixed;
  /*co dinh doi tuong*/
  background-color: #f4f2e3;
}

.item {
  border-bottom: 1px solid gray;
  /*tao vien*/
}

.item a {
  color: #1f5393;
  font-weight: bold;
  display: block;
  /*khoi tran het chieu rong*/
  background-color: #b7e5d8;
  width: 100%;
  /*khoo mau xanh rong*/
  text-decoration: none;
  /*ko gach duoi*/
  text-align: center;
  /*can giua*/
}

.item a:hover {
  background-color: #555;
  color: white;
}

.item:last-child {
  border-bottom: none;
}

#main {
  margin-left: 25%;
  padding: 1px 16px;
  height: 1000px;
}
-------------------------------------------------------------------------------------------