Jump to content
  • 0

Проблемный ховер


chiffenok
 Share

Question

Есть такое меню с выпадашкой и ховер. Основную проблемы составляет ховер, который выходит за границы li, притом должна закрывать белый бодер. Понятно что тут без position:absolute не обойтись. Но когда ложу ссылку в див (котому задан position:absolute), она входит из потока и последующие ссылки занимают ее место.Что можно сделать с этой проблемой? Может есть другие решения, возможно с jquery

fcaefd2181d6.jpg

выпадашка впринципе сделана(на 2ой пункт меню)

верстка: http://jsfiddle.net/CBRhf/

Решение должно быть кроссбраузерно до ie7 и без пустых тегов. при том в данной ситуации нельзя увеличить высоту li и background на них переложитью

  • Like 1
Link to comment
Share on other sites

5 answers to this question

Recommended Posts

  • 0

хм, таким как вы лиж бы наехать

я не хочу что бы за меня сделали, а хочу что бы помогли или подсказали решение, форум для того и существует, а подфорум называется проблемы верстки, у меня возникла проблема на которую я потратила много времени и так и не смогла решить, просто так я бы не стала писать, у меня уже были такие ситуации люди помогали и я им очень благодарна

как будто я вам тут целый сайт выложила и говорю верстайте!

а если вы не хотите помогать так вас ни кто силком не заставляет, а такие сообщения это просто флуд

  • Like 2
Link to comment
Share on other sites

  • 0

Есть такое меню с выпадашкой и ховер. Основную проблемы составляет ховер, который выходит за границы li, притом должна закрывать белый бодер. Понятно что тут без position:absolute не обойтись. Но когда ложу ссылку в див (котому задан position:absolute), она входит из потока и последующие ссылки занимают ее место.Что можно сделать с этой проблемой? Может есть другие решения, возможно с jquery

fcaefd2181d6.jpg

выпадашка впринципе сделана(на 2ой пункт меню)

верстка: http://jsfiddle.net/CBRhf/

Решение должно быть кроссбраузерно до ie7 и без пустых тегов. при том в данной ситуации нельзя увеличить высоту li и background на них переложитью

По поводу проблемы с закрытием белого бордера - можно поиграть с отрицательным левыми и правым margin элемента списка и положительным (равным отрицательным по модулю margin) padding-ом эл-та списка.

http://jsfiddle.net/7SPnJ/

Перенес background из .b-main-menu__list в .b-main-menu__item и добавил стиль

    .b-main-menu__item:hover{
margin-right:-10px;
padding-right:10px;
margin-left:-10px;
padding-left:10px;
height:50px;
background:#b3daf1;
}

Link to comment
Share on other sites

  • 0

По поводу проблемы с закрытием белого бордера - можно поиграть с отрицательным левыми и правым margin элемента списка и положительным (равным отрицательным по модулю margin) padding-ом эл-та списка.

http://jsfiddle.net/7SPnJ/

Перенес background из .b-main-menu__list в .b-main-menu__item и добавил стиль

    .b-main-menu__item:hover{
margin-right:-10px;
padding-right:10px;
margin-left:-10px;
padding-left:10px;
height:50px;
background:#b3daf1;
}

я же спициально написала что нельзя перекладывать бэграунд на li, мне нужно что бы меню тянулось до конца а не обрывалось после поледнего пункта и том с закруглеными краями

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • 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