Question

我有一个使用Wordpress主题创建的网站（投资组合新闻） - http://www.photos.robinbrittain.co.uk

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

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

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

非常感谢，

此致

罗宾。

Answer 1

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

导航菜单，CSS，背景图像和访问链接

1 个答案: