Странная проблема с CSS

Здравствуйте, я уже много лет не занимался веб-дизайном, работаю над проектом и столкнулся со странной проблемой CSS.

Я надеюсь, что кто-то может помочь с этим.

Ниже приведен код.

Я использую MS Expression.

Когда я сохраняю страницу и открываю ее в любом браузере, первый пункт меню в порядке, второй помещается непосредственно под первым, а третий и четвертый располагаются через двойной интервал.

Я также приложу снимок экрана.

Спасибо, если сможете помочь. <стиль> .падать { положение: относительное; отображение: встроенный блок; }

.dropdown-content {

дисплей: нет;

позиция: абсолютная;

цвет фона: #8b8b8b;

минимальная ширина: 200 пикселей;

box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

отступы: 12 пикселей 16 пикселей;

z-индекс: 1;

}

.dropdown:hover .dropdown-content {

дисплей: блок;

}

==========================================================

Вот пункты меню

Меню

Пункт 1

Пункт 2

Пункт 3

Пункт 4

Я использую его для редактора и других небольших инструментов. Прошло много времени, просто нужно это сделать. Спасибо за предложение. Мне это кажется неправильным. Они выглядят слишком близко, нет. Есть ли в наши дни лучший способ составить меню? Будет ли список работать лучше?

Что означает эта «кривая левая»? Просто сделать изогнутую рамку/обертку для списка? И имидж в этом поможет.



Другие новости: в поле редактирования на этой странице есть кнопка кода (вернее, кнопка вставки, где вы можете выбрать «код» - пожалуйста, ради бога, воспользуйтесь ею?) . Этот CSS — беспорядок, и я почти уверен, что его можно немного сократить — не могли бы вы создать jsfiddle или что-то в этом роде? Облегчает редактирование и отображение внесенных изменений...

Если у вас есть время для других вопросов, вот часть меню.

Есть ли у вас идеи, как изменить длину, чтобы она не охватывала всю ширину страницы.

А есть ли способ добавить фоновое изображение на главную панель? Я попытался добавить фон: url("curveleft.png"); к следующим Это не сработало.

Спасибо, если у вас есть еще немного времени, чтобы научить идиота

#cssmenu {

высота: 37 пикселей;

дисплей: блок;

граница: сплошная 1 пиксель;

радиус границы: 5 пикселей;

ширина: авто;

цвет границы: #080808;

маржа: 0;

заполнение: 0;

фон: URL("curveleft.png");

размер фона: обложка;

}

============================================================================

Основной CSS

#cssменю,

#cssmenu ул,

#cssmenu ли,

#cssmenu а {

граница: нет;

высота строки: 1;

маржа: 0;

заполнение: 0;

}

#cssmenu {

высота: 37 пикселей;

дисплей: блок;

граница: сплошная 1 пиксель;

радиус границы: 5 пикселей;

ширина: авто;

цвет границы: #080808;

маржа: 0;

заполнение: 0;

}

#cssmenu > ул {

стиль списка: внутри нет;

маржа: 0;

заполнение: 0;

}

#cssmenu > ul > li {

стиль списка: внутри нет;

плыть налево;

отображение: встроенный блок;

положение: относительное;

маржа: 0;

заполнение: 0;

выравнивание текста: по левому краю;

}

#cssmenu.align-center > ул {

выравнивание текста: по центру;

}

#cssmenu.align-center > ul > li {

плавающий: нет;

поле слева: -3px;

}

#cssmenu.align-center ul ul {

выравнивание текста: по левому краю;

}

#cssmenu.align-center > ul > li:first-child > a {

граница-радиус: 0;

}

#cssmenu > ul > li > a {

контур: нет;

дисплей: блок;

положение: относительное;

выравнивание текста: по центру;

текстовое оформление: нет;

текстовая тень: 1px 1px 0 rgba(0, 0, 0, 0,4);

вес шрифта: 700;

размер шрифта: 13 пикселей;

семейство шрифтов: Arial, Helvetica, без засечек;

правая граница: 1 пиксель сплошной #080808;

цвет: #ffffff;

отступы: 12 пикселей 20 пикселей;

}

#cssmenu > ul > li:first-child > a {

граница-радиус: 5 пикселей 0 0 5 пикселей;

}

#cssmenu > ul > li > a:after {

содержание: "";

позиция: абсолютная;

граница справа: 1 пиксель, сплошная;

верх: -1 пиксель;

внизу: -1px;

справа: -2 пикселей;

z-индекс: 99;

цвет границы: #3c3c3c;

}

#cssmenu ul li.has-sub:hover > a:after {

верх: 0;

внизу: 0;

}

#cssmenu > ul > li.has-sub > aefore { содержание: ""; позиция: абсолютная; верх: 18 пикселей; справа: 6 пикселей; граница: 5 пикселей, сплошная прозрачная; border-top: 5 пикселей сплошной #ffffff; } #cssmenu > ul > li.has-sub:hover > aefore {

верх: 19 пикселей;

}

#cssmenu > ul > li.has-sub:hover > a {

отступ снизу: 14 пикселей;

z-индекс: 999;

цвет границы: #3f3f3f;

}

#cssmenu ul li.has-sub:hover > ul,

#cssmenu ul li.has-sub:hover > div {

дисплей: блок;

}

#cssmenu > ul > li.has-sub > a:hover,

#cssmenu > ul > li.has-sub:hover > a {

фон: #3f3f3f;

цвет границы: #3f3f3f;

}

#cssmenu ul li > ul,

#cssmenu ul li > div {

дисплей: нет;

ширина: авто;

позиция: абсолютная;

верх: 38 пикселей;

фон: #3f3f3f;

граница-радиус: 0 0 5 пикселей 5 пикселей;

z-индекс: 999;

отступ: 10 пикселей 0;

}

#cssmenu ul li > ul {

ширина: 200 пикселей;

}

#cssmenu ул ул ул {

позиция: абсолютная;

}

#cssmenu ul ul li:hover > ul {

слева: 100%;

верх: -10 пикселей;

радиус границы: 5 пикселей;

}

#cssmenu ul li > ul li {

дисплей: блок;

стиль списка: внутри нет;

положение: относительное;

маржа: 0;

заполнение: 0;

}

#cssmenu ul li > ul li a {

контур: нет;

дисплей: блок;

положение: относительное;

шрифт: Arial 10pt, Helvetica, без засечек;

цвет: #ffffff;

текстовое оформление: нет;

текстовая тень: 1px 1px 0 rgba(0, 0, 0, 0,5);

маржа: 0;

отступы: 8 пикселей 20 пикселей;

}

#cssменю,

#cssmenu ul ul > li:hover > a,

#cssmenu ul ul li a:hover {

фон: #3c3c3c;

фон: -moz-linear-gradient(top, #3c3c3c 0%, #222222 100%);

фон: -webkit-gradient(линейный, слева вверху, слева внизу, цвет-стоп (0%, #3c3c3c), цвет-стоп (100%, #222222));

фон: -webkit-linear-gradient(top, #3c3c3c 0%, #222222 100%);

фон: -o-linear-gradient(top, #3c3c3c 0%, #222222 100%);

фон: -ms-linear-gradient(top, #3c3c3c 0%, #222222 100%);

фон: линейный градиент (сверху, #3c3c3c 0%, #222222 100%);

}

#cssmenu > ul > li > a:hover { фон: #080808; цвет: #ffffff; } #cssmenu ul ul a:hover { цвет: #ffffff; } #cssmenu > ul > li.has-sub > a:hoverefore { border-top: 5 пикселей сплошной #ffffff; }

Помимо MS Expression, проблема заключается в двойных разрывах после «Item2» и «Item3»:

 <div class="dropdown"> <span>Menu</span> <div class="dropdown-content"><p align="left">Item 1<br>Item 2</br><br>Item 3</br><br>Item 4</br></p></div></div>

Код (разметка):

Извините, больше не буду публиковать подобное. Честно говоря, это меню ниже. Справа так много черного пространства, что мне хочется что-нибудь с ним сделать.
http://cssmenumaker.com/menu/css3-drop-down-menu