【发布时间】：2011-08-21 17:36:12
【问题描述】：
我有一个使用 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。看起来他们似乎没有填满按钮的宽度。我可以删除对背景图像的引用，并且导航菜单似乎都工作得很好，我只是没有为按钮提供圆角的图像。
因此，我现在陷入困境，欢迎任何帮助。如何获得带有按钮的导航菜单，以在单击之间更改和还原属性，并正确显示背景图像。
我目前使用的代码如下：-
#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;}
非常感谢，
问候，
罗宾。
【问题讨论】：
标签： css menu navigation hyperlink