0

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

<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 菜单中永远不会显示！！！

4

2 回答 2

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;
}
于 2012-05-25T13:45:15.053 回答
0

这是我机器上的正常现象。可能是因为您没有发布所有代码。如果您删除所有“位置：相对”和所有定位属性，它会有所帮助。

我想你想在中间对齐菜单使用这个命令会更好。

.menu ul {
  list-style:none;
  margin:0 auto;
  padding:0;
  width: 350px;
 }
.menu ul li {
  display:block;
  float:left;
  list-style:none;
  margin:0;
  padding:0;
 }

您的代码在我的机器上显示此内容，并且在任何尺寸的 chrome 上显示相同。我想帮忙，但我不知道你的问题是什么。

在此处输入图像描述

于 2012-05-25T13:22:07.463 回答