CSS Menu 和 Image as Links 之间的冲突

【问题标题】：Conflicts between CSS Menu and Image as LinksCSS Menu 和 Image as Links 之间的冲突
【发布时间】：2010-06-02 03:39:05
【问题描述】：

顶部有标志（图片作为链接）和其他图片作为链接。这些链接在 FF 和 safari 中不起作用。问题在于基于 css/ul/li 的导航菜单。如果我删除菜单 html 代码，图像作为链接工作正常。基于 CSS 的导航菜单基于此代码：

/* Navigation Menu */
#nav a, #nav a:hover, #nav a:focus {...}
#nav {...}
#nav ul {...}
#nav .menu .level1-li {...}
#nav .menu a {...}
#nav .menu a.level1-a {...}
#nav .menu .sub {...}
#nav .menu .sub a {...}
#nav .menu a:hover {...}

我对 CSS 不太熟悉，这是我从网上下载的示例。似乎“a”在这里做错了。

普拉尚特

【问题讨论】：

您能否在大括号内发布相关的 HTML 标记和 CSS 属性？

标签： css image hyperlink

【解决方案1】：

#nav a, #nav a:hover, #nav a:focus {direction:ltr; outline:0;}
#nav {background:#252525; background:url(../images/tabs_0.gif) repeat-x left top;height:30px; font:normal 12px/30px arial, verdana, sans-serif; width:800px; margin:0 auto;border-bottom-style:solid;border-width:1px;border-color:#525151;}
#nav ul {margin:0; padding:0; list-style:none; display:inline-block;}
#nav .menu .level1-li {float:left; display:inline; width:160px; margin-top:-32000px;}
#nav .menu a {background:transparent;display:block; font-weight:bold; width:160px; text-decoration:none; text-align:center; color:#fff;}
#nav .menu a.level1-a {position:relative; float:left; display:inline; margin-right:-159px; margin-top:32000px;}
#nav .menu .sub {background:#F6C739;float:left; margin-top:-30px; padding-top:30px; margin-bottom:-32000px;}
#nav .menu .sub a {background:#4a4a4a; font-weight: normal; font-size: 9pt;text-align:left; position:relative; margin-right:-1px;text-indent:10px;}
#nav .menu a:hover {background:#F6C739;margin-right:0px; color:#000000;}

【讨论】：