VPF::Проблемы с меню на CSS - Форум программистов

Niakita

Дата 2.1.2013, 05:41 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 112
Регистрация: 22.12.2010

Репутация: нет
Всего: нет

Утро всем доброе.
Делаю меню на CSS, столкнулся с проблемами:
1. не получается закруглить края у меню, с помощью border-radius: 3px; получается вот так: http://ipic.su/img/img7/fs/Zakruglennoe-menyu.1357089253.png
2. не получается с помощью z-index вывести выпадающее меню на задний план
3. когда применяю элемент hover к выпадающему меню - цветом выделяются почему то только буквы.

Меню оригинал, которое пытаюсь скопировать - http://cssmenumaker.com/menu/blue-drop-down-menu#

CSS меню, то что уже сделал:

Код


/*---------------------*/
#menu125,#menu125 li ul{margin:0px; padding:0px;list-style:none;}

#menu125 > li{
  float:left;
  width:auto;

}

#menu125 li ul{
  display:none;
  position:absolute;
    z-index:100;
  width:auto;
}
#menu125 li:hover ul{display:block}

/*---------MAIN MENU------------*/
#menu125 > li{
  background: #3b5998;
  border-radius: 0px;
  border: 0px solid #2b4479;
  -webkit-box-shadow: 0 1px 2px rgba(2, 2, 2, .25), inset 0 1px 1px rgba(255, 255, 255, .15);
  -o-box-shadow: 0 1px 2px rgba(2, 2, 2, .25), inset 0 1px 1px rgba(255, 255, 255, .15);
  -moz-box-shadow: 0 1px 2px rgba(2, 2, 2, .25), inset 0 1px 1px rgba(255, 255, 255, .15);
  -ms-box-shadow: 0 1px 2px rgba(2, 2, 2, .25), inset 0 1px 1px rgba(255, 255, 255, .15);
  box-shadow: 0 1px 2px rgba(2, 2, 2, .25), inset 0 1px 1px rgba(255, 255, 255, .15);

  text-align:center;
  padding:10px 15px 10px 15px;

}
#menu125 > li:hover{
  background: #2f4b87;
  -webkit-box-shadow: inset 0 0 1px #1f325d;
  -o-box-shadow: inset 0 0 1px #1f325d;
  -moz-box-shadow: inset 0 0 1px #1f325d;
  -ms-box-shadow: inset 0 0 1px #1f325d;
  box-shadow: inset 0 0 1px #1f325d;
  -webkit-transition: all ease .3s;
  -o-transition: all ease .3s;
  -moz-transition: all ease .3s;
  -ms-transition: all ease .3s;
  transition: all ease .3s;
  }

#menu125 > li > a{
    padding: 0;
  margin: 0;
  line-height: 1;
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: white;
  -webkit-transition: all ease .3s;
  -o-transition: all ease .3s;
  -moz-transition: all ease .3s;
  -ms-transition: all ease .3s;
  transition: all ease .3s;

}

/*---------SUB MENU------------*/
#menu125 li ul{
   background: #3b5998;
  border-radius: 0px;
  border: 0px solid #2b4479;
  -webkit-box-shadow: 0 1px 2px rgba(2, 2, 2, .25), inset 0 1px 1px rgba(255, 255, 255, .15);
  -o-box-shadow: 0 1px 2px rgba(2, 2, 2, .25), inset 0 1px 1px rgba(255, 255, 255, .15);
  -moz-box-shadow: 0 1px 2px rgba(2, 2, 2, .25), inset 0 1px 1px rgba(255, 255, 255, .15);
  -ms-box-shadow: 0 1px 2px rgba(2, 2, 2, .25), inset 0 1px 1px rgba(255, 255, 255, .15);
  box-shadow: 0 1px 2px rgba(2, 2, 2, .25), inset 0 1px 1px rgba(255, 255, 255, .15);

   padding: 10px 60px 10px 10px;
  width: auto;
    height: auto;

   line-height: 40px; /* вертикальное расстояние между строчками */

 margin-top: 10px; /* позиционирование меню */
 margin-left: -15px;

 }
#menu125 li ul li{
  text-align:left;
 padding: 0px;

}
#menu125 li ul li a{

  padding: 0;
  margin: 0;
  line-height: 1;
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: white;
  -webkit-transition: all ease .3s;
  -o-transition: all ease .3s;
  -moz-transition: all ease .3s;
  -ms-transition: all ease .3s;
  transition: all ease .3s;

}
#menu125 li ul li a:hover{

background: #2f4b87;
    -webkit-box-shadow: inset 0 0 1px #1f325d;
    -o-box-shadow: inset 0 0 1px #1f325d;
    -moz-box-shadow: inset 0 0 1px #1f325d;
    -ms-box-shadow: inset 0 0 1px #1f325d;
    box-shadow: inset 0 0 1px #1f325d;
    -webkit-transition: all ease .3s;
    -o-transition: all ease .3s;
    -moz-transition: all ease .3s;
    -ms-transition: all ease .3s;
    transition: all ease .3s;

}

Arantir

Дата 2.1.2013, 07:17 (ссылка)

(нет голосов)

Загрузка ...

Рыбак без удочки

Профиль
Группа: Участник
Сообщений: 960
Регистрация: 18.11.2012

Репутация: 5
Всего: 55

Цитата(Niakita @ 2.1.2013, 04:41

)

1. не получается закруглить края у меню, с помощью border-radius: 3px; получается вот так:

А что же вы хотели получить, применяя border-radius к каждому пункту меню?

Цитата(Niakita @ 2.1.2013, 04:41

)

2. не получается с помощью z-index вывести выпадающее меню на задний план

В любом-любом справочнике по css написано, что z-index работает только при таких значения position, как relative, fixed и absolute.

Цитата(Niakita @ 2.1.2013, 04:41

)

3. когда применяю элемент hover к выпадающему меню - цветом выделяются почему то только буквы.

Потому что вы меняете его у ссылки, а ссылка - элемент строчный и имеет размеры контента (в частности - текста).

В общем все в корне неправильно smile

Вы фон меню создаете самим пунктами, а в примере невооруженным глазом видно, что фон самостоятельный. Особенно с правого края меню, где есть кусочек, не являющийся пунктом меню.
Именно для этого фона уголки и ставятся.
Внимательно посмотрите на свои селекторы. Во некоторых местах вы изменяете совсем не тот элемент, что думаете.

И смотреть в готовые исходники - не так уж страшно =) Если сильно не получается - попробуйте понять разницу между вашим кодом и кодом оригинального меню.

--------------------

interface Жопа {
// ATTENTION: has to be implemented by every class of the project for proper project work
}

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »