Question

css 下拉菜单 左对齐

/*导航开始*/
#nav { height:46px; background:url(images/nav.jpg) no-repeat; margin:0 20px; }
#nav ul li { float:left; line-height:36px; width:12%; background:url(images/nav_line.jpg) no-repeat left top; text-align:center;}
#nav ul li a { display:block; color:#000; }
#nav ul li a:hover { background:url(images/nav_hover.jpg) center top no-repeat;text-decoration:none;font-weight:bolder; color:#FFFFE0 }
#nav ul li ul { border:1px solid #ccc; display:none;position:absolute;background:#eee; width:220px; margin-left:0px;}
#nav ul li ul li { float:none; width:210px; background:url(images/ico.jpg) center left no-repeat;margin:0;text-align:left;padding-left:10px;}
#nav ul li ul li a { background:none;}
#nav ul li ul li a:hover { background:#333; color:#fff;}
#nav ul li:hover ul { display:block;}
#nav ul li.sfhover ul { display:block;}
/*导航结束*/

IE里面下拉菜单一直会居中对齐
chrome和FF都是左对齐的，不知道怎么改
#nav ul li ul { border:1px solid #ccc; display:none;position:absolute;background:#eee; width:220px; margin-left:0px;}
这个margin-left是后来添加的，改成负的倒是能够满足IE左对齐，不过其他的浏览器又不好看了,相统一做成左对齐
IE:

chrome:(想要这种)
position属性修改之后出现的问题更多..IE没问题，但是其他的浏览器会导致，下拉菜单出现时左侧整体左移，或者加入clear之后，下拉菜单会出现一整个空白。（）position：relative；如下图：

正常应该菜单覆盖掉幻灯

应该是继承了#nav ul li的 text-align:center的缘故，改掉之后会正常剧作，但是不晓得如何修改





Answer 1

你的问题没有真实的页面，不好调，给一个链接，你下载这个代码，把你的图片替换一下，改下样式就OK了，这个样式都兼容的，http://www.lanrentuku.com/js/daohang-845.html

Answer 2

position:absolute,先对位置需要设置top left之类的