/*!
* Keleyi(jQuery Menu)
* version: 0.1.6
* Copyright (c) 2013 KeLeyi
*/
(function ($) {
  $.fn.keleyi = function (options) {
    var settings = $.extend({
      width: \'986px\',
      margin: \'0px auto\',
      isAutoAddTriangle: true,
      item_background_color_hover: \'#005500\',
      item_background_color: \'transparent\',
      item_width: \'auto\',
      item_margin: \'0px 0px 0px 10px\',
      bar_height: \'auto\',
      bar_position: \'fixed\',
      bar_background_color: \"#008000\",
      bar_bottom: \"0px\",
      mainItem_color: \"white\",
      subItem_color:\"white\"
    }, options);
    $(this).addClass(\"keleyi-menu\");
    $(this).css({ \"width\": settings.width, \"margin\": settings.margin });
    $(this).wrap(\"<div class=\'keleyi-menubar\'></div>\");
    var k_bar = $(this).parent();
    k_bar.css({ \"background-color\": settings.bar_background_color
    , \"height\": settings.bar_height, \"position\": settings.bar_position
    , \"bottom\": settings.bar_bottom, \"min-width\": settings.width
    });
    if (! -[1, ] && !window.XMLHttpRequest) {
      if (k_bar.css(\"position\") == \"fixed\") {
        ie6FixedBottom(k_bar, settings.bar_bottom);
      }
    }
    $(this).parent().append(\"<div style=\'width:100%;clear:both;height:0px;overflow:hidden\'></div>\");
    $(this).find(\">li\").css({ \"width\": settings.item_width, \"background-color\": settings.item_background_color, \"margin\": settings.item_margin
    , \"padding\": \"0px\", \"white-space\": \"nowrap\", \"height\": \"20px\", \"float\": \"left\", \"text-align\": \"center\"
    , \"display\": \"inline-block\", \"position\": \"relative\"
    });
    $(this).find(\">li a\").css({ \"color\": \"white\", \"line-height\": \"20px\"
    , \"display\": \"block\", \"font-size\": \"14px\"
    });    
    if (settings.isAutoAddTriangle)
      $(this).find(\">li\").has(\'ul\').find(\"a:first\").append(\"<b></b>\");
    $(this).find(\">li\").find(\"a:first\").css({ \"width\": \"100%\", \"overflow\": \"hidden\", \"color\": settings.mainItem_color });
    $(this).find(\">li\").find(\"b\").css({ \"border-color\": (\"transparent transparent \" + settings.mainItem_color) })
    $(this).find(\">li ul\").css({ \"padding\": \"0px\", \"list-style-type\": \"none\"
    , \"background-color\": \"transparent\", \"position\": \"absolute\", \"display\": \"none\"
    });
    $(this).find(\">li\").find(\"li a\").css({ \"color\": settings.subItem_color });
    $(this).find(\">li>a\").mouseover(function () {
      $(this).parent().css({ \"background-color\": settings.item_background_color_hover });
      var k_ul = $(this).parent().find(\"ul\");
      if (k_ul.length < 1)
        return;
      k_ul.css({ \"background-color\": settings.item_background_color_hover, \"top\": $(this).parent().position().top - (k_ul.height())
        , \"left\": \"0px\", \"margin\": \"0px\"
      }).show();
      if (k_ul.width() < $(this).parent().width())
        k_ul.width($(this).parent().width());
    });
    $(this).find(\">li\").mouseleave(function () {
      $(this).find(\"ul\").hide();
      $(this).css(\"background-color\", settings.item_background_color);
    });
    function ie6FixedBottom(fixedobj, bottommargin) {
      fixedobj.css({ \"position\": \"absolute\" });
      var k_bm = new Number;
      k_bm = Number(bottommargin.substring(0, bottommargin.length - 2));
      var obj = fixedobj[0];
      function setStyleTop() {
        obj.style.top = document.documentElement.scrollTop + document.documentElement.clientHeight
        - obj.offsetHeight - (parseInt(obj.currentStyle.marginTop, 0) || k_bm) - (parseInt(obj.currentStyle.marginBottom, 0) || k_bm)
      }
      window.onscroll = function () { setStyleTop(); }
      window.onresize = function () { setStyleTop(); }
    }
  }
} (jQuery));

div.keleyi-menubar{width:100%;visibility:visible;padding:0px;}
ul.keleyi-menu{list-style-type:none;padding:0px;}
ul.keleyi-menu a{text-decoration:none}
ul.keleyi-menu a:hover{text-decoration:underline;}
ul.keleyi-menu>li li{padding:0px;}
ul.keleyi-menu li b{
display:inline-block;
width: 0;
height: 0;
border-width: 4px 4px;
border-style: solid;
border-color: transparent transparent #fff;
font-size: 0;
line-height: 0;
-moz-transition: -moz-transform .2s ease-in;
-o-transition: -o-transform .2s ease-in;
transition: transform .2s ease-in;
vertical-align:text-top;
margin-left:5px
}

<!DOCTYPE html>
<html>
<head>
  <title>Keleyi Menu (jQuery Plugin)0.1.6 Demo- keleyi.com</title>
  <script type=\"text/javascript\" src=\"js/jquery.min.js\"></script>
  <script type=\"text/javascript\" src=\"jquery.keleyi.js\"></script>
  <link href=\"jquery.keleyi.css\" type=\"text/css\" rel=\"Stylesheet\" />
  <style>body{margin: 0px;}</style>
</head>
<body>
  <div style=\"text-align:center;width:986px;margin:0px auto;\">
    <h1>
      Keleyi</h1>
    A jQuery Menu Plugin
    <h2>Browser Support</h2>
    Keleyi 0.1.4-0.1.6:IE6+,Chrome,Firefox,Opera,Safari<br />
    Keleyi 0.1.3:IE8+(not support IE6),Chrome,Firefox,Opera,Safari
  </div>
  <div style=\"height: 360px;background-color: #66FF66;\"></div>
  <ul id=\"keleyi-menu\">
    <li><a href=\"\">Home</a></li>
    <li><a href=\"http://plugins.jquery.com/keleyi/\">jQuery</a>
      <ul>
        <li><a href=\"https://github.com/keleyi/keleyi\">github</a></li>
      </ul>
    </li>
    <li><a href=\"/keleyi/\">Keleyi</a></li>
    <li><a href=\"/keleyi/demo/11.htm\">Demo 11</a></li>
    <li><a href=\"/keleyi/demo/\">Demo</a>
      <ul>
        <li><a href=\"/keleyi/demo/1.htm\">Demo 1</a></li>
        <li><a href=\"/keleyi/demo/2.htm\">Demo 2</a></li>
        <li><a href=\"/keleyi/demo/3.htm\">Demo 3</a></li>
        <li><a href=\"/keleyi/demo/4.htm\">Demo 4</a></li>
        <li><a href=\"/keleyi/demo/5.htm\">Demo 5</a></li>
      </ul>
    </li>
    <li><a href=\"/keleyi/demo/6.htm\">Demo 6</a>
      <ul>
        <li><a href=\"/keleyi/demo/7.htm\">Demo 7</a></li>
        <li><a href=\"/keleyi/demo/8.htm\">Demo 8</a></li>
        <li><a href=\"/keleyi/demo/9.htm\">Demo 9</a></li>
        <li><a href=\"/keleyi/demo/10.htm\">Demo 10</a></li></ul>
    </li>
    <li><a href=\"/keleyi/demo/12.htm\">Demo 12</a></li>
    <li><a href=\"/keleyi/demo/0x1x5/\">Demo 13</a></li>
  </ul>
  <div style=\"height: 900px; visibility: visible; background-color: Olive\"></div>
  <script type=\"text/javascript\">
    $(\"#keleyi-menu\").keleyi({ \"item_width\": \"100px\", \"bar_position\": \"relative\"
  , \"margin\": \"0px auto 0px 0px\", \"item_margin\": \"0px\", \"mainItem_color\": \"black\",\"subItem_color\":\"black\",\"bar_background_color\":\"#ffffff\",\"item_background_color_hover\":\"#eeeeee\"
    });
  </script>
</body>
</html>