Выравнивание горизонтального меню по левому и правому краю

@DMBS · Регистрация: 19.11.2012

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

Здравствуйте имеется следующее меню:

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

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
86
87
88
89
90
91
92
93
94
95
96
#cssmenu {padding: 0; margin: 0px 0px -18px 0px} 
#cssmenu ul, #cssmenu li {list-style: none; margin: 0; padding: 0; float: left}
#cssmenu ul {position: absolute; z-index: 597; }
#cssmenu ul li { min-height: 1px; vertical-align: middle}
#cssmenu ul li.hover,
#cssmenu ul li:hover {position: relative; z-index: 599; cursor: default;}
#cssmenu ul ul {visibility: hidden; position: absolute; top: 100%; left: 0; 
z-index: 598; width: 100%;}
#cssmenu ul ul li {margin:0px 54px 0px 0px; width:170px; text-align:center} 
#cssmenu ul ul ul {top: 0; left: auto; right: -99.5%; }
#cssmenu ul li:hover > ul { visibility: visible;}
#cssmenu ul ul {bottom: 0; left: 0;}
#cssmenu ul ul {margin-top: 0; }
#cssmenu ul ul li {font-weight: bold;} 
#cssmenu a { display: block; line-height: 1em; text-decoration: none; }
 
 
 
#cssmenu {
  background: #333;
  border-top:250px solid #FFF;
  font-family: 'Oxygen Mono', Tahoma, Arial, sans-serif; 
  font-size: 13px;
 
}
 
  #cssmenu > ul { *display: inline-block; }
 
  #cssmenu:after, #cssmenu ul:after {
    content: '';
    display: block;
    clear: both; 
}
 
 
#cssmenu a {
    background: #333;
    color: darkorange; 
    padding: 2px 14.7px; 
    border:1px solid #FFF;
}
#cssmenu ul { text-transform: uppercase; }
 
    #cssmenu ul ul {
      text-transform: none;
      min-width: 150px; 
}
      #cssmenu ul ul a {
        background: #333;
        color: #FFF;
 
        border-color:white;
        line-height: 110%;
        padding: 16px 20px; 
}
      #cssmenu ul ul ul { border-top: 0 none; }
 
      #cssmenu ul ul li { position: relative }
 
 
#cssmenu > ul > li > a { line-height: 40px;display: block} 
 
 
        #cssmenu ul ul li:hover > a { background:#36b6d6; }
 
        #cssmenu ul ul li:last-child > a {
          border-radius: 0 0 3px 3px;
          box-shadow: 0 1px 0 #1b9bff; 
}
        #cssmenu ul ul li:last-child:hover > a { border-radius: 0 0 0 3px; }
 
        #cssmenu ul ul li.has-sub > a:after {
          content: '+';
          position: absolute;
          top: 50%;
          right: 15px;
          margin-top: -8px;
}
 
 
    #cssmenu ul li:hover > a, #cssmenu ul li.active > a {
      background: #36b6d6;
      color: #FFF;
}
    #cssmenu ul li.has-sub > a:after {
      content: '+';
      margin-left: 5px; 
}
    #cssmenu ul li.last ul {
      left: auto;
      right: 0; 
}
      #cssmenu ul li.last ul ul {
        left: auto;
        right: 99.5%;
}

@Артем Д. · 25.06.2014, 12:54

Неплохо было бы еще и HTML код меню посмотреть. )

@DMBS · 25.06.2014, 12:59 **[ТС]**

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
   <div id="cssmenu">
       <ul>
    <li>@Html.ActionLink("О компании", "Index", "Home")
       <ul>
        <li>@Html.ActionLink("Стратегия","Strategy","Home")</li>
           <li>@Html.ActionLink("")</li>
        </ul>
        </li>
           <li><li>@Html.ActionLink("")</li>
       <li>@Html.ActionLink("")
       <ul>
           <li>@Html.ActionLink("")</li>
       </ul>
           </li>
           <li>@Html.ActionLink("")</li>
           <li>@Html.ActionLink("")</li>
           <li>@Html.ActionLink("")
               <ul>
           <li>@Html.ActionLink("")</li>
           <li>@Html.ActionLink("")</li>
           </ul>
       </li>
           </ul>
       </div>

Новые блоги и статьи Все статьи Все блоги /
Загрузка PNG-файла с альфа-каналом с помощью библиотеки SDL3_image на Android 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .
Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом

@Артем Д. 46 / 46 / 10 Регистрация: 08.12.2010 Сообщений: 105
	25.06.2014, 12:54
	Неплохо было бы еще и HTML код меню посмотреть. ) 0

Выравнивание горизонтального меню по левому и правому краю

Решение