Панель меню CSS с выпадающим меню

Question

Работа над строкой меню, которая имеет счетчик активных классов CSS. Мне нужно, чтобы строка меню была в центре, а выпадающие списки располагались под соответствующим пунктом списка. Я могу заставить один или другой, но не оба работать одновременно. Панель меню меняет размеры, поэтому оставление статического поля на ней не будет работать. Вот как должна выглядеть строка меню, но она не центрирована.

И это то, что происходит, когда я удаляю float: left из #mainmenu ul li{}. Теперь он центрирован, но элементы, принадлежащие имени пользователя, сдвинуты влево.

Почему это происходит? и как мне обойти это?

HTML:

<div id="mainmenu">
    <?php
    if(Yii::app()->user->name)
    $display_name = Yii::app()->user->name;
    if(strlen($display_name) > 11){
        $display_name = substr($display_name,0,9);
        $display_name =$display_name.'...';
    }
    ?>
    <?php $this->widget('zii.widgets.CMenu',array(
        'items'=>array(
            array('label'=>'Home', 'url'=>array('/site/index')),
            array('label'=>'My Tickets', 'url'=>array('/ticket/mytickets'), 'visible'=>!Yii::app()->user->isGuest),
            array('label'=>'About', 'url'=>array('/site/page', 'view'=>'about')),
            array('label'=>'Contact', 'url'=>array('/site/contact')),
            array('label'=>'Schools', 'url'=>array('/school'), 'visible'=>Yii::app()->user->id == 'admin'),
            array('label'=>'Teams', 'url'=>array('/team'), 'visible'=>Yii::app()->user->id == 'admin'),
            array('label'=>'Login', 'url'=>array('/site/login'), 'visible'=>Yii::app()->user->isGuest),
            array('label'=>'Games', 'url'=>array('/game'), 'visible'=>Yii::app()->user->id == 'admin'),
            array('label'=>'Users', 'url'=>array('/user'), 'visible'=>Yii::app()->user->id == 'admin'),
            array('label'=>'Tickets', 'url'=>array('/ticket'), 'visible'=>Yii::app()->user->id == 'admin'),
            array('label'=>'Team Placement', 'url'=>array('/tournamentresults'), 'visible'=>Yii::app()->user->id == 'admin'),
            array('label'=>$display_name, 'url'=>array('#'), 'visible'=>!Yii::app()->user->isGuest,
                    'items' => array(
                array('label'=>'Edit User', 'url'=>array('/company/index')),
                array('label'=>'Log-out', 'url'=>array('/site/logout'))
    ),


            ),
        ),
    )); ?>
</div><!-- mainmenu -->

Сгенерированный HTML-код:

<div id="mainmenu">
   <ul id="yw0">
    <li class="active"><a href="/index.php/site/index">Home</a></li>
    <li><a href="/index.php/ticket/mytickets">My Tickets</a></li>
    <li><a href="/index.php/site/page?view=about">About</a></li>
    <li><a href="/index.php/site/contact">Contact</a></li>
    <li><a href="/index.php/site/#">SirRahal</a>
        <ul>
            <li><a href="/index.php/company/index">Edit User</a></li>
            <li><a href="/index.php/site/logout">Log-out</a></li>
        </ul>
    </li>
    </ul>    
</div>

Код CSS:

 #mainmenu
{
height:33px;
margin: auto;
text-align:center;
}

#mainmenu ul li
{
display: inline;
float: left;
margin: auto;
}

#mainmenu ul li a
{
color: #fbf3e1;
font-size:14px;
padding-top:5px;
padding-bottom:5px;
width:217px;
background: #33332c;
}

#mainmenu ul li ul {
display: none;
position: absolute;
margin-left: -20px;
}

#mainmenu ul li:hover > ul {
display: block;
}

#mainmenu ul li a:hover, #mainmenu ul li.active a
{
color: #f5921e;
border-bottom: solid 5px #f5921e;
text-decoration:none;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}

Answer 1

Замените свой CSS следующим образом, используя LI элементы для стиля, а не ваш A элементы:

body {
    width:100%;
}
#mainmenu {
    display: block;
    width:100%;
}
#mainmenu ul {
    width:100%;
}
#mainmenu ul li {
    display: inline-block;
    position:relative;
    margin: auto;
    width:19%;
    background: #33332c;
    padding-top:5px;
    padding-bottom:5px;
}
#mainmenu ul li a {
    color: #fbf3e1;
    font-size:14px;
}
#mainmenu ul li ul {
    display: none;
    position: absolute;
}
#mainmenu ul li:hover > ul {
    display: block;
    width:auto;
    position:absolute;
    top:30px;
    left:0;
    background: #33332c;
    padding:10px;
}
#mainmenu ul li:hover > ul li {
    display: block;
    width:150px;
    height:auto;
}
#mainmenu ul li a:hover, #mainmenu ul li.active a {
    color: #f5921e;
    border-bottom: solid 5px #f5921e;
    text-decoration:none;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
}

Возможно, вам понадобятся некоторые дополнительные настройки, но у вас есть основы

Смотрите скрипку здесь

Answer 2

На мой взгляд, самым большим ключом к созданию выпадающего / всплывающего меню CSS является использование absolute positioned элементы внутри relative positioned элементы и где их использовать. Еще важнее понять, как эти две схемы позиционирования связаны друг с другом. Как только вы это сделаете, вы можете создавать всевозможные выпадающие / всплывающие меню.

Вы хотите установить position: relative ко всему вашему меню li содержат ли они подменю или нет. Это не повлияет на их положение, если вы не начнете использовать top, right, bottom, left CSS свойства

.menu li {
     position: relative;
}

Теперь вы хотите, чтобы установить положение всех ul которые являются детьми li в вашем меню, чтобы position: absolute, Мы также не хотим, чтобы они показывали сразу, поэтому спрячьте их display: none,

.menu li > ul {
     display: none;
     position: absolute;
}

Применение позиции относительно содержащего элемента элемента с абсолютным позиционированием помогает содержать элемент с абсолютным позиционированием. Мало того, что элемент с абсолютным позиционированием будет основываться на позиционировании относительно родительского элемента с относительным позиционированием, чего мы и хотим. настройка top: 0 а также left: 0 вызовет ul это дитя li начать в том же верхнем левом положении, что и левый верхний угол его родительских элементов.

Два правила, которые я предоставил, являются основными строительными блоками выпадающего / всплывающего меню в CSS.

С этого момента все будет зависеть от ваших целей дизайна и от того, что еще нужно добавить в ваш CSS.

Я собираюсь (в основном) использовать общий код до конца в надежде, что вы и другие сможете использовать базовые принципы для получения ваших собственных конкретных результатов. Тем не менее, я буду основывать остальную часть кода из того, что вы предоставили. Некоторые поверхностные стили, такие как границы, будут игнорироваться, вы можете добавить это позже.

HTML

Вот HTML-код, который я собираюсь использовать. Добавьте в якорь элементы по мере необходимости.

<ul class="menu">
    <li>One</li>
    <li>Two
        <ul>
            <li>Sub Two A</li>
            <li>Sub Two B</li>
        </ul>
    </li>
    <li>Three</li>
</ul>

• Ваше меню верхнего уровня встроено, поэтому давайте использовать float: left сделать это.
• Они также фиксированной ширины. Вы делаете это через ваши якорные теги <a> это нормально, я собираюсь использовать li,
• Ваш текст по центру.

.menu li {
     float: left;
     position: relative;
     text-align: center;
     width: 100px;
}

** СМ. РЕДАКТИРОВАТЬ НИЖЕ ДЛЯ ПЕРЕМЕННОГО ОТВЕТА L I **

Поскольку вы используете элементы навигации фиксированной ширины, вы можете центрировать навигацию с помощью margin: 0 auto, С помощью auto для полей слева и справа от центра требуется установить ширину элемента! Просто сложите всю ширину вашего верхнего уровня li и вы будете иметь свою ширину, вам нужно центрировать навигацию. Не забудьте включить в расчет ширины отступы, поля, границы и т. Д.

Мой пример использует три li в 100px ширина.

.menu {
    width: 300px; /* width of the 3 li */
    margin: 0 auto; /* centers ul when width is specified */
}

Теперь мы разместим подменю ul,

• За top вам нужно нажать на подменю ul вниз по высоте, содержащей li, Я собираюсь предположить, что 25px это высота li,
• За left Вы хотите, чтобы он начинался с того же края, что и содержащий li так что используйте 0.

.menu li > ul {
     display: none;
     left: 0;
     position: absolute;
     top: 25px;
}

Теперь давайте выведем подменю ul когда родитель li находится

.menu li:hover > ul {
    display: block;
}

CSS

Финальный CSS.

.menu {
    width: 300px; /* width of the 3 li */
    margin: 0 auto; /* centers ul when width is specified */
}
.menu li {
    float: left;
    line-height: 25px; /* assumed height of li */
    position: relative;
    text-align: center;
    width: 100px;
}
.menu li > ul {
    display: none;
    left: 0;
    position: absolute;
    top: 25px;
}
.menu li:hover > ul {
    display: block;
}

Вот jsFiddle с некоторым базовым стилем, который объединяет все это.

Там вы идете! Учебник для CSS выпадающих / всплывающих меню. Как обычно, ваши потребности потребуют некоторых модификаций или дополнений к тому, что я поставил. Если вы понимаете основы, вы проделаете большой путь в разработке более глубоких и надежных решений.

**РЕДАКТИРОВАТЬ**

Просто заметил, что у вас есть переменное число li в вашей навигации. Внесите изменения, где это необходимо. Это комбинация относительного позиционирования с позициями в процентах.

.menu {
    float: left;
    position: relative;
    left: 50%;
}
.menu li {
    float: left;
    line-height: 25px; /* assumed height of li */
    position: relative;
    right: 50%;
    text-align: center;
    width: 100px;
}
/* undo the right positioning for submenu li so it aligns properly */
.menu li > ul li {
    right: auto;
}

Вот обновленный jsFiddle.