Jump to content
  • 0

Выподающее верхнее меню отображается криво.


voldemar86
 Share

Question

Помогите допилить выподающее верхнее меню. Вот сайт http://passto8g.bget.ru/

Проблема в том что "Оргтехника и Полиграфия" имеют нормальный вид в выподающем меню, потому что высота пока нормальное. Но вот "Запчасти и принадлежности" и "Электростанции" после рисунка и названии имеется пространство которое надо в белый цвет закрасить background-color: #FFF;. Он не растягивается у меня по высоте. Конечно там проблем много.

Link to comment
Share on other sites

2 answers to this question

Recommended Posts

  • 0

#slmenu ul li div .supermenu-left{} задать position:relative;

И вставить тот уголок через :after с position:absolute, указав top:0 и bottom:0 для растяжения по высоте. Спозиционировать картинку в фоне вниз на 100%. Ну и закрасить остальной фон в #fff. Добавить z-index:-1;. Ширина же там фиксированная. Теперь уголок будет ездить внизу, независимо от высоты выподающей области.

А тот блок, в котором он сейчас - убрать. Он совсем уж не на том месте. В Опере разлет еще больший, чем в FF.

Edited by Kray Storm
Link to comment
Share on other sites

  • 0

Kray Storm можно чуть по подробнее , что то у меня не совсем получилось.

Вот как я сделал.

#slmenu ul li div .supermenu-left {

display: inline-block;

float: left;

z-index: 9999;

width: 100%;

min-height: 180px;

position:relative;

}

#slmenu ul li div .supermenu-left:after{

bottom: 0;

top: 0;

left: -6px;

position: absolute;

z-index: 9;

background: #fff url('../image/list1.png') 0% 100% no-repeat;

width: 113px;

height: 84px;

z-index:-1

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