Почему я не могу центрировать свою навигационную панель?

Question

Я использую jQuery, чтобы создать раскрывающееся навигационное меню, и оно отлично работает, но я не могу заставить его сосредоточиться на моей странице.

Я попытался использовать align = "center" в меню div, но это не сработало. Затем я попытался выровнять его, используя css для div и lis и uls, но это также не сработало.

Вот мой код

JQuery:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"> 
</script> 
<link rel="stylesheet" type="text/css" href="style.css"> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#menu li").hover(function() { 
      $(this).children(":hidden").slideDown(); 

      }, function(){ 

      $(this).parent().find("ul").slideUp(); 

     }); 

    }); 
</script> 

HTML:

<div id="menu"> 
    <ul> 
     <li><a href="#">Home</a> 
     </li> 
     <li><a href="#">test</a> 
      <ul> 
       <li><a href="#">drop1</a></li> 
       <li><a href="#">drop2</a></li> 
       <li><a href="#">drop3</a></li> 
      </ul> 
     </li> 
     <li><a href="#">test</a> 
      <ul> 
       <li><a href="#">drop1</a></li> 
       <li><a href="#">drop2</a></li> 
      </ul> 
     </li> 
    </ul> 
</div> 

CSS:

#menu { 
    height: 30px; 
    background-color: #26C7FF; 
    margin-left: 0; 
    margin-right: 0; 
} 

#menu li li:hover { 
    background-color: yellow; 
    cursor: pointer; 
} 

#menu ul, #menu li { 
    list-style-type: none; 
    padding: 0; 
    margin: 0; 
} 

#menu li { 
    float: left; 
    width: 120px; 
    list-style-type: none; 
    line-height: 30px; 
    text-align: center; 
} 

#menu li ul { 
    position: absolute; 
    background-color: #26C7FF; 
    display: none; 
} 

#menu li li { 
    float: none; 
    padding: 2px; 
} 

#menu a { 
    color: #000; 
    text-decoration: none; 
} 

Answer 1

Использование дисплея: встроенный блок; вместо того, чтобы плавать элементы li, а затем использовать text-align: center; для контейнера ul.

#menu > ul > li { 
    display: inline-block; 
} 

Вот рабочий пример: http://codepen.io/taneleero/pen/MwojLV

Answer 2

Заверните его в контейнер, который имеет max-width из whatev эр ширина вы хотите, чтобы ваше меню будет:

.container { 
 
    max-width: 600px; // Or whatever 
 
    width: 100%; 
 
    margin: 0 auto; 
 
} 
 

 
#menu { 
 
    height: 30px; 
 
    background: #26C7FF; 
 
}

<div class="container"> 
 
    <div id="menu"> 
 
</div>

Answer 3

Поскольку вы устанавливаете заказанный список тег в фиксированных ширинах, следующие CSS должны решить вашу проблему.

#menu ul { 
    width: 369px; 
    margin: 0 auto; 
} 

Работает jsfiddle.

Answer 4

Пожалуйста, проверьте этот код. Я думаю, это то, что вы хотели.

< script type = "text/javascript" > 
 
    $(document).ready(function() { 
 

 
    $("#menu li").hover(function() { 
 

 
     $(this).children(":hidden").slideDown(); 
 

 

 

 
    }, function() { 
 

 
     $(this).parent().find("ul").slideUp(); 
 

 

 
    }); 
 

 

 

 
    }); < /script>

#menu { 
 
    height: 30px; 
 
    background-color: #26C7FF; 
 
    margin-left: 0; 
 
    margin-right: 0; 
 
} 
 
#menu li li:hover { 
 
    background-color: yellow; 
 
    cursor: pointer; 
 
} 
 
#menu ul, 
 
#menu li { 
 
    list-style-type: none; 
 
    padding: 0; 
 
    margin: 0; 
 
    text-align: center; 
 
    position: relative; 
 
} 
 
#menu li { 
 
    float: none; 
 
    width: 120px; 
 
    list-style-type: none; 
 
    line-height: 30px; 
 
    text-align: center; 
 
    display: inline-block; 
 
} 
 
#menu li ul { 
 
    position: absolute; 
 
    background-color: #26C7FF; 
 
    display: none; 
 
    left: 0; 
 
    right: 0; 
 
} 
 
#menu li li { 
 
    float: none; 
 
    padding: 2px; 
 
} 
 
#menu a { 
 
    color: #000; 
 
    text-decoration: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"> 
 
</script> 
 
<link rel="stylesheet" type="text/css" href="style.css"> 
 
<div id="menu"> 
 
    <ul> 
 
    <li><a href="#">Home</a> 
 
    </li> 
 
    <li><a href="#">test</a> 
 
     <ul> 
 
     <li><a href="#">drop1</a> 
 
     </li> 
 
     <li><a href="#">drop2</a> 
 
     </li> 
 
     <li><a href="#">drop3</a> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    <li><a href="#">test</a> 
 
     <ul> 
 
     <li><a href="#">drop1</a> 
 
     </li> 
 
     <li><a href="#">drop2</a> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</div>

это JSFIDDLE ссылка