以下拉菜单为中心的 CSS 菜单栏

Question

在具有计数器活动 css 类的菜单栏上工作。我需要菜单栏居中，下拉菜单位于正确的列表项下。我可以得到一个或另一个，但不能同时工作。菜单栏会改变大小，因此在其上放置静态边距将不起作用。这是菜单栏的样子，但它没有居中。

这就是当我从#mainmenu ul li{} 中移除浮动：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;
}

Answer 1

在我看来，构建 CSS 下拉/弹出菜单的最大关键是在 relative positioned 元素中使用 absolute positioned 元素以及在何处使用它们。更重要的是了解这两种定位方案是如何相互关联的。完成后，您可以构建各种下拉/弹出菜单。

您需要将position: relative 设置为您的所有菜单li，无论它们是否包含子菜单。除非您开始使用top, right, bottom, left CSS 属性，否则这样做不会影响它们的位置。

.menu li {
     position: relative;
}

现在您需要将菜单中所有li 的子ul 的位置设置为position: absolute。我们也不希望它们立即显示，因此请使用 display: none 隐藏它们。

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

相对于绝对定位元素的包含元素应用位置有助于包含绝对定位元素。不仅如此，绝对定位元素的定位基于相对定位的父元素，这正是我们想要的。设置top: 0 和left: 0 将导致作为li 的子元素的ul 从其父元素左上角的左上角位置开始。

到目前为止，我提供的两条规则是 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;
}

**查看下面的变量 LI 答案**

由于您使用的是固定宽度的导航元素，因此您可以使用margin: 0 auto 将导航居中。 使用auto 左右边距使元素居中需要设置宽度！ 只需将顶层li 的全宽相加，就可以得到宽度需要居中导航。不要忘记在宽度计算中包含任何内边距、边距、边框等。

我的示例在100px 宽度处使用了三个li。

.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;
}

现在让我们在父li 悬停时显示子菜单ul。

.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。

Answer 2

像这样替换您的 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;
}

您可能需要进行一些额外的调整，但您已经掌握了基础

See fiddle here