مشکل از اینجا است که شما به همه ی divها کلاس یکسان دادید و همه divها سوار هم می باشند که شما فکر می کنید فقط یک div نمایش می دهد. به فرض مثال این جوری بنویسی دو تا را نمایش می دهد.
.divKarkonan {
margin: auto;
float: right;
width: 100%;
background-color: #CCCCCC;
height: 250px;
}
.divkarkonanMenu {
border-style: solid;
border-color: rgb(15, 66, 99);
margin: 30px auto auto auto;
float: right;
width: 150px;
height: 205px;
border-radius: 8px;
border-top-width: thin;
background-color: #fff;
position: absolute;
z-index: 0;
}
.divKarkonanMenuTop {
width: 140px;
height: 30px;
background: rgb(15, 66, 99);
background: -moz-linear-gradient(90deg, rgb(15, 66, 99) 47%, rgb(89, 124, 255) 95%);
background: -webkit-linear-gradient(90deg, rgb(15, 66, 99) 47%, rgb(89, 124, 255) 95%);
background: -o-linear-gradient(90deg, rgb(15, 66, 99) 47%, rgb(89, 124, 255) 95%);
background: -ms-linear-gradient(90deg, rgb(15, 66, 99) 47%, rgb(89, 124, 255) 95%);
background: rgb(15, 66, 99);
position: absolute;
z-index: 1;
margin: 20px 8px auto;
border-radius: 8px;
}
.divRiasat {
margin: auto 10px auto 10px;
float: right;
width: 154px;
}
.divkarkonanMenu1 {
border-top: thin solid rgb(15, 66, 99);
position: absolute;
margin: 100px auto auto auto;
float: right;
width: 150px;
height: 205px;
border-radius: 8px;
background-color: #fff;
z-index: 0;
top: -19px;
left: 54px;
border-left-style: solid;
border-left-color: rgb(15, 66, 99);
border-right-style: solid;
border-right-color: rgb(15, 66, 99);
border-bottom-style: solid;
border-bottom-color: rgb(15, 66, 99);
}
.divKarkonanMenuTop1 {
width: 140px;
height: 30px;
background: rgb(15, 66, 99);
background: -moz-linear-gradient(90deg, rgb(15, 66, 99) 47%, rgb(89, 124, 255) 95%);
background: -webkit-linear-gradient(90deg, rgb(15, 66, 99) 47%, rgb(89, 124, 255) 95%);
background: -o-linear-gradient(90deg, rgb(15, 66, 99) 47%, rgb(89, 124, 255) 95%);
background: -ms-linear-gradient(90deg, rgb(15, 66, 99) 47%, rgb(89, 124, 255) 95%);
background: rgb(15, 66, 99);
position: absolute;
z-index: 1;
margin: 200px 8px auto;
border-radius: 8px;
top: -136px;
left: 57px;
}
.divRiasat1 {
margin: auto 100px auto 10px;
float: right;
width: 154px;
}
این هم html ش
<div id="divKarkonan1" class="divKarkonan">
<div id="divriasat" class="divRiasat1">
<div id="divR1" class="divkarkonanMenu1"></div>
<div id="divR2" class="divKarkonanMenuTop1"></div>
</div>
<div id="divamozesh" class="divRiasat">
<div id="divA1" class="divkarkonanMenu"></div>
<div id="divA2" class="divKarkonanMenuTop"></div>
</div>
<div id="divfarhangi" class="divRiasat">
<div id="divF1" class="divkarkonanMenu"></div>
<div id="divF2" class="divKarkonanMenuTop"></div>
</div>
<div id="divPajohesh" class="divRiasat">
<div id="divP1" class="divkarkonanMenu"></div>
<div id="divP2" class="divKarkonanMenuTop"></div>
</div>
<div id="divmali" class="divRiasat">
<div id="divM1" class="divkarkonanMenu"></div>
<div id="divM2" class="divKarkonanMenuTop"></div>
</div>
</div>