三线图标/汉堡图标样式，如谷歌铬工具栏

Question

您好我需要一些帮助来显示汉堡包图标，因为它在谷歌浏览器工具栏中。我使用unicode character＆amp;＃9776来显示图标，这很好但我需要一些关于它的样式的帮助。 esp - 当你将鼠标悬停在chrome上的图标上时，它会以边框突出显示。我附上了一个屏幕截图。

我希望在我的应用程序中实现相同的样式。

这适用于IE 8及以上版本和谷歌浏览器。任何帮助都将非常感谢..

以下是我尝试过的一些代码..

＆＃13;

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我无法实现在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>