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);