0

在具有反活动 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;
}
4

2 回答 2

1

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

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

.menu li {
     position: relative;
}

现在，您需要将菜单中所有ulan 子项的位置设置为。我们也不希望它们立即显示，所以用 隐藏它们。liposition: absolutedisplay: none

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

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

到目前为止，我提供的两条规则是 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. 使用autofor margin left 和 right 使元素居中需要设置宽度！只需将顶层的整个宽度相加，您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。

于 2014-09-29T19:10:12.730 回答
0

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

你可能需要一些额外的调整，但你有基础

在这里看小提琴

于 2014-09-29T18:55:36.037 回答