Jump to content

gorkaps

Newbie
  • Posts

    5
  • Joined

  • Last visited

gorkaps's Achievements

Explorer

Explorer (1/14)

0

Reputation

  1. Вот) https://jsfiddle.net/g0rkaps/tz9fueuc/13/
  2. Всем привет подскажите пожалуйста как добавить пункты в подменю? Чтобы из подменю выезжали в сторону ещё 1 подменю. http://jsfiddle.net/6x9w5dvv/
  3. gorkaps

    Меню

    Спасибо огромное)
  4. gorkaps

    Меню

    Ну да что то типа такого) но менюшка открывается при наведении У меня не получается сделать как вот на этом сайте http://kupipolis.ru/ (не реклама) Забыл добавить вот что) http://codepen.io/anon/pen/dPJMZR .menu h4 {padding: 5px 10px;margin: 0;width: 276%;display: inline-block;background: url('/left-button.png');min-height: 0px;border-radius: 3px;color: #80BFFF;}
  5. gorkaps

    Меню

    Всем привет подскажите пожалуйста почему при наведении на меню оно выдвигается а когда убираешь мышку оно задвигается? Как можно сделать чтобы оно не задвигалась обратно? И при выдвигании толкало в низ следующее меню а то подменю пролазиет под вторым таким же меню. <ul class="menu"> <li> <a href="#"><h4>ТЕСТ</h4> </a> <ul> <li><a href="#">Что КАСКО?</a></li> <li><a href="#" class="messages">тест</a></li> <li><a href="#" class="signout">ТЕСТЫ</a></li> </ul> </li></ul><br><ul class="menu"> <li> <a href="#"><h4>ТЕСТ</h4> </a> <ul> <li><a href="#">Что 66575</a></li> <li><a href="#" class="messages">тест</a></li> <li><a href="#" class="signout">ТЕСТЫ</a></li> </ul> </li> </li></ul>.menu,.menu ul,.menu li,.menu a { padding: 0; border: none; outline: none; } .menu {height: 50px; width: 200px; -webkit-border-radius: 2px; -moz-border-radius: 1px;} .menu li { position: relative; list-style: none; float: left; display: block; height: 4px;}menu li a { display: block; padding: 0 1px; margin: 6px 0; line-height: 28px; text-decoration: none; border-left: 1px solid #393942; border-right: 1px solid #4f5058; font-family: Helvetica, Arial, sans-serif; font-weight: bold; font-size: 13px; color: #ffffff; -webkit-transition: color .2s ease-in-out; -moz-transition: color .2s ease-in-out; -o-transition: color .2s ease-in-out; -ms-transition: color .2s ease-in-out; transition: color .2s ease-in-out;}.menu li:first-child a { border-left: none; }.menu li:last-child a{ border-right: none; } .menu li:hover > a { color: #8fde62; }.menu ul { position: absolute; display: block; top: 46px; left: 0; color: #945954;padding-top: 0px;padding-right: 0px;padding-bottom: 5px;padding-left: 14px; border: solid 1px #345996; opacity: 0; background: #3964ac; position: absolute; -webkit-border-radius: 0 0 0px 0px; -moz-border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px; -webkit-transition: opacity .25s ease .1s; -moz-transition: opacity .25s ease .1s; -o-transition: opacity .25s ease .1s; -ms-transition: opacity .25s ease .1s; transition: opacity .25s ease .1s;} .menu li:hover > ul { opacity: 1; } .menu ul li { height: 0; overflow: hidden; padding: 0; font-size: 12px; white-space: pre; -webkit-transition: height .25s ease .1s; -moz-transition: height .25s ease .1s; -o-transition: height .25s ease .1s; -ms-transition: height .25s ease .1s; transition: height .25s ease .1s;} .menu li:hover > ul li { height: 36px; overflow: visible; padding: 0;} body a {color: #ffffff;text-decoration: underline; padding: 0px;}.menu ul li a { width: 100px; padding: 0px 114px 0px 0px; margin: 0; border: none;} .menu ul li:last-child a { border: none; } .menu a.documents { background: url() no-repeat 1px center; }.menu a.messages { background: url() no-repeat 1px center; }.menu a.signout { background: url(/img/arrow.png) no-repeat 1px center; }
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy