hamed-sli
تازه وارد
سلام دوستان
من میخوام یه منوی عمودی کنار سایتم داشته باشم که توی این منو 9 عنوان داشته باشم و هر عنوان هم لینک بشن به یه سایت دیگه.
طبق کد هایی که توی آموزش سایت پیکور بود 9 عنوان رو ایجاد کردم اما نمیدونم چرا از عنوان 6 به بعد به نمایش در نمیاد!البته منویی که سایت مذکور قرار داده بود هم 6 عنوان بیشتر نداشت!
کد های یه بررسی بکنید و بفرمایید مشکل از کجاست؟
من میخوام یه منوی عمودی کنار سایتم داشته باشم که توی این منو 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;
}
.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;
}
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;
}
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>
<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>
لینک دمو :
لینک ها تنها برای اعضای سایت قابل نمایش است.
البته یه مسئله دیگه ای هم که هست من میخوام در حالت عادی هر منو یه آیکون داشته باشه و وقتی نشانگر موس رفت روی آیکون ،مثل دمو بصورت کشویی باز بشه و عنوان منو به نمایش در بیاد.
در این خصوص هم راهنمایی بفرمایید
ممنون