Наверх
РегистрацияВход на сайтВход на сайт
  • Страница 1 из 1
  • 1
Перекрывающиеся кнопки в меню на CSS
Bars90 Дата: Ср, 27 Июл 2011, 12:06 | Сообщение # 1
Суперактивный
Сообщений: 312
Дополнительные сведения »
Offline


1. CSS
Code
ul {   
    font-family: Georgia;   
    list-style-type: none;   
    font-size: 14px;   
    color: #fff;   
    height: 50px;   
    width: 510px;   
    margin: 0 auto;   
    padding-top: 15px;   
    }   
ul li {   
    float: left;   
    padding: 1px;   
    text-align: center;   
    }   
ul li a {   
    float: left;   
    display: block;   
    background: #0094D6;   
    text-decoration: none;   
    color: #fff;   
    position: relative;   
    }   
ul li a:hover {   
    background: #FF7700;   
    z-index: 10;   
    margin: 0 -10px;   
    top: -10px;   
    opacity: 0.7;   
    filter: alpha(opacity=70);   
    -moz-opacity: 0.7;   
    -khtml-opacity: 0.7;   
    }   
ul li a span {   
    float: left;   
    display: block;   
    padding: 10px 0;   
    text-decoration: none;   
    color: #fff;   
    width: 100px;   
    cursor: pointer;   
    }   
ul li a:hover span {   
    width: 120px;   
    padding: 20px 0;   
    }


2. HTML
Code
<ul>   
    <li><a href="" title=""><span>Главная</span></a></li>   
    <li><a href="" title=""><span>Новости</span></a></li>   
    <li><a href="" title=""><span>Контакты</span></a></li>   
    <li><a href="" title=""><span>Портфолио</span></a></li>   
    <li><a href="" title=""><span>Форум</span></a></li>   
</ul>



Сообщение отредактировал Bars90 - Ср, 27 Июл 2011, 15:50
 
Андрей Дата: Ср, 27 Июл 2011, 12:49 | Сообщение # 2
Знаток
Сообщений: 958
Дополнительные сведения »
Offline
Bars90, где скриншот?

 
Bars90 Дата: Ср, 27 Июл 2011, 15:49 | Сообщение # 3
Суперактивный
Сообщений: 312
Дополнительные сведения »
Offline
Андрей, стоит



Сообщение отредактировал Bars90 - Ср, 27 Июл 2011, 15:50
 
  • Страница 1 из 1
  • 1
Поиск: