قايمة أفقية بسيطة ومميزة لمدونات بلوجر

    <nav> <a id="tombolmenu" href="#">Menu</a> <ul class="menu" style="margin:0;padding:0;"> <li><a href="#">قائمة 1</a></li> <li><a href="#">قائمة 2</a></li> <li><a href="#">قائمة 3</a></li> <li><a href="#">قائمة 4</a></li> <li><a href="#">قائمة 5</a></li> <li><a href="#">قائمة منسدلة</a> <ul class="hidden"> <li><a href="#">قائمة منسدلة 1</a></li> <li><a href="#">قائمة منسدلة 1</a></li> <li><a href="#">قائمة منسدلة 1</a></li> <li><a href="#">قائمة منسدلة 1</a></li> </ul> </li> </ul> </nav> <script type="text/javascript"> (function () {     $('nav ul').removeClass('hidden');     $('nav li').hover(function () {         $(this).parent('ul.menu').css('overflow', 'visible');         $(this).children('ul').filter(':not(:animated)').slideDown();     }, function () {               $(this).children('ul').slideUp();     });     $('#tombolmenu').toggle(function () {         $(this).addClass('active');         $('nav > ul').slideDown();         return false;     }, function () {         $(this).removeClass('active');         $('nav > ul').slideUp();         return false;     });     function checkWidth() {         if ($(window).width() > 600) {             $('nav > ul').css('display', 'block');         } else if ($(window).width() <= 600 && $('#tombolmenu').attr('class') === 'active') {             $('nav > ul').css('display', 'block');         } else if ($(window).width() <= 600 && $('#tombolmenu').attr('class') !== 'active') {             $('nav > ul').css('display', 'none');         }     }     $(window).resize(checkWidth); })(); </script> <style> nav {   font:normal normal 11px/30px Verdana,Geneva,sans-serif;   background-color:#313131; } nav, nav * {   display:block; } nav #tombolmenu {   display:none; } nav ul, nav li {   padding:0;   margin:0;   list-style:none; } nav ul {   height:30px;   margin: 0px;   padding: 0px; } nav li {   float:right;   position:relative; } nav li a {   color: white;   display: block;   line-height: 2.7;   padding: 0 10px;   text-decoration: none; } nav li:hover > a {   background-color:#1D8FC5; } nav li ul {   position:absolute;   background-color:black;   height:auto;   width:160px;   display:none;   margin:0 !important;   padding:0 !important; } nav li:hover ul.hidden {   display:block; } nav li li {   float:none; } @media only screen and (max-width:600px) {   nav #tombolmenu {     display:block;     padding:0 15px;     background-color:black;     text-decoration:none;   }   nav #tombolmenu.active {     background-color:#1D8FC5;     color:white;   }   nav ul {     height:auto;     display:none;   }   nav li {     float:none;   }   nav li ul {     width:100%;   } } </style>