Hover Menu

critrate

Registered
Здравейте.Имам проблем с менюто ми .. не мога да си направя hovera

ето това ми е менюто

4802.jpg


там ,където пише начало бокса е за ховер...Опитвах какво ли не,но не съм добре с css и не мога да се справя.

Благодаря ви предварително.
 
[css]
.button:hover {
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);
-moz-opacity: 0.6;
opacity:0.6;
}
[/css]

За class и вече си правиш настройките в къдравите скоби :)
 
съжалявам,но не успях

ето това ми е кода за менюто

Код:
#menu {
	width: 820px;
	height: 30px;
	border: 1px solid #c8c8c8;
	-webkit-border-top-left-radius: 7px; 
	-moz-border-radius-topleft: 7px; 
	border-top-left-radius: 7px; 
	-webkit-border-top-right-radius: 7px; 
	-moz-border-radius-topright: 7px; 
	border-top-right-radius: 7px;
	background: #FFF;
	margin: 0 auto;
}

ul {
    list-style: none;
    float: left;
}
 
ul li {
    padding: 6px 0px 0px 5px;
    float: left;
    display: inline; 
    margin: 0 10px;

}
 
ul li a {
    text-decoration: none;
    float:left;
   	color:#4a4949;
    font-size:15px;
}


описах се да направя така,но не излиза картинката като посоча на даден линк,а само ми дава текста по-прозрачен

Код:
.ul,li:hover {
        background: url(images/menu-hover.png);
        filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);
        -moz-opacity: 0.6;
        opacity:0.6;
}
 
да,но пак не ми се появява картинката като посоча на текст от менюто
 
така става,но се отсича изображението ... няма ли начин да стане така,че дори и да е по-малък текста в менюто , hover изображението да е малко,а ако текста е много да се разширява,а не да свършва до някъде
 
critrate каза:
така става,но се отсича изображението ... няма ли начин да стане така,че дори и да е по-малък текста в менюто , hover изображението да е малко,а ако текста е много да се разширява,а не да свършва до някъде
Вместо 100 px сложи проценти 100 % :)
 
да,но не стана както написах в предишния пост. т.е. ако текста е малък ховера си остава голям ако текста е голям ховера си остава голям,но не стига за да покрие целия текст
 
Код:
<div id="menu">
		<ul>
<li><a href="#"><div id="icons-box"><img src="images/icons/test.png"></div>Home</a></li>
<li><a href="#"><div id="icons-box"><img src="images/icons/test.png"></div>Link</a></li>
<li><a href="#"><div id="icons-box"><img src="images/icons/test.png"></div>Link</a></li>
<li><a href="#"><div id="icons-box"><img src="images/icons/test.png"></div>Link</a></li>
<li><a href="#"><div id="icons-box"><img src="images/icons/test.png"></div>Link</a></li>
</ul>
</div>
 
ul,li:hover
{
width : 100px;
height : 20px;
background-image: url(images/menu-hover.png);
background-repeat:repeat-x;
}


background-repeat: repeat-x;
or
background-repeat: repeat-y;
or
background-repeat: no-repeat;
or
background-repeat: inherit;
 

Горе