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

即使问题下方的 cmets 中有链接，我仍然难以找到解决方案。最终我遇到了ValoTheme 类，发现我可以用一行代码完成我想做的事情。事实上，它比我计划的要好，因此向主题设计师致敬！

menuBar.setStyleName(ValoTheme.MENUBAR_BORDERLESS);