Не нравятся результаты поиска? Попробуйте другой поиск!
dle-faq.ru FAQ (все вопросы) Общие вопросы по вёрстке Подчеркивание ссылок в верхнем меню

Подчеркивание ссылок в верхнем меню


     03.11.2013    Общие вопросы по вёрстке, Стили (CSS)    2294

вопрос
Вечер добрый.

Нужно сделать подчеркивание пунктиром ссылок в верхнем меню. Однако когда использую известный всем border-bottom: 1px dashed ..., то все ссылки подчеркиваются одной сплошной пунктирной линией, а как сделать так, чтобы каждая ссылка имела свое подчеркивание?

Сейчас стоит стандартное подчеркивание и оно отображается как следует.

Код CSS:

/*topmenu*/
.topmenu { padding-top: 0px; margin-top: 17px; height: 33px; }
    #topmenu { display: inline; }
        #topmenu li a, #topmenu li a b, #topmenu li { float: left; height: 33px; }
            #topmenu li a, #topmenu li a b { background: url("../images/topmenu.png") no-repeat 0 -999px; }
            #topmenu li a { text-decoration: none; font-size: 1.15em; line-height: 33px; color: #333; }
                #topmenu li a b { font-size: 14px; font-weight: normal; cursor: pointer; padding: 0 9px; text-decoration: underline; }
                #topmenu li a:hover { background-color: #ffba00; background-position: 0 0;  }
                    #topmenu li a:hover b { background-position: 100% -33px; text-decoration: none; }

                #topmenu li a.selected { background-color: #ffba00; background-position: 0 -66px; }
                    #topmenu li a.selected b { background-position: 100% -99px; }

                .submenu { overflow: hidden; margin: -1px 0 0 0; padding: 9px 0; background: #ffba00; position: absolute; top: 0; z-index:999; width: 220px; visibility: hidden;
                    -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;
                    -moz-border-radius-topleft: 0; -webkit-border-top-left-radius: 0; border-top-left-radius: 0;
                }
                .submenu ul { border-top: 1px solid #e0a300; border-bottom: 1px solid #ffd82d; }
                    .submenu a { background: url("../images/lines.png") no-repeat 0 -999px; border-bottom: 1px solid #e0a300; border-top: 1px solid #ffd82d; font-weight: bold; width: 100%; padding: 4px 0; display: block; text-indent: 12px; text-decoration: none !important; color: #333; font-size: 12px; }
                    .submenu a:hover { background: #ffc732 url("../images/lines.png") repeat; }

Ответил: grallast


Вы видимо не туда писали стиль, попробуйте это:
#topmenu li a {border-bottom:dashed;}

Если та же ситуация, значит нужно переписывать стили.

Комментарии пользователей (3)

dim
78 | 17

dim - 3 ноября 2013 23:56 - Юзер

К сожалению, не помогло.

grallast
4

31 | 8

grallast - 4 ноября 2013 00:28 - Юзер

я немного опечатался,
#topmenu li a {border-bottom:1px dashed #000;}

где #000 - код цвета

dim
78 | 17

dim - 4 ноября 2013 12:05 - Юзер

Спасибо, но это не решает проблему. :(

Изображение для наглядности: http://s57.radikal.ru/i155/1311/77/75cfa96fc874.jpg

Чтобы комментировать - войдите или зарегистрируйтесь на сайте

Похожие вопросы