حصريا قائمة احترافية لمدونات بلوجر

السلام عليكم ورحمة الله وبركاته

اليوم حبيت اقدم لكم قائمة احترافية وانيقة وبسيطة لمدونات بلوجر

لمعاينة القائمة

كود الـ HTML

<nav>

<a id="tombolmenu" href="#">menu</a>

  <ul class="menu">

    <li><a href="#">الرئيسية</a></li>

    <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="#">قائمة منسدلة</a>

      <ul class="hidden">

        <li><a href="#">منسدلة1</a></li>

        <li><a href="#">منسدلة2</a></li>

        <li><a href="#">منسدلة3</a></li>

        <li><a href="#">منسدلة4</a></li>

      </ul>

    </li>

  </ul>

</nav>

كود الـ css 

nav {

  font:15px 'DroidKufi-Regular', tahoma ,arial;

  background-color:#313131;

}

@font-face {

font-family: 'DroidKufi-Regular';

src: url('http://dl.dropbox.com/u/22531314/webfont/fonts/DroidKufi-Regular.eot');

src: url('http://dl.dropbox.com/u/22531314/webfont/fonts/DroidKufi-Regular.eot?') format('embedded-opentype'),

url('http://dl.dropbox.com/u/22531314/webfont/fonts/DroidKufi-Regular.woff') format('woff'),

url('http://dl.dropbox.com/u/22531314/webfont/fonts/DroidKufi-Regular.ttf') format('truetype');}

nav,

nav * {

  display:block;

}

nav #tombolmenu {

  display:none;

}

nav ul,

nav li {

  padding:0;

  margin:0;

  list-style:none;

}

nav ul {

  height:30px;

}

nav li {

  float:right;

  position:relative;

}

nav li a {

  display:block;

  padding:0 10px;

  color:white;

  text-decoration:none;

}

nav li:hover > a {

  background-color:#1D8FC5;

}

nav li ul {

  position:absolute;

  background-color:black;

  height:auto;

  width:160px;

  display:none;

}

nav li:hover ul.hidden {

  display:block;

}

nav li li {

  float:right;

}

@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:right;

  }

  nav li ul {

    width:100%;

  }

}

اتمنى ان تنال اعجابكم وتستفيدو من القائمة

في امان الله