ساخت منوی عمودی در کنار سایت به همراه آیکن

hamed-sli

تازه وارد
سلام دوستان

من میخوام یه منوی عمودی کنار سایتم داشته باشم که توی این منو 9 عنوان داشته باشم و هر عنوان هم لینک بشن به یه سایت دیگه.

طبق کد هایی که توی آموزش سایت پیکور بود 9  عنوان رو ایجاد کردم اما نمیدونم چرا از عنوان 6 به بعد به نمایش در نمیاد!البته منویی که سایت مذکور قرار داده بود هم 6 عنوان بیشتر نداشت!

کد های یه بررسی بکنید و بفرمایید مشکل از کجاست؟

<style type="text/css">
.picor {
width:100px;
height:30px;
background:#6498dd;
text-align:center;
font-family:tahoma;
font-size:12px;
padding:5px;
color:#f7f7f7;
margin-top:10px;
margin-bottom:10px;
 float: left;
 position: fixed;
 left: -75px;
 top: 205px;
 -moz-transition:all 0.3s ease-in;
 -webkit-transition:all 0.3s ease-in;
 -o-transition:all 0.3s ease-in;
 -ms-transition:all 0.3s ease-in;
 z-index: 1000;
}
 
.picor:hover {
left: 0px;
}
 
.picor1 {
width:100px;
height:30px;
background:#CA226B;
text-align:center;
font-family:tahoma;
font-size:12px;
padding:5px;
color:#f7f7f7;
margin-top:10px;
margin-bottom:10px;
 float: left;
 position: fixed;
 left: -95px;
 top: 235px;
 -moz-transition:all 0.3s ease-in;
 -webkit-transition:all 0.3s ease-in;
 -o-transition:all 0.3s ease-in;
 -ms-transition:all 0.3s ease-in;
 z-index: 1000;
}
 
.picor1:hover {
left: 0px;
}
 
.picor2 {
width:100px;
height:30px;
background:#48CCCD;
text-align:center;
font-family:tahoma;
font-size:12px;
padding:5px;
color:#f7f7f7;
margin-top:10px;
margin-bottom:10px;
 float: left;
 position: fixed;
 left: -95px;
 top: 265px;
 -moz-transition:all 0.3s ease-in;
 -webkit-transition:all 0.3s ease-in;
 -o-transition:all 0.3s ease-in;
 -ms-transition:all 0.3s ease-in;
 z-index: 1000;
}
 
.picor2:hover {
left: 0px;
}
.picor4 {
width:100px;
height:30px;
background:#FF4500;
text-align:center;
font-family:tahoma;
font-size:12px;
padding:5px;
color:#f7f7f7;
margin-top:10px;
margin-bottom:10px;
 float: left;
 position: fixed;
 left: -95px;
 top: 295px;
 -moz-transition:all 0.3s ease-in;
 -webkit-transition:all 0.3s ease-in;
 -o-transition:all 0.3s ease-in;
 -ms-transition:all 0.3s ease-in;
 z-index: 1000;
}
 
.picor4:hover {
left: 0px;
}
.picor5 {
width:100px;
height:30px;
background:#9ACD32;
text-align:center;
font-family:tahoma;
font-size:9px;
padding:5px;
color:#f7f7f7;
margin-top:10px;
margin-bottom:10px;
 float: left;
 position: fixed;
 left: -95px;
 top: 325px;
 -moz-transition:all 0.3s ease-in;
 -webkit-transition:all 0.3s ease-in;
 -o-transition:all 0.3s ease-in;
 -ms-transition:all 0.3s ease-in;
 z-index: 1000;
}
 
.picor5:hover {
left: 0px;
}
 
.picor6 {
width:100px;
height:30px;
background:#CA226B;
text-align:center;
font-family:tahoma;
font-size:12px;
padding:5px;
color:#f7f7f7;
margin-top:10px;
margin-bottom:10px;
 float: left;
 position: fixed;
 left: -95px;
 top: 355px;
 -moz-transition:all 0.3s ease-in;
 -webkit-transition:all 0.3s ease-in;
 -o-transition:all 0.3s ease-in;
 -ms-transition:all 0.3s ease-in;
 z-index: 1000;
}
 
.picor6:hover {
left: 0px;
}​

.picor7 {
width:100px;
height:30px;
background:#CA226B;
text-align:center;
font-family:tahoma;
font-size:12px;
padding:5px;
color:#f7f7f7;
margin-top:10px;
margin-bottom:10px;
 float: left;
 position: fixed;
 left: -95px;
 top: 355px;
 -moz-transition:all 0.3s ease-in;
 -webkit-transition:all 0.3s ease-in;
 -o-transition:all 0.3s ease-in;
 -ms-transition:all 0.3s ease-in;
 z-index: 1000;
}
 
.picor7:hover {
left: 0px;
}​

.picor8 {
width:100px;
height:30px;
background:#CA226B;
text-align:center;
font-family:tahoma;
font-size:12px;
padding:5px;
color:#f7f7f7;
margin-top:10px;
margin-bottom:10px;
 float: left;
 position: fixed;
 left: -95px;
 top: 355px;
 -moz-transition:all 0.3s ease-in;
 -webkit-transition:all 0.3s ease-in;
 -o-transition:all 0.3s ease-in;
 -ms-transition:all 0.3s ease-in;
 z-index: 1000;
}
 
.picor8:hover {
left: 0px;
}
 
.picor9 {
width:100px;
height:30px;
background:#CA226B;
text-align:center;
font-family:tahoma;
font-size:12px;
padding:5px;
color:#f7f7f7;
margin-top:10px;
margin-bottom:10px;
 float: left;
 position: fixed;
 left: -95px;
 top: 355px;
 -moz-transition:all 0.3s ease-in;
 -webkit-transition:all 0.3s ease-in;
 -o-transition:all 0.3s ease-in;
 -ms-transition:all 0.3s ease-in;
 z-index: 1000;
}
 
.picor9:hover {
left: 0px;
}​

</style>
<div class="picor">پیکور</div>
<a href="http://picor.ir" title="عنوان یک"><div class="picor">عنوان یک</div></a>
<a href="http://picor.ir/about-us" title="عنوان دو"><div class="picor1">عنوان دو</div></a>
<a href="http://picor.ir/contact" title="عنوان سه"><div class="picor2">عنوان سه</div></a>
<a href="http://picor.ir/links" title="عنوان چهار
"><div class="picor4">عنوان چهار
</div></a>
<a href="http://blog.picor.ir" title="عنوان 5"><div class="picor5">عنوان 5</div></a>
<a href="http://picor.ir/guest" title="عنوان 6"><div class="picor6">عنوان 6</div></a>
<a href="http://picor.ir/post" title="عنوان 7"><div class="picor7">عنوان 7</div></a>
<a href="http://picor.ir/guest-post" title="عنوان 8"><div class="picor8">عنوان 8</div></a>​

<a href="http://picor.ir/guest-post" title="عنوان 9"><div class="picor9">عنوان 9</div></a>​

لینک دمو :​


البته یه مسئله دیگه ای هم که هست من میخوام در حالت عادی هر منو یه آیکون داشته باشه و وقتی نشانگر موس رفت روی آیکون ،مثل دمو بصورت کشویی باز بشه و عنوان منو به نمایش در بیاد.​

در این خصوص هم راهنمایی بفرمایید​

ممنون​
 

Mohammad

مدیر انجمن
پرسنل مدیریت
چیزی که خودت انجام دادی رو بی زحمت بزار اینجا تا بررسی کنیم. (آنلاین)

 

hamed-sli

تازه وارد
من از همون کدهایی که سایت مذکور گذاشته بود استفاده کردم و فقط موارد 6 به بعد رو اضافه کردم

کلا من یه منو میخوام مثل منوی کناری این سایت که شبکه های اجتماعی توش قرار داره :



در این خصوص راهنمایی بفرمایید

 
بالا