Помогите разобратся с меню для сайта ... - HTML и CSS

s88s · 23.09.2014, 13:20

Доброго времени суток !

У меня есть код меню для сайта помогите убрать полоску наскрине отметил стрелкой

Вот сам код этой менюхи

Код:

<html>
<head>

<style type="text/css">
.vyp-menu, .vyp-menu li, .vyp-menu ul, .vyp-menu a, .vyp-menu:after {
  margin: 0; 
  padding: 0;
  z-index: 200;
  display: block;
}

.vyp-menu:after { /* убираем после меню действие float */ 
  clear: both;
  content: "";}

.vyp-menu > li { float: left; } /* горизонтальное размещение пунктов */

.vyp-menu li {
  white-space: nowrap; /* содержимое на одной строке */ 
  position: relative;
}

.vyp-menu > li > ul > li, .vyp-menu > li > ul > li > ul > li, .vyp-menu > li > ul > li > ul > li > ul > li {
  height: 0px;
  -moz-transition: 0.3s; -o-transition: 0.3s; -webkit-transition: 0.3s; -ms-transition: 0.3s;
  overflow: hidden;}

.vyp-menu > li:hover > ul > li, .vyp-menu > li > ul > li:hover > ul > li, .vyp-menu > li > ul > li > ul > li:hover > ul > li {
  height: 40px;
  overflow: visible;}
  
.vyp-menu li ul li, .vyp-menu li ul li a {
 width: 100%;
 background: #ffffff;
  background: -webkit-linear-gradient(#fff, #808080);
  background: -moz-linear-gradient(#fff, #808080);
  background: -o-linear-gradient(#fff, #80808);
  background: -ms-linear-gradient(#fff, #808080);
  background: linear-gradient(#fff, #808080);
  border-radius: 5px; 
 }  /* фон подпунктов равной ширины */

.vyp-menu ul { position: absolute; }

.vyp-menu ul ul { left: 100%; top: 0; padding: 0 14px; } /* третий и четвёртый список позиционируется не вниз, а вправо. Можно часть списков повернуть и влево, но тогда width должен быть задан в px */

.vyp-menu {
  background: #808080;
  background: -webkit-linear-gradient(#fff, #808080);
  background: -moz-linear-gradient(#fff, #808080);
  background: -o-linear-gradient(#fff, #808080);
  background: -ms-linear-gradient(#fff, #808080);
  background: linear-gradient(#fff, #808080);
  border-radius: 5px;
}

.vyp-menu > li:first-child {border-radius: 5px 0 0 5px; border-left: none;}

.vyp-menu > li {border-left: 1px solid #ccc;}

.vyp-menu > li:hover {background: #fff;}

.vyp-menu li li {background: #fff content-box; padding: 1px 1px 0px 0px; border-right: 1px solid #ccc;}

.vyp-menu li li:last-child {border-radius: 0 0 5px 5px;}

.vyp-menu li a {
  line-height: 40px;
  padding: 0 14px;
  text-decoration: none;
}



</style>

</head>
<body>

<ul class="vyp-menu">
  <li><a href="#1">пункт 1</a></li>
  <li><a href="#2">пункт 2</a>
        <ul>
          <li><a href="#2.1">подпункт 2.1</a>
                <ul>
                  <li><a href="#2.1.1">подпункт 2.2.1</a></li>
                  <li><a href="#2.2.2">подпункт 2.2.2</a></li>
                  <li><a href="#2.2.3">подпункт 2.2.3</a>
                      <ul>
                        <li><a href="#2.2.3.1">подпункт 2.2.3.1</a></li>
                        <li><a href="#2.2.3.2">подпункт 2.2.3.2</a></li>
                        <li><a href="#2.2.3.3">подпункт 2.2.3.3</a></li>
                      </ul>
                  </li>
                </ul>
          </li>
          <li><a href="#2.2">подпункт 2.2</a></li>
          <li><a href="#2.3">подпункт 2.3</a></li>
        </ul>
  </li>
  <li><a href="#3">пункт 3</a></li>
</ul>

</body>
</html>

Stilet · 23.09.2014, 13:34

А что за полоска? Ты можешь посмотреть в отладчике для браузера?

Dush · 23.09.2014, 14:22

убрал эту строку

Код:

.vyp-menu li li {background: #fff content-box; padding: 1px 1px 0px 0px; border-right: 1px solid #ccc;}

и строчка пропала

s88s · 23.09.2014, 16:01

Цитата:

Сообщение от Dush

убрал эту строку

Код:

.vyp-menu li li {background: #fff content-box; padding: 1px 1px 0px 0px; border-right: 1px solid #ccc;}

и строчка пропала

спасибо за помощь помогло ... а не знаете для чего она нужна ???

решил с этой строчкой по экспериментировать и вот как получилось убрать полоску и оставить эту строчку ... может конечно она там не нужна но все же пусть будет

вот как сейчас у меня

Код:

.vyp-menu li li {background: #fff content-box; padding: 0px 0px 0px 0px; border-right: 1px solid #ccc;}

спасибо за помощь ... тему можно закрывать )))

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Меню для сайта. Некорректное поведение.	8Observer8	HTML и CSS	6	13.11.2013 09:52
Создать горизонтальное меню для сайта, с регистрацией	Vladimir_Chernov	Помощь студентам	1	12.04.2012 10:52
Меню для сайта	Николай999	HTML и CSS	0	15.07.2010 20:44
Программа для создания меню для сайта	iukash	Софт	3	06.06.2009 13:10

23.09.2014, 13:34	#2
Stilet Белик Виталий :) Старожил Регистрация: 23.07.2007 Сообщений: 57,097	А что за полоска? Ты можешь посмотреть в отладчике для браузера? I'm learning to live...

23.09.2014, 14:22	#3
Dush Форумчанин Регистрация: 29.09.2011 Сообщений: 116	убрал эту строку Код: `.vyp-menu li li {background: #fff content-box; padding: 1px 1px 0px 0px; border-right: 1px solid #ccc;}` и строчка пропала