قائمة منسدلة بسيطة تصميم CSS فقط

قائمة منسدلة بسيطة تصميم  CSS  فقط

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

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

بأكواد CSS فقط

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

الأكواد الخاصة بالقائمة

ابحث عن الوسم ]]></b:skin>

وضع قبله/فوقه  الكود التالي

 #menutop ul,
#menutop li,
#menutop span,
#menutop a {
  margin: 0;
  padding: 0;
  position: relative;
      font-family: 'ge_dinar_tworegular';
}
#menutop {
  height: 49px;
  background: #D5D5D5;
  border-bottom: 4px solid #59c5ff;
  width: auto;
}
#menutop:after,
#menutop ul:after {
  content: '';
  display: block;
  clear: both;
}
#menutop a {
  background: #D5D5D5;
  color: #000;
  display: inline-block;
  font-family: Helvetica, Arial, Verdana, sans-serif;
  font-size: 12px;
  line-height: 49px;
  padding: 0 20px;
  text-decoration: none;
}
#menutop ul {
  list-style: none;
}
#menutop > ul,#menutop > ul > li {
  float: right;
}
#menutop > ul > li > a {
  color: #000;
  font-size: 12px;
}
#menutop > ul > li:hover:after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  right: 50%;
  bottom: 0;
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
  border-bottom: 10px solid #59c5ff;
  margin-right: -10px;
}
#menutop > ul > li.active:after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  right: 50%;
  bottom: 0;
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
  border-bottom: 10px solid #59c5ff;
  margin-right: -10px;
}
#menutop > ul > li.active > a,#menutop > ul > li:hover > a {
  background: #ececec;
}
#menutop .menu-sub {
  z-index: 1;
}
#menutop .menu-sub:hover > ul {
  display: block;
}
#menutop .menu-sub ul {
  display: none;
  position: absolute;
  width: 200px;
  top: 100%;
  right: 0;
}
#menutop .menu-sub ul li {
  margin-bottom: 0px;
}
#menutop .menu-sub ul li a {
  background: #59c5ff;
  border-bottom: 1px solid #8cd7ff;
  filter: none;
  font-size: 11px;
  display: block;
  line-height: 120%;
  padding: 10px;
  color: #ffffff;
}
#menutop .menu-sub ul li:hover a {
  background: #26b3ff;
}
#menutop .menu-sub .menu-sub:hover > ul {
  display: block;
}
#menutop .menu-sub .menu-sub ul {
  display: none;
  position: absolute;
  right: 100%;
  top: 0;
}
#menutop .menu-sub .menu-sub ul li a {
  background: #26b3ff;
  border-bottom: 1px solid #8cd7ff;
}
#menutop .menu-sub .menu-sub ul li a:hover {
  background: #0daaff;
}
 

كود HTML يتم وضع هذا الكود مكان القائمة المستبدلة
 غالبا ما تبدأ بهذا الوسم  <div id='menu-wrapper'>

 <div id='menutop'>
<ul>
   <li class='active'><a href='index.html' target='_blank'><span>الرئيسية</span></a></li>
   <li class='menu-sub'><a href='#'><span>منسدلة</span></a>
      <ul>
         <li class='menu-sub'><a href='#'><span>منسدلة فرعية 1</span></a>
            <ul>
               <li><a href='#'><span>فرعية</span></a></li>
               <li class='last'><a href='#'><span>فرعية</span></a></li>
            </ul>
         </li>
         <li class='menu-sub'><a href='#'><span>منسدلة فرعية</span></a>
            <ul>
               <li><a href='#'><span>فرعية</span></a></li>
               <li class='last'><a href='#'><span>فرعية</span></a></li>
            </ul>
         </li>
      </ul>
   </li>
   <li><a href='#'><span>من نحن</span></a></li>
   <li class='last'><a href='#'><span>اتصل بنا</span></a></li>
       <li class='menu-sub'><a href='#'><span>المزيد</span></a>
      <ul>
         <li class='menu-sub'><a href='#'><span>منسدلة فرعية</span></a>
            <ul>
               <li><a href='#'><span>فرعية 1</span></a></li>
               <li class='last'><a href='#'><span>فرعية 2</span></a></li>
            </ul>
         </li>
         <li class='menu-sub'><a href='#'><span>فرعية 2</span></a>
            <ul>
               <li><a href='#'><span>فرعية</span></a></li>
               <li class='last'><a href='#'><span>فرعية</span></a></li>
            </ul>
         </li>
      </ul>
   </li>
</ul>
</div> 

غير الكلمات بالأقسام خاصتك و  # بالروابط
كود الخط المستخدم في القائمة ضعه قبل الوسم  <head/>

 <link href='http://cdn.jsdelivr.net/darfonts/0.1/dinone-dintwo-sstext-ssthree/stylesheet.css' rel='stylesheet'/> 

إذا واجهتك أي مشكلة يمكنك اعلامي عبر تعليقات المدونة
و أتمنى أن يكون الموضوع قد أعجبكم
ألقاكم في تدوينة أخرى
في امان الله