Follow along with the video below to see how to install our site as a web app on your home screen.
Бележка: This feature may not be available in some browsers.
#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;
}
Вместо 100 px сложи проценти 100 %critrate каза:така става,но се отсича изображението ... няма ли начин да стане така,че дори и да е по-малък текста в менюто , hover изображението да е малко,а ако текста е много да се разширява,а не да свършва до някъде
<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>