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

В моем раскрывающемся меню CSS нет центрирования! Может ли кто-нибудь сказать мне, почему? Вот мой код для моего index.html страницы:Почему мой CSS выпадающий не центрируется

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

источник

2013-10-25 Matt

JSFiddle пожалуйста. BTW "position: center" не существует. Попробуйте 'position: absolute' и добавьте' position: relative' в родительский 'li' –

Спасибо! Это действительно сработало. Благодаря тонну! – Matt

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

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

Вот fiddle показать это.

источник

2013-10-25 21:11:49

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

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

ответ

Смежные вопросы