Tạo menu góc trên bên phải (có nút thu gọn)

<!--tao menu goc-->

  <style>

  .ShowHide {

  background: none repeat scroll 0 0 #2e2f2e;

  border-bottom: 2px solid #eee;

  border-bottom-left-radius: 5px;

  border-bottom-right-radius: 5px;

  border-left: 2px solid #eee;

  border-right: 2px solid #eee;

  box-shadow: 1px 2px 9px #555;

  cursor: pointer;

  display: block;

  padding: 0 7px;

  height: 25px;

  position: absolute;

  right: 3px;

  float: right;

  top: 0;

  z-index: 999;

  }

  #banner {

  visibility: hidden;

  display: none;

  }

  #banner {

  background-color: rgba(255, 255, 255, 0);

  border-bottom: 1px solid #eee;

  box-shadow: 0 1px 2px 2px rgba(0, 0, 0, 0.3);

  height: 42px;

  left: 0;

  display: block;

  margin-bottom: 50px;

  padding: 0px 5px;

  position: fixed !important;

  right: 0;

  top: 0;

  z-index: 999;

  }


.menu,.menu ul,.menu li,.menu a{

  border:none;outline:none;margin:0;

  padding:0;z-index:999

  }

  .menu{

  height:40px;width:auto; background-color: #222;

  background-image: -webkit-gradient(linear, left top, left bottom, from(#555), to(#222));

  background-image: -webkit-linear-gradient(top, #ED0000, #C20404);

  background-image: -moz-linear-gradient(top, #555, #222);

  background-image: -ms-linear-gradient(top, #555, #222);

  background-image: -o-linear-gradient(top, #555, #222);

  background-image: linear-gradient(top, #555, #222);

  -moz-box-shadow: 0 5px 5px #000;

  -webkit-box-shadow: 0 5px 5px rgba(255, 255, 255, 1);

  box-shadow: 0 5px 5px rgba(255, 255, 255, 1);

  }

  .menu li{

  position:relative;list-style:none;

  float:left;display:block;height:40px

  }

  .menu li a{

  background:url(http://4.bp.blogspot.com/-n7OkwgMuP7Q/UQs19HkuUsI/AAAAAAAABiQ/k3qWwdmqgfQ/s1600/bagi.gif) no-repeat top right;

  display:block;

  text-decoration:none;font-

  family:Arial;font-weight:700;

  font-size:14px;color:#FFFFFF;

  text-shadow:1px 1px 1px #1A00FF;

  -webkit-transition:color .2s ease-in-out;

  -moz-transition:color .2s ease-in-out;

  -o-transition:color .

  2s ease-in-out;-ms-transition:color

  .2s ease-in-out;transition:color .

  2s ease-in-out;margin:0;

  padding:12px 14px  12px

  }

  .menu li:first-child a{

  padding:10px 10px 7px

  }

  .menu li:hover > a{color:#48d}

  .menu ul{

  position:absolute;top:41px;

  left:0;opacity:0;

  background:#fdfdfd url(http://4.bp.blogspot.com/-mlmoMuUf48g/UQu3dezXeFI/AAAAAAAABpE/cDDiKShrEu0/s1600/menuhover.png)

  repeat-x top;

  -webkit-border-radius:0 0 5px 5px;

  -moz-border-radius:0 0 5px 5px;

  border-radius:0 0 5px 5px;

  border:1px solid #666;

  border-top:none;

  -webkit-transition:opacity .25s ease .1s;

  -moz-transition:opacity .25s ease .1s;

  -o-transition:opacity .25s ease .1s;

  -ms-transition:opacity .25s ease .1s;

  transition:opacity .25s ease .1s

  }

  .menu li:hover > ul{opacity:1}

  .menu ul li{

  height:0;overflow:hidden;

  -webkit-transition:height .25s ease .1s;

  -moz-transition:height .25s ease .1s;

  -o-transition:height .25s ease .1s;

  -ms-transition:height .25s ease .1s;

  transition:height .25s ease .1s;padding:0

  }

  .menu li:hover > ul li{

  height:36px;

  overflow:visible;

  padding:0

  }

  .menu ul li a{

  color:#111;font-weight:400;

  width:150px;margin:0;

  padding:10px 0 10px 30px;

  text-shadow:none

  }

  .menu ul li:first-child a{

  padding:10px 14px  10px 30px

  }

  .menu ul li:last-child a{

  border:none

  }

  .menu a.trigger{

  background:url(http://3.bp.blogspot.com/-pJAQN5knuO8/UQre-F12FjI/AAAAAAAABgs/6WarLD7FwNw/s1600/arrow.png)

  no-repeat 6px center

  }

  </style>

  <script type="text/javascript">

  var showHeader=false;

  function ShowHideBanner() {

  showHeader=!showHeader;

  var nav=document.getElementById("banner");

  if (showHeader) {

  banner.style.visibility="visible";

  banner.style.display="block";

  }

  else {

  banner.style.visibility="hidden";

  banner.style.display="none";

  }

  }

  </script>

  <div class="fixed-navbar">

  <div id="banner">

  <div id='kenthir-wrapper'>

  <ul class='menu'>

  <li><a href='/'><img alt='home' src='http://1.bp.blogspot.com/-wqzYVSTa638/UQrc7C0UP3I/AAAAAAAABgU/TgbAOmzXLAs/s1600/home.gif' style='padding:0px;'/></a></li>

  <li><a href='/'>Giới thiệu</a></li>

  <li><a href='http://www.vanphongpham.pro.gg/search/label/v%C4%83n%20ph%C3%B2ng%20ph%E1%BA%A9m'>Văn phòng phẩm</a></li>


<!--

  <li><a href='/'>Menu 1</a>

  

  <ul>

  <li><a class='trigger' href='/'>Sub Menu 1</a></li>

  <li><a class='trigger' href='/'>Sub Menu 2</a></li>

  <li><a class='trigger' href='/'>Sub Menu 3</a></li>

  </ul>

  </li>

  <li><a href='/'>Menu 2</a>

  <ul>

  <li><a class='trigger' href='/'>Label_01</a></li>

  <li><a class='trigger' href='/'>Label_02</a></li>

  <li><a class='trigger' href='/'>Label_03</a></li>

  </ul>

  </li>

  -->

  <li><a href='/'>Liên hệ</a></li>

  </ul>

  </div>

  <!-- end .menu -->

  <div class="ShowHide" name="Hide" style="z-index:999;top:52px;height:28px" title="Hide" onclick="ShowHideBanner();">

  <img src="http://4.bp.blogspot.com/-lK7sM6ByXrg/VCJoFslTjBI/AAAAAAAAQLQ/mQVizui7X10/s1600/arrow_up.png" width="20px" />

  <a style="visibility:hidden;" ></a>

  </div>

  </div>

  <div class="ShowHide" name="Show"style="position:fixed;z-index:990" title="Show Menu Bar" onclick="ShowHideBanner();">


<!--<img src="http://2.bp.blogspot.com/-2zfIui4TM6Y/VCJmdUI37VI/AAAAAAAAQLE/SlLx8Qc_HrI/s1600/down.png" width="20px" />-->


<img src="https://lh4.googleusercontent.com/-1Ht7ywfOneY/UXPHIP6oz2I/AAAAAAAAFdU/w9wjP6bQbFE/s30/menu-icon.png" width="20px" />




<a style="visibility:hidden;" >

  </a></div>

  </div>


<!--ket thuc menu goc-->