【问题标题】:How to center drop down menu?如何居中下拉菜单?
【发布时间】:2013-08-21 21:35:15
【问题描述】:

感谢您今天抽出时间帮我解决这个 CSS 问题。

我已经按照自己的意愿设置了导航菜单(顶部导航 = 主导航),但我终其一生都无法找到居中对齐下拉菜单的方法(第二级navigation) 到其父导航项,而不影响当前布局或功能。

导航列表很难在中间设置菜单并通过 Wordpress 仍然是动态的。我使用了 display:table 和 display:table-cell 的组合来执行此操作。 导航的顶层看起来不错,但下拉的二级导航没有对齐。

任何建议将不胜感激。提前致谢!干杯,

【问题讨论】:

    标签: html css menu navigation superfish


    【解决方案1】:

    为您的 ul li 添加宽度使子导航居中。在这里工作小提琴:http://jsfiddle.net/ktFJg/

     .nav ul {
        font-size:12px;
        width:1140px;
        text-align:center;
        display:table;
    }
    .nav ul, .nav ul li {
        float:none;
    }
    .nav ul li {
        margin-left:20px;
        width:100px;
    }
    .nav ul li ul {
        text-align:left;
        display:-inline-block;
        border:none;
    }
    .nav li {
        float:none;
        display:inline-block;
        display:table-cell;
        vertical-align:middle;
        color:#000;
    }
    .nav ul li a, nav ul li a:active {
        color:#000;
    }
    .nav ul li a:hover {
        color:#c0c0c0;
    }
    

    【讨论】:

    • 非常感谢。我在某一点设置了宽度,但设置得太高了。我很感激。我最好的,
    猜你喜欢
    • 2014-03-08
    • 2013-07-12
    • 1970-01-01
    • 2011-09-26
    • 1970-01-01
    • 2013-03-22
    • 2013-09-08
    • 2019-12-10
    • 2018-07-19
    相关资源
    最近更新 更多