Почему мой раскрывающийся список CSS не центрируется

Question

Почему мой раскрывающийся список CSS не центрируется

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, но я не могу понять, почему он не работает. Может ли кто-нибудь здесь помочь мне?

Matt 25 окт. 2013, в 23:55

Источник

2

JSFiddle, пожалуйста. Кстати, "позиция: центр" не существует. Попробуйте position:absolute и добавление position:relative родительского li
Paulie_D 25 окт. 2013, в 21:01
0

Спасибо! Это действительно сработало. Благодаря тонну!
Matt 25 окт. 2013, в 21:27

Теги:

html

css

web

1 ответ

Ещё вопросы

JSFiddle, пожалуйста. Кстати, "позиция: центр" не существует. Попробуйте position:absolute и добавление position:relative родительского li
Спасибо! Это действительно сработало. Благодаря тонну!

Matthew Johnson · Answer 1 · 2013-10-25T18-14-00.000Z

Снимите положение: в центре. Кроме того, вам необходимо добавить следующее в.menu ul

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

Вот скрипка, показывающая это.

Спасибо! Это действительно помогло!