图片不要跟文字同在一容器里就很好弄了
图片归图片，文字用个DIV或P包起来~~~左浮动
一定要不变动html结构的话，那就把外边的容器设成相对，然后左填充至少100px；
里面的图片设成绝对，距左设为零，距上默认为零也可以设置一下零。
最好是用JS做，但是非要用CSS呢，也可以。如下是我以前写的一个CSS下拉，你可以参考一下：<html> <head> <title></title> <style>*{margin:0padding:0} ul,li{ list-style-type:none padding:0 margin:0 } #nav li a{ display:block width:100px text-align:center text-decoration:none color:#ffffff background-color:#000000 } #nav li{ position:relative margin-bottom:2pxfloat:leftmargin-right:5px } #nav li ul{ position:absolute left:10px top:20px display:nonewidth:100px } #nav li:hover ul{ display:block } </style> </head> <body><ul id="nav"><li><a href="#">首页</a></li><li><a href="#">关于我们</a><ul><li>我们的故事</li><li>我们的团队</li></ul></li><li><a href="#">我们的服务</a><ul><li>网页设计</li><li>页面制作</li><li>程序开发</li></ul></li><li><a href="#">联系我们</a><ul><li>团队主力</li><li>团队成员</li></ul></li></ul> </body></html>
a的作用是链接，点击<a></a>之间的内容，页面会跳转到链接的地址。直接设置它的颜色，比如，例子中a{color:#000}，意思是<a></a>之间的内容显示为黑色，如果不设置的话，浏览器默认的a链接的颜色是蓝色；
a:hover属于css，它设置了当鼠标悬浮在链接内容之上时，链接内容的样式，比如，例子中a:hover{ color:#F00}，它设置了当鼠标悬浮在该链接内容上时，链接内容变成红色。
扩展资料：总结几个a的伪类：
a:link 英文link就是链接的意思，代表当一段文本为链接时的属性。
a:visited 英文visited就是访问过的意思，代表这段文本被点击之后的属性。
a:hover 英文hover就是悬停的意思，代表鼠标指针放在这个链接上时的属性。
a:active 英文active就是有效的、快速的意思，代表鼠标按下时一瞬间的属性。
一般最常用的方法是a {CSS属性} a后面什么也没有，代表一次定义这四个属性，然后根据需要再定义其中某个属性就可以了，最常用的是a:hover {CSS属性}
参考资料：百度百科-CSS
