Question

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

<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中。可能有什么不对？ ===================编辑========================
请看图像
当页面全屏菜单没问题时 enter image description here

但是当我调整页面页面时会变得像这样 enter image description here
如图所示，菜单变为隐藏，不滚动

正如我所说，在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;
}

Answer 2

这是我机器上的正常情况。可能是因为你没有发布所有代码。如果删除所有“position：relative”和所有定位属性，它会有所帮助。

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

.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;
 }

您的代码在我的机器上显示，并且在任何尺寸的铬上显示相同的代码。我想帮忙，但我不知道你的问题。

enter image description here

我无法显示基于div的菜单

2 个答案: