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

вопрос

Вечер добрый.

Нужно сделать подчеркивание пунктиром ссылок в верхнем меню. Однако когда использую известный всем 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;}

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

<script> window.addEventListener('load', ()=> { $('#category').on('change', function() { var value = $(this).val(); if ($.isArray(value)) { ShowOrHideEx("xfield_holder_year", jQuery.inArray('1', value) != -1 || jQuery.inArray('2', value) != -1 ); } else { ShowOrHideEx("xfield_holder_year", value == 1 || value==2); } }) }); </script> year доп поле . 1 и 2 катег

Fancybox.bind("[data-highslide]", { groupAttr: 'data-highslide', idle:2000, Thumbs: false, caption: (fancybox, slide) => { if( slide.thumbEl && slide.thumbEl.alt ) { return slide.thumbEl.alt } } });

3 комментария

Юзер

115

dim - 2015-05-133 ноября 2013 23:56 - #18663

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

grallast - 2015-05-134 ноября 2013 00:28 - #18665

я немного опечатался,

#topmenu li a {border-bottom:1px dashed #000;}

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

dim - 2015-05-134 ноября 2013 12:05 - #18670

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

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

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

Ответил: grallast

3 комментария

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

Масштабируемая картинка через допполе

Вывод title под соответствующей картинкой

Не отображается модальное окно в IE 10

Картинка в javascript

Как прописать в ajax/freedback.php значение выбранное в календаре?

не работают подгруженные шрифты

Как ограничить параметр стиля?

Сначала видео потом HTML. Как?

Как сделать кнопки слайдеру?

Как перевести табличную вёрстку в html5 ?