اخي الكريم الكود مقسوم الى قسمين
الطريقة الاولى هي نفس اضافة اقسام فرعية وانت تعرفها
وبعد ان فرزت وعملت الاقسام تاخذ رابط كل قسم وتضعه في وصف الاقسام
- الكود:
-
<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-المنسدلةالاقسام الفرعية----*/
وارجو ان تقبل اعتزاري