Изменить вывод меню

@karpos · Регистрация: 19.05.2013

Студворк — интернет-сервис помощи студентам

Всем еще раз привет. Получилось у меня внедрить год в wordpress у меня вопросик http://codepen.io/anon/pen/uaLJA

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
 <div class="main">
            <div class="head"></div>
            <div class="content-main">
                <ul class="top-menu">
                    <li><a href="#">Гостивая книга</a></li>
                    <li><a href="#">Вакансий</a></li>
                    <li><a href="#">Контакты</a></li>
                    <li><a href="#">Тендеры</a></li>
                </ul>
                <div class="content">
                    <p></p>
                </div>
                <div class="sidebar">
                    <div class="vidget">
                        <ul class="vidgetMenu">
                            <li><a href="#">О группе</a>
                                <ul>
                                    <li><a href="#">Проекты в работе</a></li>
                                    <li><a href="#">Готовые проекты</a></li>
                                    <li><a href="#">Магазин проектов</a></li>
                                </ul>
                            </li>
                            <li><a href="#">Предприятия группы</a></li>
                            <li><a href="#">Новости</a></li>
                            <li><a href="#">Проекты</a>
                                <ul>
                                    <li><a href="#">Проекты в работе</a></li>
                                    <li><a href="#">Готовые проекты</a></li>
                                    <li><a href="#">Магазин проектов</a></li>
                                </ul>
                            </li>
                            <li><a href="#">Пресс-служба</a></li>
                            <li><a href="#">Свидетельства и лицензии</a></li>
                            <li><a href="#">Отзывы партнеров</a></li>
                            <li><a href="#">Статьи</a></li>
                            <li><a href="#">Поставщикам</a></li>
                            <li><a href="#">Магазин недвижемости</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="clear"></div>
        <div class="footer"> 
        </div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
  /*
*{
    padding:0;
    margin:0;   
}
 
body {
    background:url(images/bg-body.png) center top no-repeat;
}
 
.main {
    width:1024px;
    margin:0 auto;
}
 
.content-main {
    width:1024px; 
    margin:0 auto; 
}
 
.head {
    height:125px; 
    /*background:url(images/bg-body.jpg) right top no-repeat;*/
}
 
.top-menu {
    list-style:none;
    overflow:hidden;
    /*background:#127dc1;*/
    -webkit-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    -moz-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
 
.top-menu li {
    height:100%;
    float:right;
    margin:0 3px 0 0;
    padding:5px 45px 5px 45px;
    background:#127dc1;
    text-align:center;
    display:table;
    /*background:url(images/bg-top-menu.png) left center no-repeat;*/
}
 
.top-menu span {
    vertical-align: middle;
    display: table-cell;
}
 
.content {
    width:700px;
    float:right;
    margin:10px 0 0 0;
}
.sidebar {
    width:250px;
    margin:0 0 0 10px;
}
.vidget ul {
    list-style:none;
    margin:10px 0 0 0;
}
 
.vidget li {
    padding:5px 0 5px 25px;
    margin:0 0 2px 0;
    background:#d3e8fb;
}
 
li:hover ul {
    display:block;
}
.vidget ul ul{
  display: none;
}
.vidget ul .show{
  display: block;
}
.vidget ul ul li {
  background: #fff;
  padding-left: 40px;
}
 
/* end class на страницах движка */

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
 (function() {
 
            function addClass(el, clsName) {
 
              var cls = el.className,
                  clsArr = cls.split(' ');
 
              if(clsArr[0]) {
                 el.className += ' ' + clsName;
              }else{
                el.className = clsName;
              }
 
            }
 
            function removeClass(el, clsName) {
 
               var cls = el.className,
                   clsArr = cls.split(' ');
 
               for(var i = 0, len = clsArr.length; i < len; i++) {
                  if(clsArr[i] === clsName) {
                      clsArr.splice(i, 1);
                  }
               }
 
               el.className = clsArr.join(' ');
 
            }
 
            function hasClass(el, clsName) {
 
              var cls = el.className.split(' ');
 
              for(var i = 0, len = cls.length; i < len; i++) {
                 if(cls[i] === clsName){
                    return true;
                 }
              }
 
              return false;
 
            }
 
            function toggleClass(clsName) {
 
              return function() {
 
                  var  innerMenu = this.parentNode.querySelector('ul');
 
                  if(hasClass(innerMenu, clsName)) {
                     removeClass(innerMenu, clsName);
                  }else{
                     addClass(innerMenu, clsName);
                  }
 
                  return false; 
 
              };
 
            }
 
            window.onload = function() {
 
                var vidgetLinks = document.querySelectorAll('.vidgetMenu > li > a');
 
                [].slice.call(vidgetLinks).forEach(function(link){
                   link.onclick = toggleClass('show');
                 }); 
 
            };
 
         })();

как мне обыграть чтоб вложенные ли были белыми и не было отступа.

Комментарий администратора

Правила форума пункт 5.19
Запрещено размещать ссылки на коды программ, расположенные на других сайтах. Коды программ должны размещаться на форуме.
Ссылка на песочницу - это бонус.

Новые блоги и статьи Все статьи Все блоги /
Оттенки серого Argus19 18.03.2026 Оттенки серого Нашёл в интернете 3 прекрасных модуля: Модуль класса открытия диалога открытия/ сохранения файла на Win32 API; Модуль класса быстрого перекодирования цветного изображения в оттенки. . .	SDL3 для Desktop (MinGW): Рисуем цветные прямоугольники с помощью рисовальщика SDL3 на Си и C++ 8Observer8 17.03.2026 Содержание блога Финальные проекты на Си и на C++: finish-rectangles-sdl3-c. zip finish-rectangles-sdl3-cpp. zip	Символические и жёсткие ссылки в Linux. algri14 15.03.2026 Существует два типа ссылок — символические и жёсткие. Ссылка в Linux — это запись в каталоге, которая может указывать либо на inode «файла-ИСТОЧНИКА», тогда это будет «жёсткая ссылка» (hard link),. . .	[Owen Logic] Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ФедосеевПавел 14.03.2026 Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ВВЕДЕНИЕ Выполняя задание на управление насосной группой заполнения резервуара,. . .
делаю науч статью по влиянию грибов на сукцессию anaschu 13.03.2026 прикрепляю статью	SDL3 для Desktop (MinGW): Создаём пустое окно с нуля для 2D-графики на SDL3, Си и C++ 8Observer8 10.03.2026 Содержание блога Финальные проекты на Си и на C++: hello-sdl3-c. zip hello-sdl3-cpp. zip Результат:	Установка CMake и MinGW 13.1 для сборки С и C++ приложений из консоли и из Qt Creator в EXE 8Observer8 10.03.2026 Содержание блога MinGW - это коллекция инструментов для сборки приложений в EXE. CMake - это система сборки приложений. Здесь описаны базовые шаги для старта программирования с помощью CMake и. . .	Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки Neotwalker 08.03.2026 Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .