Vaadin - Как настроить MenuBar, чтобы он выглядел как ссылки

Question

Я понимаю, что это сделано в CSS (хорошо SCSS), но я борюсь с тем, как стилизовать его так, чтобы MenuBar выглядел как текст. Я в порядке с MenuItems, поскольку они есть, я просто хочу, чтобы MenuBar сам выглядел как ссылки. Хорошим примером является ссылка «Справка» в верхней части StackOverflow, слева от окна поиска в верхней части экрана.

По умолчанию в Vaadin это выглядит как кнопки, и когда я нажимаю на них кнопку подсвечивается и имеет этот дополнительный цвет рамки, как показано ниже:

Я хочу, чтобы удалить все это и просто сделать его похожим на ссылку, что вы щелкнули. Стиль MenuItem замечательный, но я просто хочу сделать его похожим на текст. Мне нравится морковка вниз, а также стиль для MenuItems, это просто MenuBar, который я бы хотел изменить. Ниже приведен пример:

Я возиться с CSS для немного, и я просто не могу получить правильный стиль. Любая помощь будет принята с благодарностью. Опять же я просто хочу убрать стиль MenuBar и ничего больше. До сих пор у меня есть:

.myMenuBar 
    { 
    border: none; 
    background-image: none; 
    background-color: myBackgroundColor; 
    box-shadow: none; 
    } 

Проблема заключается в том, что есть еще ряд элементов стиля я борюсь с:

Например, я до сих пор подсвеченные кнопки, когда я нажмите кнопку. Также всплывающее меню соответствует моему пользовательскому цвету. У меня также есть разделительная линия в черном между двумя элементами. И хотя это труднее увидеть, есть тонкая белая и серая линия выше и ниже MenuBar, чтобы показать некоторую глубину.

ОБНОВЛЕНИЕ: Добавлены некоторые улучшения css, но я все еще далеко.

Answer 1

Даже со ссылками в комментариях чуть ниже вопроса я все еще изо всех сил пытался найти решение. В конце концов я столкнулся с классом ValoTheme и обнаружил, что могу сделать именно то, что хотел, с одной строкой кода. На самом деле это было лучше, чем то, что я планировал так наградным дизайнерам!

menuBar.setStyleName(ValoTheme.MENUBAR_BORDERLESS);