Css 我的网站导航菜单在IE7及以下版本中呈现不好-需要你的建议吗

我目前正在一个网站上工作，该网站有一个简单的css导航菜单和css，看起来是这样的：

#nav {
    background: #ffffff;
    list-style: none; 
    width:300px;
    height:100px;
    float:right;

    border-color: #600;
    border-width: 1px 1px 1px 1px;
    border-style: solid;

    }

#nav a {
    color: #bf511e;
    text-decoration: none;
    margin: 55px 15px 0px;
    font: bold 18px/100% georgia, verdana, Helvetica, sans-serif;
    font-style: italic;
    float:right;
    }

#nav ul {
    clear:left;
    list-style:none;
    margin:0;
    padding:0;
    position:relative;
    text-align:right;
    display:block;
    }

#nav li {
    margin: 0 auto;
    display:block;
    text-align:right;
    }

#nav a:hover {
    color: #ea895c;
    }

HTML代码如下所示：

<div id="nav">  
                <ul>
                        <li><a href="/blog">Blog</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="/">Home</a></li>
                </ul>
            </div>

结果是，

在Chrome、FF、Opera和IE8（我认为）上，它看起来不错（所以让我只添加一个超链接，所以我将您链接到了损坏的图像）

在IE7及更低版本上，看起来是这样的：

这里有什么明显的错误吗？或者这是一个已知的bug？

---

我基本上是一个CSS布局的初学者，所以帮助我指出正确的方向将不胜感激。在谷歌搜索之后没有遇到类似的问题。

在UL和Li css中使用display:inline而不是display block

导航ul{ 李海军{

---

如果您还有其他问题，请留下评论，我可以纠正。

从您的

#nav a

中删除

float:right

，并将

float:right

添加到

#nav li
谢谢，这似乎解决了问题！花了一天的时间试图找出问题所在。
clear:left; 
list-style:none; 
margin:0; 
padding:0; 
position:relative; 
text-align:right; 
display:inline; 
} 

margin: 0 auto; 
display:inline; 
text-align:right; 
}