カウンター アクティブな css クラスを持つメニュー バーに取り組んでいます。メニューバーを中央に配置し、ドロップダウンを適切なリスト項目の下に配置する必要があります。どちらか一方を取得できますが、両方を同時に機能させることはできません。メニュー バーはサイズが変わるため、固定マージンを残しても機能しません。これは、メニュー バーがどのように見えるかですが、中央に配置されていません。 
#mainmenu ul li{} から float: left を削除すると、次のようになります。これで中央揃えになりましたが、ユーザー名の下にあるアイテムはすべて左にシフトされています。
なぜこれが起こるのですか？どうすればそれを回避できますか？
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;
}