css - 导航菜单、CSS、背景图片和访问过的链接

Question

我有一个使用 Wordpress 主题创建的网站 (Portfolio Press) - http://www.photos.robinbrittain.co.uk

它有一个默认的边栏菜单，可以正常工作。我一直在尝试添加第二个“自定义”菜单作为下面的小部件添加，看起来与上面的相同，但用于访问不同的网页，但在菜单中的按钮的已访问链接和背景图像方面遇到了一些问题.不幸的是，我是这方面的新手。

如果我使用下面的代码； 使用我的访问过的链接，菜单按钮会根据需要更改属性，例如。背景颜色，但当我随后单击其他菜单项按钮(清除浏览器历史记录除外)时，它们不会恢复或清除并刷新到其原始“未访问”状态:

#sidebar li{list-style:none;}
#sidebar .widget_nav_menu a:link {color: ;  background:#262626 url(images/menu_left.gif) no-repeat top left; font-size:13px; text-transform:none; font-style: italic; margin-bottom:10px; padding:8px 5px 5px 10px; height:17px; width:250px; display:block; }
#sidebar .widget_nav_menu a:visited {color: ;  background:#161616 url(images/menu_left_hover.jpg) no-repeat top left; font-size:13px; text-transform:none; font-style: italic; margin-bottom:10px; padding:8px 5px 5px 10px; height:19px; width:250px;display:block;}
#sidebar .widget_nav_menu a:hover {color:#cccccc; background:#161616 url(images/menu_left_hover.jpg) no-repeat top left;}
#sidebar .widget_nav_menu a:active {color:#ccc; background:#262626 url(images/menu_left.gif) no-repeat top left;}

一位同事建议删除发现触发问题的“a:visited”行(#sidebar .widget_nav_menu a:visited...等)。我这样做了，一切都在较新的浏览器版本(如 IE 9)中工作，但在较早的浏览器版本(如 IE 8)中，带有按钮高度的整个菜单在导航时会折叠并被压扁。

从那以后，我进行了实验，发现通过包含以下行(完整代码位于此消息末尾):-

#sidebar .current_page_item a:visited {background:#161616 url(images/menu_left_hover.jpg) no-repeat top left; color: ; font-size:13px; text-transform:none; font-style: italic; margin-bottom:10px; padding:8px 5px 5px 10px; height:17px; width:250px; display:block}

一切正常，除了菜单按钮的背景图像不能在至少 2 个最新的浏览器上正确显示，我测试过:IE 和 Firefox。看起来它们似乎没有填满按钮的宽度。我可以删除对背景图像的引用，导航菜单似乎都工作得很好，我只是没有为按钮提供圆 Angular 的图像。

因此，我现在陷入困境，欢迎任何帮助。如何获得带有按钮的导航菜单，以便在单击之间更改和恢复属性，并正确显示背景图像。

我目前使用的代码如下:-

#sidebar li{list-style:none;}
#sidebar .widget_nav_menu a:link {color: ;  background:#262626 url(images/menu_left.gif) no-repeat top left; font-size:13px; text-transform:none; font-style: italic; margin-bottom:10px; padding:8px 5px 5px 10px; height:17px; width:250px; display:block; }
#sidebar .widget_nav_menu a:visited {color: ;  background:#161616 url(images/menu_left_hover.jpg) no-repeat top left; font-size:13px; text-transform:none; font-style: italic; margin-bottom:10px; padding:8px 5px 5px 10px; height:19px; width:250px;display:block;}
#sidebar .current_page_item a:visited {background:#161616 url(images/menu_left_hover.jpg) no-repeat top left; color: ; font-size:13px; text-transform:none; font-style: italic; margin-bottom:10px; padding:8px 5px 5px 10px; height:17px; width:250px; display:block}
#sidebar .widget_nav_menu a:hover {color:#cccccc; background:#161616 url(images/menu_left_hover.jpg) no-repeat top left;}
#sidebar .widget_nav_menu a:active {color:#ccc; background:#262626 url(images/menu_left.gif) no-repeat top left;}

非常感谢，

问候，

罗宾。

Answer 1

访问链接上的背景图片实际上在最新的浏览器上不再可用，因为它会带来隐私风险。使用单独的背景图像，可以记录客户历史信息。