html - 我无法显示基于 div 的菜单

Question

我在 div 标签内使用 ul 和 il 标签创建了一个菜单。

<div class="menu">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">FAQ</a></li>
        <li><a href="#">News</a></li>
    </ul>
</div>

..将以下样式应用于菜单:

.menu
{
    background-position: center;
    clear: left;
    float: left;
    padding: 0;
    background: #CBC396 url(metaltop-gray.gif) repeat-x top;
    border-bottom: 4px solid black;
    border-top: 1px solid #7E7567;
    width: 100%;
    overflow: auto;
    font-family: Verdana, sans-serif;
    border-top-color: #CCCCCC;
    border-bottom-color: black;
}
.menu ul {
   clear:left;
   float:left;
   list-style:none;
   margin:0;
   padding:0;
   position:relative;
   left:50%;
   text-align:center;
}
.menu ul li {
   display:block;
   float:left;
   list-style:none;
   margin:0;
   padding:0;
   position:relative;
   right:50%;
}
.menu ul li a {
   display:block;
   margin:0 0 0 1px;
   padding:3px 10px;
   background: #CBC396 url(metaltop-gray.gif) top repeat-x;
   color:#000;
   text-decoration:none;
   line-height:1.3em;
}
.menu ul li a:hover {
   background:#369;
   color:#fff;
}
.menu ul li a.active,
.menu ul li a.active:hover {
   color:#fff;
   background:#000;
   font-weight:bold;
}

当我在 Google Chrome 中运行页面并调整页面大小时，菜单消失了。此外，这个菜单永远不会出现在 IE 中。有什么问题吗？
===================编辑========================
请看图片
当页面全屏时菜单正常

---

但是当我调整页面大小时页面变成这样

正如你在图片中看到的，菜单变为隐藏且不滚动

正如我提到的，在 IE 菜单中从不显示!!!

Answer 1

试试这个代码它可能工作正常，只需更改你的.menu:

.menu {
  margin: 0 auto;
  padding: 0;
  border-top: 1px solid #CCCCCC;
  border-bottom: 4px solid black;
  width: 100%;
  clear: left;
  float: left;
  overflow: visible;
  font-family: Verdana, sans-serif;
  background: #CBC396 url(metaltop-gray.gif) repeat-x top;
}

试试这个，它应该在所有浏览器中都能正常工作。

<div class="menuwrapper">
<div class="menu">
<ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">FAQ</a></li>
    <li><a href="#">News</a></li>
</ul>
</div>
</div>

和

.menuwrapper {
 background: #CBC396 url(metaltop-gray.gif) repeat-x top;
 width: 100%;
 height: auto;
 padding: 0;
 margin:0;
 border-top: 1px solid #7E7567;
 border-top-color: #CCCCCC;
 border-bottom-color: black;
 border-bottom: 4px solid black;

 }

.menu
{
    margin: 0 auto;
    padding: 0;
    background: #CBC396 url(metaltop-gray.gif) repeat-x top;
    width: 340px;
    overflow: auto;
    font-family: Verdana, sans-serif;
}
.menu ul {
   float:left;
   list-style-type:none;
   margin:0;
   padding:0;
   text-align:center;
}
.menu ul li {
   display:block;
   float:left;
   list-style:none;
   margin:0;
   padding:0;
}
.menu ul li a {
   display:block;
   margin:0 0 0 1px;
   padding:3px 10px;
   background: #CBC396 url(metaltop-gray.gif) top repeat-x;
   color:#000;
   text-decoration:none;
   line-height:1.3em;
}
.menu ul li a:hover {
   background:#369;
   color:#fff;
}
.menu ul li a.active,
.menu ul li a.active:hover {
   color:#fff;
   background:#000;
   font-weight:bold;
}