JQuery + CSS выпадающее меню со стилем "вкладка"

Question

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

Я сделал это, но есть проблема - как-то есть участки границы неправильного цвета - почему?(проверено в FF, Chorme и IE9)

Это изображение моей проблемы:

Это скрипка моей работы: Fiddle - Пример моей работы

Как я могу это исправить?

Спасибо!

Answer 1

Если вы установите границу прозрачной или белой, она там и должна быть отрисована, чтобы углы не сработали ...

Используйте это:

border-left:0 none;
border-right:0 none;
border-bottom:0 none;

Я протестировал ваш пример, и, похоже, он решает вашу проблему!Если нет, пожалуйста, дайте мне знать;)

Answer 2

Внезапно у меня появилась удивительная идея, и я попробовал ее.

Прежде всего я понял, что эта проблема - белые границы, которые я использовал.

Моя идея была: удалить нижнюю границуЯ сделал и вместо этого использовал background-color - он работал.

вот новая скрипка: Обновленная скрипка

Answer 3

Задание прозрачности границы-дна, казалось, испортило границы и добавило маленькие точки по углам.Удаляя его, кажется, что теперь он выглядит очень хорошо: http://jsfiddle.net/4aevH/3/. Однако, если вам нужна прозрачная граница по какой-либо причине, я могу найти что-то еще.

Answer 4

В этой статье хорошо представлены примеры кода для создания вкладок с закругленными границами - http://css -tricks.com / 14001-tabs-with-round-out-border /