الكود:


 
<ul class="menu_p">
    
   <li>
       
      <p>
           منتدى حواء و المطبخ والازياء وجمال والعناية بالبشرة وغيره 
      </p>
       
      <ul>
          
         <li>
              <a href="رابط القسم">اسم القسم </a> 
         </li>
          
         <li>
              <a href="رابط القسم">اسم القسم </a> 
         </li>
            
         <li>
              <a href="رابط القسم">اسم القسم </a> 
         </li>
          
         <li>
              <a href="رابط القسم">اسم القسم </a> 
         </li>


      </ul>
       
   </li>
    
</ul>

الكود:


/*  --hamsahaq-المنسدلةالاقسام الفرعية ----*/

    .menu_p, .menu_p ul {
            margin: 0;
            padding: 0;
            list-style: none;
    }
    .menu_p {
            width: auto;
            margin: 2px;
    }
    .menu_p:before, .menu_p:after {
            content: "";
            display: table;
    }
    .menu_p:after {
            clear: both;
    }
    .menu_p {
            zoom:1;
    }
    .menu_p li {
            float: left;
            position: relative;
            margin-right: 10px;
    }
    .menu_p p {
            float: left;
            padding: 0;
            outline: none;
    }
    .menu_p ul {
            margin: 10px 0 0 0;
            _margin: 0; /*IE6 only*/
            opacity: 0;
            visibility: hidden;
            position: absolute;
            top: 8px;
            left: 0;
            z-index: 999;
            background: #330000;
            border: 9px solid #ffffcc;
            border-radius: 18px;
            -webkit-transition: all .2s ease-in-out;
            -moz-transition: all .2s ease-in-out;
            -ms-transition: all .2s ease-in-out;
            -o-transition: all .2s ease-in-out;
            transition: all .2s ease-in-out;
    }
    .menu_p li:hover > ul {
            opacity: 1;
            visibility: visible;
            margin: 0;
    }
    .menu_p ul ul {
            top: 0;
            left: 150px;
            margin: 0 0 0 20px;
            _margin: 0; /*IE6 only*/
    }
    .menu_p ul li {
            float: none;
            display: block;
            border: 0;
            _line-height: 0; /*IE6 only*/
    }
    .menu_p ul a {
            padding: 6px;
            margin: 5px;
            _height: 10px; /*IE6 only*/
            display: block;
            white-space: nowrap;
            float: none;
            text-transform: none;
            outline: none;
    }
    .menu_p ul a:hover {
            background-color: #cccc66;
            margin: 9px;
            border-radius: 9px;
    }
/*  --hamsahaq-المنسدلةالاقسام الفرعية----*/

HAMSAHAQ كتب:اخي الكريم  الكود مقسوم الى قسمين 
 الطريقة الاولى  هي نفس اضافة اقسام فرعية   وانت تعرفها 
   وبعد ان  فرزت وعملت الاقسام تاخذ رابط  كل قسم    وتضعه في وصف الاقسام 

الكود:


  
<ul class="menu_p">
     
   <li>
        
      <p>
           وصف الفئة  
      </p>
        
      <ul>
           
         <li>
              <a href="رابط القسم">اسم القسم </a>  
         </li>
           
         <li>
              <a href="رابط القسم">اسم القسم </a>  
         </li>
             
         <li>
              <a href="رابط القسم">اسم القسم </a>  
         </li>
           
         <li>
              <a href="رابط القسم">اسم القسم </a>  
         </li>


      </ul>
        
   </li>
     
</ul>

 والان القسم الاخر هو كود ورقة السي اس اس 

الكود:


/*  --hamsahaq-المنسدلةالاقسام الفرعية ----*/

    .menu_p, .menu_p ul {
            margin: 0;
            padding: 0;
            list-style: none;
    }
    .menu_p {
            width: auto;
            margin: 2px;
    }
    .menu_p:before, .menu_p:after {
            content: "";
            display: table;
    }
    .menu_p:after {
            clear: both;
    }
    .menu_p {
            zoom:1;
    }
    .menu_p li {
            float: left;
            position: relative;
            margin-right: 10px;
    }
    .menu_p p {
            float: left;
            padding: 0;
            outline: none;
    }
    .menu_p ul {
            margin: 10px 0 0 0;
            _margin: 0; /*IE6 only*/
            opacity: 0;
            visibility: hidden;
            position: absolute;
            top: 8px;
            left: 0;
            z-index: 999;
            background: #330000;
            border: 9px solid #ffffcc;
            border-radius: 18px;
            -webkit-transition: all .2s ease-in-out;
            -moz-transition: all .2s ease-in-out;
            -ms-transition: all .2s ease-in-out;
            -o-transition: all .2s ease-in-out;
            transition: all .2s ease-in-out;
    }
    .menu_p li:hover > ul {
            opacity: 1;
            visibility: visible;
            margin: 0;
    }
    .menu_p ul ul {
            top: 0;
            left: 150px;
            margin: 0 0 0 20px;
            _margin: 0; /*IE6 only*/
    }
    .menu_p ul li {
            float: none;
            display: block;
            border: 0;
            _line-height: 0; /*IE6 only*/
    }
    .menu_p ul a {
            padding: 6px;
            margin: 5px;
            _height: 10px; /*IE6 only*/
            display: block;
            white-space: nowrap;
            float: none;
            text-transform: none;
            outline: none;
    }
    .menu_p ul a:hover {
            background-color: #cccc66;
            margin: 9px;
            border-radius: 9px;
    }
/*  --hamsahaq-المنسدلةالاقسام الفرعية----*/

 وارجو ان تقبل اعتزاري

وهبة الساحر كتب:شكرا لتعبك معى
شكرا للكود