html - 三行图标/汉堡图标样式，如谷歌浏览器工具栏

Question

嗨，我需要一些帮助来显示 google chrome 工具栏中的汉堡包图标。我使用 unicode 字符 ☰ 来显示图标，这很好，但我需要一些关于它的样式的帮助。esp - 当您将鼠标悬停在 chrome 上的图标上时，它会以边框突出显示。我附上了屏幕截图。

我想在我的应用程序中实现相同的风格。

这应该适用于 IE 8 及更高版本和谷歌浏览器。任何帮助将非常感激..

这是我尝试过的一些代码..

#HamburgerMenu a:link,
#HamburgerMenu a:hover,
#HamburgerMenu a:visited
{
    text-decoration:none;
    color:Gray;
    margin-top:8px;
    display:block;
    cursor:default;
    margin-left:1.5px
    
}

#HamburgerMenuLink:hover
{
    z-index:1000;
    border:0px groove gray;
    /*outline-style:outset;*/
   background-color:#d3d3d3;
}

<a id="HamburgerMenuLink">&#9776;</a>

我无法实现它在 chrome 中完成的方式......

Answer 1

尝试这个。

#HamburgerMenu a:link,
#HamburgerMenu a:hover,
#HamburgerMenu a:visited
{
    text-decoration:none;
    color:Gray;
    margin-top:8px;
    display:block;
    cursor:default;
    margin-left:1.5px
    
}

#HamburgerMenuLink{
  padding: 5px;
}
#HamburgerMenuLink:hover
{
  box-shadow: 0 1px 5px rgba(0,0,0,0.65);
  border-radius: 4px;
}

<a id="HamburgerMenuLink">&#9776;</a>