0

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 を使用して実際のメニュー バーを中央に配置しようとしていますが、機能しない理由がわかりません。ここで誰でも私を助けることができますか？

4

1 に答える 1

0

position:center を削除します。また、以下を .menu ul に追加する必要があります

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

ここにそれを示すフィドルがあります。

于 2013-10-25T21:11:49.790 に答える