قائمة منسدلة بسيطة تصميم 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'/> 

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

شارك المقال

شاركه على فيسبوكشاركه على جوجل+

Fady Samy

فادي سامي : من مصر, اهتمامي وحبي لتدوين هو ما جعلني أستمر ليس فقط لتقديم المواضيع بل أيضا لمساعدة الأشخاص المبتدئين ، كما كنت سابقا إلا أني لم أجد من يساعدني ! مع ذلك كافحة وواضبة على ما أحبه من عمل لأصل إلى ما أريده ، ليس كمستقبل لكن كهدف حققته ,لدي إهتمامات اخرى منها الرياضة ، ألعاب الفيديو ، والتصميم بحد ذاته ومدونة محترف التكنولوجبا تعبر عما أهواه .