zeinab-es'haghi
چهارشنبه 19 مهر 1391, 11:30 صبح
سلام دوستان
چند تا سوال در css داشتم
تو این عکسی که پیوست کردم،وقتی روی منو می رم،دور منو رنگ تقریبا سفیدی میاد که می خوام اونو تغییر بدم اما نتونستم.
این هم کد استایلش هست:
/* begin Menu */
/* menu structure */
ul.joominahmenu a, ul.joominahmenu a:link, ul.joominahmenu a:visited, ul.joominahmenu a:hover
{
outline: none;
position: relative;
z-index: 11;
}
ul.joominahmenu, ul.joominahmenu ul
{
display: block;
margin: 0;
padding: 0;
border: 0;
list-style-type: none;
}
ul.joominahmenu li
{
margin: 0;
padding: 0;
border: 0;
display: block;
float: right;
position: relative;
z-index: 5;
background: none;
}
ul.joominahmenu li:hover{
z-index: 10000;
white-space: normal;
}
ul.joominahmenu li li{
float: none;
width: auto;
}
ul.joominahmenu li:hover>ul {
visibility: visible;
top: 100%;
}
ul.joominahmenu li li:hover>ul {
top: 0;
right: 100%;
}
ul.joominahmenu:after, ul.joominahmenu ul:after
{
content: ".";
height: 0;
display: block;
visibility: hidden;
overflow: hidden;
clear: both;
}
ul.joominahmenu, ul.joominahmenu ul {
min-height: 0;
}
ul.joominahmenu ul
{
visibility: hidden;
position: absolute;
z-index: 10;
right: 0;
top: 0;
background-image: url('../images/spacer.gif');
padding: 10px 30px 30px 30px;
margin: -10px -30px 0 0;
}
ul.joominahmenu ul.joominahmenu-left-to-right {
right: auto;
left: 0;
margin: -10px 0 0 -30px;
}
ul.joominahmenu ul.joominahmenu-right-to-left {
left: auto;
right: 0;
margin: -10px -30px 0 0;
}
ul.joominahmenu ul ul
{
padding: 30px 10px 30px 30px;
margin: -30px -10px 0 0;
margin-right: -11px;
z-index: -1;
}
ul.joominahmenu ul ul.joominahmenu-left-to-right
{
right: auto;
left: 0;
padding: 30px 30px 30px 10px;
margin: -30px 0 0 -10px;
margin-left: -11px;
}
ul.joominahmenu ul ul.joominahmenu-right-to-left
{
left: auto;
right: 0;
padding: 30px 10px 30px 30px;
margin: -30px -10px 0 0;
margin-right: -11px;
}
ul.joominahmenu li li:hover>ul.joominahmenu-left-to-right {
right: auto;
left: 100%;
}
ul.joominahmenu li li:hover>ul.joominahmenu-right-to-left {
left: auto;
right: 100%;
}
ul.joominahmenu{
position:relative;
padding: 10px 9px 10px 9px;
}
/* end menu structure */
/* menu bar */
.joominanav
{
margin:0 auto;
min-height: 55px;
z-index: 100;
margin-top: 0;
margin-bottom: 0;
}
.joominanav:before, .joominanav:after{
background-image: url('../images/nav.png');
}
.joominanav:before{
right: 5px;
}
.joominanav:after{
width: 5px;
}
/* end menu bar */
.joominanav-outer{
position:absolute;
width:100%;
}
.joominahmenu-extra1
{
position: relative;
display: block;
float: left;
width: auto;
height: 55px;
background-position: center;
}
.joominahmenu-extra2
{
position: relative;
display: block;
float: right;
width: auto;
height: 55px;
background-position: center;
}
.joominahmenu
{
float: right;
}
/* images in menu items */
ul.joominahmenu img.joominamenu-image, ul.joominahmenu img.joominamenu-image-left
{
vertical-align: middle;
margin-right: 5px;
}
ul.joominahmenu img.joominamenu-image-right
{
vertical-align: middle;
margin-left: 5px;
}
/* end Menu */
/* begin MenuItem */
ul.joominahmenu>li>a
{
position: relative;
display: block;
height: 35px;
cursor: pointer;
text-decoration: none;
color: #FAFAFA;
padding: 0 12px;
line-height: 35px;
text-align: center;
}
ul.joominahmenu>li>a:before, ul.joominahmenu>li>a:after
{
position: absolute;
display: block;
content:' ';
top: 0;
bottom:0;
z-index: -1;
background-image: url('../images/menuitem.png');
}
ul.joominahmenu>li>a:before
{
left: 0;
right: 4px;
background-position: top left;
}
ul.joominahmenu>li>a:after
{
width: 4px;
right: 0;
background-position: top right;
}
.joominahmenu a, .joominahmenu a:link, .joominahmenu a:visited, .joominahmenu a:hover
{
text-align: right;
text-decoration: none;
}
ul.joominahmenu>li>a.active:before {
background-position: bottom left;
}
ul.joominahmenu>li>a.active:after {
background-position: bottom right;
}
ul.joominahmenu>li>a.active {
font-weight:bold;
color:white;
text-shadow:2px 2px 4px #000000;
border-bottom:3px solid #2a98fa;
}
ul.joominahmenu>li>a:hover:before, ul.joominahmenu>li:hover>a:before {
background-position: center left;
}
ul.joominahmenu>li>a:hover:after, ul.joominahmenu>li:hover>a:after {
background-position: center right;
}
ul.joominahmenu>li>a:hover, ul.joominahmenu>li:hover>a{
color: #FAFAFA;
}
.joominahmenu a:hover.separator-without-submenu
{
cursor: default;
}
.joominahmenu a:hover.separator-without-submenu .t
{
color: #FAFAFA;
}
.joominahmenu li:hover a.separator-without-submenu .t
{
color: #FAFAFA;
}
a:hover.separator-without-submenu .r, a:hover.separator-without-submenu .l
{
top: 0 !important;
}
/* end MenuItem */
/* begin MenuSeparator */
ul.joominahmenu>li:before
{
position:absolute;
display: block;
content:' ';
top:0;
right: -9px;
width:9px;
height: 35px;
background: url('../images/menuseparator.png') center center no-repeat;
}
ul.joominahmenu>li {
margin-right:9px;
}
ul.joominahmenu>li:first-child {
margin-right:0;
}
ul.joominahmenu>li:first-child:before{
display:none;
}
/* end MenuSeparator */
/* begin MenuSubItem */
.joominahmenu ul a
{
display: block;
white-space: nowrap;
height: 28px;
background-image: url('../images/subitem.png');
background-position: left top;
background-repeat: repeat-x;
border-width: 1px;
border-style: solid;
border-top-width: 0;
border-color: #828282;
min-width: 7em;
text-align: right;
text-decoration: none;
line-height: 28px;
color: #FAFAFA;
font-size: 12px;
margin:0;
padding: 0 17px;
}
.joominahmenu ul>li:first-child>a
{
border-top-width: 1px;
}
.joominahmenu ul a:link, .joominahmenu ul a:visited, .joominahmenu ul a:hover, .joominahmenu ul a:active
{
text-align: right;
text-decoration: none;
line-height: 28px;
color: #FAFAFA;
font-size: 12px;
margin:0;
padding: 0 17px;
}
.joominahmenu ul li a:hover
{
color: #FAFAFA;
background-position: left bottom;
border-color: #39679D;
border-top-width: 1px !important;
}
.joominahmenu ul li a.joominahmenu-before-hovered
{
border-bottom-width: 0 !important;
}
.joominahmenu ul li:hover>a
{
color: #FAFAFA;
background-position: left bottom;
border-color: #39679D;
border-top-width: 1px !important;
}
/* end MenuSubItem */
سوال 2 این که وقتی می خوایم منو ها شیشه ای بشن،تصویر منو رو باید تو فوتوشاپ و ... شیشه ای کنیم یا با css میشه؟
سوال 3 این که بخوام دور منو ها گرد بشه ،تو اینترنت اکسپلورر باید چی کار کنم؟ تو مرورگرای دیگه بلدم
سوال 4 می خوام اون منوهایی که زیر منو دارن یه فلش جلوشون بیاد.
پیشاپیش ممنون از راهنماییتون93787
چند تا سوال در css داشتم
تو این عکسی که پیوست کردم،وقتی روی منو می رم،دور منو رنگ تقریبا سفیدی میاد که می خوام اونو تغییر بدم اما نتونستم.
این هم کد استایلش هست:
/* begin Menu */
/* menu structure */
ul.joominahmenu a, ul.joominahmenu a:link, ul.joominahmenu a:visited, ul.joominahmenu a:hover
{
outline: none;
position: relative;
z-index: 11;
}
ul.joominahmenu, ul.joominahmenu ul
{
display: block;
margin: 0;
padding: 0;
border: 0;
list-style-type: none;
}
ul.joominahmenu li
{
margin: 0;
padding: 0;
border: 0;
display: block;
float: right;
position: relative;
z-index: 5;
background: none;
}
ul.joominahmenu li:hover{
z-index: 10000;
white-space: normal;
}
ul.joominahmenu li li{
float: none;
width: auto;
}
ul.joominahmenu li:hover>ul {
visibility: visible;
top: 100%;
}
ul.joominahmenu li li:hover>ul {
top: 0;
right: 100%;
}
ul.joominahmenu:after, ul.joominahmenu ul:after
{
content: ".";
height: 0;
display: block;
visibility: hidden;
overflow: hidden;
clear: both;
}
ul.joominahmenu, ul.joominahmenu ul {
min-height: 0;
}
ul.joominahmenu ul
{
visibility: hidden;
position: absolute;
z-index: 10;
right: 0;
top: 0;
background-image: url('../images/spacer.gif');
padding: 10px 30px 30px 30px;
margin: -10px -30px 0 0;
}
ul.joominahmenu ul.joominahmenu-left-to-right {
right: auto;
left: 0;
margin: -10px 0 0 -30px;
}
ul.joominahmenu ul.joominahmenu-right-to-left {
left: auto;
right: 0;
margin: -10px -30px 0 0;
}
ul.joominahmenu ul ul
{
padding: 30px 10px 30px 30px;
margin: -30px -10px 0 0;
margin-right: -11px;
z-index: -1;
}
ul.joominahmenu ul ul.joominahmenu-left-to-right
{
right: auto;
left: 0;
padding: 30px 30px 30px 10px;
margin: -30px 0 0 -10px;
margin-left: -11px;
}
ul.joominahmenu ul ul.joominahmenu-right-to-left
{
left: auto;
right: 0;
padding: 30px 10px 30px 30px;
margin: -30px -10px 0 0;
margin-right: -11px;
}
ul.joominahmenu li li:hover>ul.joominahmenu-left-to-right {
right: auto;
left: 100%;
}
ul.joominahmenu li li:hover>ul.joominahmenu-right-to-left {
left: auto;
right: 100%;
}
ul.joominahmenu{
position:relative;
padding: 10px 9px 10px 9px;
}
/* end menu structure */
/* menu bar */
.joominanav
{
margin:0 auto;
min-height: 55px;
z-index: 100;
margin-top: 0;
margin-bottom: 0;
}
.joominanav:before, .joominanav:after{
background-image: url('../images/nav.png');
}
.joominanav:before{
right: 5px;
}
.joominanav:after{
width: 5px;
}
/* end menu bar */
.joominanav-outer{
position:absolute;
width:100%;
}
.joominahmenu-extra1
{
position: relative;
display: block;
float: left;
width: auto;
height: 55px;
background-position: center;
}
.joominahmenu-extra2
{
position: relative;
display: block;
float: right;
width: auto;
height: 55px;
background-position: center;
}
.joominahmenu
{
float: right;
}
/* images in menu items */
ul.joominahmenu img.joominamenu-image, ul.joominahmenu img.joominamenu-image-left
{
vertical-align: middle;
margin-right: 5px;
}
ul.joominahmenu img.joominamenu-image-right
{
vertical-align: middle;
margin-left: 5px;
}
/* end Menu */
/* begin MenuItem */
ul.joominahmenu>li>a
{
position: relative;
display: block;
height: 35px;
cursor: pointer;
text-decoration: none;
color: #FAFAFA;
padding: 0 12px;
line-height: 35px;
text-align: center;
}
ul.joominahmenu>li>a:before, ul.joominahmenu>li>a:after
{
position: absolute;
display: block;
content:' ';
top: 0;
bottom:0;
z-index: -1;
background-image: url('../images/menuitem.png');
}
ul.joominahmenu>li>a:before
{
left: 0;
right: 4px;
background-position: top left;
}
ul.joominahmenu>li>a:after
{
width: 4px;
right: 0;
background-position: top right;
}
.joominahmenu a, .joominahmenu a:link, .joominahmenu a:visited, .joominahmenu a:hover
{
text-align: right;
text-decoration: none;
}
ul.joominahmenu>li>a.active:before {
background-position: bottom left;
}
ul.joominahmenu>li>a.active:after {
background-position: bottom right;
}
ul.joominahmenu>li>a.active {
font-weight:bold;
color:white;
text-shadow:2px 2px 4px #000000;
border-bottom:3px solid #2a98fa;
}
ul.joominahmenu>li>a:hover:before, ul.joominahmenu>li:hover>a:before {
background-position: center left;
}
ul.joominahmenu>li>a:hover:after, ul.joominahmenu>li:hover>a:after {
background-position: center right;
}
ul.joominahmenu>li>a:hover, ul.joominahmenu>li:hover>a{
color: #FAFAFA;
}
.joominahmenu a:hover.separator-without-submenu
{
cursor: default;
}
.joominahmenu a:hover.separator-without-submenu .t
{
color: #FAFAFA;
}
.joominahmenu li:hover a.separator-without-submenu .t
{
color: #FAFAFA;
}
a:hover.separator-without-submenu .r, a:hover.separator-without-submenu .l
{
top: 0 !important;
}
/* end MenuItem */
/* begin MenuSeparator */
ul.joominahmenu>li:before
{
position:absolute;
display: block;
content:' ';
top:0;
right: -9px;
width:9px;
height: 35px;
background: url('../images/menuseparator.png') center center no-repeat;
}
ul.joominahmenu>li {
margin-right:9px;
}
ul.joominahmenu>li:first-child {
margin-right:0;
}
ul.joominahmenu>li:first-child:before{
display:none;
}
/* end MenuSeparator */
/* begin MenuSubItem */
.joominahmenu ul a
{
display: block;
white-space: nowrap;
height: 28px;
background-image: url('../images/subitem.png');
background-position: left top;
background-repeat: repeat-x;
border-width: 1px;
border-style: solid;
border-top-width: 0;
border-color: #828282;
min-width: 7em;
text-align: right;
text-decoration: none;
line-height: 28px;
color: #FAFAFA;
font-size: 12px;
margin:0;
padding: 0 17px;
}
.joominahmenu ul>li:first-child>a
{
border-top-width: 1px;
}
.joominahmenu ul a:link, .joominahmenu ul a:visited, .joominahmenu ul a:hover, .joominahmenu ul a:active
{
text-align: right;
text-decoration: none;
line-height: 28px;
color: #FAFAFA;
font-size: 12px;
margin:0;
padding: 0 17px;
}
.joominahmenu ul li a:hover
{
color: #FAFAFA;
background-position: left bottom;
border-color: #39679D;
border-top-width: 1px !important;
}
.joominahmenu ul li a.joominahmenu-before-hovered
{
border-bottom-width: 0 !important;
}
.joominahmenu ul li:hover>a
{
color: #FAFAFA;
background-position: left bottom;
border-color: #39679D;
border-top-width: 1px !important;
}
/* end MenuSubItem */
سوال 2 این که وقتی می خوایم منو ها شیشه ای بشن،تصویر منو رو باید تو فوتوشاپ و ... شیشه ای کنیم یا با css میشه؟
سوال 3 این که بخوام دور منو ها گرد بشه ،تو اینترنت اکسپلورر باید چی کار کنم؟ تو مرورگرای دیگه بلدم
سوال 4 می خوام اون منوهایی که زیر منو دارن یه فلش جلوشون بیاد.
پیشاپیش ممنون از راهنماییتون93787