Question

我的CSS下拉菜单没有居中！谁能告诉我为什么？以下是我的index.html页面的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html lang="en">
    <head>
        <link rel="stylesheet" type="text/css" href="main.css">
        <meta charset="UTF-8">

        <title>CSS Drop Down</title>
    </head>



        <body bgcolor="white">
    <h1><center>ETst</center></h1>

<div class="menu">
 <ul>

  <li>
   <a href="#">Home</a>
  </li>

  <li>
   <a href="#">Photos</a>
  </li>

  <li>
   <a href="#">Contact</a>
   <ul>
       <li><a href="#">Item 1</a></li>
   </ul>
  </li>

 </ul>
 <p></p>
</div>
<div class="content">


<p></p>
CONTENT GOES HERE.

</div>
        </body>
</html>

这是CSS文档：

@charset "utf-8";

.body{
    font-family:Georgia, "Times New Roman", Times, serif;
    font-size:14px;
}

#signature{
    font-family:Arial, Helvetica, sans-serif;
    font-size:7px;
    padding: 7px;
    color:#B8B8E6;
}

.menu{
margin-left:auto; margin-right: auto; padding:0; margin:8px; color: #000000; width:100%; border:1px;  clear:both; text-align: center;
}

.menu ul {list-style:none; margin:100; padding:0;
position:center; text-align:center;
text-align: center;
}

.menu li {float:left; width:100px;
          background-color:#444444; 
         text-align:center;
         border-right:1px solid white; position:relative;
         height:30px; 
         line-height:30px;
         text-align: center;}

.menu li ul li {float:none; width:150px; text-align:left; padding-left:10px;
         border-top:1px solid white;}

.menu a {text-decoration:none; color:white;}

.menu li ul {position:center; top:30px; left:0; visibility:hidden;}

.menu li:hover ul {visibility:visible;}

.menu li:hover {background-color:black;}

.content {clear:both;}

我正在尝试使用CSS集中实际的菜单栏，但我似乎无法找出它为什么不起作用。这里的任何人都可以帮助我吗？

Answer 1

删除位置：center。此外，您需要将以下内容添加到.menu ul

display:inline-block; 
margin-left:auto;
margin-right:auto;

这是显示它的fiddle。

为什么我的CSS下降而不是居中

1 个答案: