membacalah1

cara membuat navigasi melayang dan fleksibel

letakkan code ini di css


#menu{background:rgba(0,255,0, 0.5);color:#ff0000;height:35px;position:fixed;left:0;z-index:9999;width:100%;box-shadow:0 1px 5px rgba(0,0,0,7);border-bottom:2px solid #ff0000}
#menu ul,#menu li{margin:0;padding:0;list-style:none}#menu ul{height:35px}#menu li{float:left;display:inline;position:relative;font:bold 13px Arial;}#menu li a{color:#ff0000}#menu a{display:block;line-height:35px;padding:0 14px;text-decoration:none;color:#333;}#menu li:hover > a,#menu li a:hover{color:#fff}#menu input{display:none;margin:0 0;padding:0 0;width:80px;height:35px;opacity:0;cursor:pointer}#menu label{font:bold 30px Arial;display:none;width:35px;height:36px;line-height:36px;text-align:center}#menu label span{font-size:13px;position:absolute;left:35px}#menu ul.menus{height:auto;overflow:hidden;width:180px;background:#fff;position:absolute;z-index:99;display:none;border:1px solid #ccc;border-top:none;color:#333}#menu ul.menus a{color:#333}#menu ul.menus li{display:block;width:100%;font:12px Arial;text-transform:none;}#menu li:hover ul.menus{display:block}#menu a.prett,#menu a.trigger2{padding:0 27px 0 14px}#menu li:hover > a.prett,#menu a.prett:hover{background:#fff;color:#333}#menu a.prett::after{content:"";width:0;height:0;border-width:6px 5px;border-style:solid;border-color:#eee transparent transparent transparent;position:absolute;top:15px;right:9px}#menu ul.menus a:hover{background:#BABABA;}#menu a.trigger2::after{content:"";width:0;height:0;border-width:5px 6px;border-style:solid;border-color:transparent transparent transparent #eee ;position:absolute;top:13px;right:9px}
/*----------label dengan gambar-------------------------*/
@media screen and (max-width: 768px){#menu{position:fixed;top:0;z-index:9999;} #menu ul{background:#838383;position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;display:none;}#menu ul.menus{width:100%;position:static;border:none}#menu li{display:block;float:none;width:auto;text-align:left}#menu li a{color:#fff}#menu li a:hover{color:#333}#menu li:hover{background:#BABABA;color:#333;}#menu li:hover > a.prett,#menu a.prett:hover{background:#BABABA;color:#333;}#menu ul.menus a{background:#BABABA;}#menu ul.menus a:hover{background:#fff;}#menu input,#menu label{position:absolute;top:0;left:0;display:block}#menu input{z-index:4}#menu input:checked + label{color:white}#menu input:checked ~ ul{display:block}}
.judul-label{background:-moz-linear-gradient(top,  #393E41,  #000000);font-weight:bold;line-height:1.4em;margin-bottom:5px;overflow:hidden;white-space:nowrap;vertical-align: baseline;margin: 0 2px;outline: none;cursor: pointer;text-decoration: none;font: 14px/100% Arial, Helvetica, sans-serif;padding: .5em 2em .55em;text-shadow: 0 1px 1px rgba(0,0,0,.3);-webkit-border-radius: .5em; -moz-border-radius: .5em;border-radius: .5em;-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);-moz-box-shadow: 1px 1px 4px #AAAAAA;box-shadow: 0 1px 2px rgba(0,0,0,.2);color: #e9e9e9;border: 2px solid white !important;background:#000 url("http://2.bp.blogspot.com/-6OcDgB9yXXI/TVfIh9HaUYI/AAAAAAAABUk/PUZFTYOTg-8/s1600/1m3.gif") no-repeat}.data-list{line-height:1.5em;margin-left:5px;margin-right:5px;padding-left:15px;padding-right:5px;white-space:nowrap;text-align:left;font-family:kristen itc;font-size:12px;}.list-ganjil{background-color:#000;color:#51A104;border-top:1px solid #FF0000;border-bottom:1px solid #FF0000}.headactive{color: #FFFFFF;border: 2px solid:#C0C0C0;!important;background: #D11717;background: -moz-linear-gradient(top,  #D11717,  #8C0000)}


dan code di bawah ini letakkan di bawah code </head>

<nav id='menu'>
<input type='checkbox'/>
<label>&#8801;<span>Menu</span></label>

<ul><li><a href='/' title='Home'>Home</a></li>
<li><a href='#' title='menu1'>menu1</a></li>
<li><a href='#' title='menu2'>menu2</a></li>
<li><a href='#' title='menu3'>menu3</a></li>
<li><a href='#' title='menu4'>menu4</a></li>
<li><a class='prett' href='#' title='Drop Menu'>Menu</a>
<ul class='menus'>
    <li><a href='#' title='submenu1'>submenu1</a></li>
    <li><a href='#' title='submenu2'>submenu2</a></li>
    <li><a href='#' title='submenu3'>submenu3</a></li></ul></li>
</ul>
</nav>