۱۸-۸-۱۳۹۳, ۰۵:۵۲ عصر
دوستان من یه منو طراحی کردم که میخوام یه عکس کوچیک بالای سر منو قرار بگیره و با حرکت موس روی ایتمهای منو این عکس هم حرکت کنه و بالای سر ایتمی که کلیک میکنم عکس وایسه
خیلی روش کار کردم ولی فایده نداشت نمیدونم مشکل کارم چیه - کدی که نوشتم اینه ولی کار نمیکنه -- جالبه برای #menu تنها کار میکنه ولی همین که ایتم منو در ادامه کد میاد کار نمیکنه ممنون میشم راهنماییم کنین
کد
خیلی روش کار کردم ولی فایده نداشت نمیدونم مشکل کارم چیه - کدی که نوشتم اینه ولی کار نمیکنه -- جالبه برای #menu تنها کار میکنه ولی همین که ایتم منو در ادامه کد میاد کار نمیکنه ممنون میشم راهنماییم کنین
کد
کد:
<style>
*{
margin:0;
padding:0;
}
.clear-fix{
clear: both;
}
a{
text-decoration: none;
}
#nav{
background-color:#0592FA;
height:35px;
border-bottom-right-radius:10px;
border-bottom-left-radius:10px;
border-style: outset;
border-color:#fff;
width:990px;
font-size:18px;
font-family:'bhoma';
margin-top:-5px;
}
#nav ul{
list-style: none;
padding:0;
margin:0;
}
#nav li{
position: relative;
}
#nav > ul > li{
float: right;
border-left:2px solid #000;
}
#nav > ul > li > a{
display: inline-block;
color: white;
padding: 0px 10px;
line-height: 35px;
}
#nav > ul > li a:hover > {
background-color:darkred;
color: white;
text-decoration:overline;
}
/* styles for sub menu */
#nav .sub-menu{
display: none;
position: absolute;
}
#nav .sub-menu > li > a{
display: block;
width: 120px;
background-color: darkred;
color: white;
padding:7px 10px;
font-size:14px;
}
#nav .sub-menu > li:hover > a{
background-color:#FC6;
color:#000;
}
#nav li:hover > .sub-menu{
display: block;
}
/* styles for sub-menu under sub-menu */
#nav .sub-menu > li > .sub-menu{
right: 140px;
top: 0;
}
#nav > ul > li a:hover #yas{
animation: mani 1s linear;
-moz-animation: mani 1s linear;
}
@keyframes mani{
from{right:300px;}
to{right:350px;}
}
@-moz-keyframes mani{
from{right:300px;}
to{right:350px;}
}