Question

我正在尝试设计菜单，如下图所示 enter image description here

这是一个响应式菜单，在小屏幕上应该看起来像。

我现在面临的问题很少。 - 我必须在两个菜单之间添加一个边框，如下图所示，并保持子菜单从主菜单的基线向下约40px。当我向ul li子菜单显示添加下边距但当我尝试将指针放在它上面时消失。

我希望子菜单显示在父菜单的中心，即使子菜单的wifth更多是父菜单的宽度，我试过这个但是没能使它完美。

响应版

enter image description here

  /*Menu*/
    .nav-center
    {
        text-align:center;
    }
    .menu-link {
        display: none;
        float: right;
        text-decoration: none;
        padding: 19px 10px;
    }
    .menu { 
        max-width: 60em;
        -webkit-transition: all 0.3s ease-out;  
        -moz-transition: all 0.3s ease-out;
        -ms-transition: all 0.3s ease-out;
        -o-transition: all 0.3s ease-out;
        transition: all 0.3s ease-out; 
    }
    .menu ul { 
        padding: 0px;
        margin: 0px;
        list-style: none;
        position: relative;
        display: inline-table;
    }
    .menu > li > ul.sub-menu {
        min-width: 10em;
        padding: 4px 0;
        background-color: #f4f4f4;
        border: 1px solid #CCC;
        border: 1px solid rgba(0, 0, 0, 0.2);
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
        -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
        -webkit-background-clip: padding-box;
        -moz-background-clip: padding;
        background-clip: padding-box;
    }
    .menu ul:after {
        content: ""; clear: both; display: block;
    }
    .menu ul li {
        padding: 0px;
        border-right:1px solid #053A7D;
    }
    .menu > ul > li { 
        display: inline-block;

    }
    .menu ul li a { 
        display: block;
        text-decoration: none;
        color: #053A7D;
        font-size: .9em;
    }
    .menu ul li > a { 
        padding: 5px 20px;  
    }
    .menu ul ul { 
        display: none; 
        position: absolute; 
        top:100%;
        min-width: 160px;
        border-top: 2px solid #053A7D;
        /*background-color: #f4f4f4;
    border: 1px solid rgba(0, 0, 0, 0.2);
        -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
        -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    */
    }
    .menu ul li:hover > ul {
        display: block;
    }
    .menu ul ul > li {
        position: relative;
    }
    .menu ul ul > li a {
        padding: 5px 2px 5px 2px;
        height: auto;
        background-color: #fff;
        -webkit-transition: background-color 0.2s ease-out;  
        -moz-transition: background-color 0.2s ease-out;
        -ms-transition: background-color 0.2s ease-out;
        -o-transition: background-color 0.2s ease-out;
        transition: background-color 0.2s ease-out; 
    }
    .menu ul ul > li a:hover {
        /*background-color: #AE5C10;
        background-color: rgba(174, 92,16, 0.9);
        color: #fff;
    */
    }
    .menu ul ul ul {
        position: absolute; 
        left: 100%; 
        top:0;
    }


    @media screen and (max-width: 768px) {

        a.menu-link {
            display: block;
            color: #fff;
            background-color: #AE5C10;
            background-color: rgba(174, 92,16, 0.9);
        }
        .menu {
            clear: both;
            min-width: inherit;
            float: none;
        }
        .menu, .menu > ul ul {
            overflow: hidden;
            max-height: 0;
            background-color: #f1f1f1;
        }
        .menu > li > ul.sub-menu {
        padding: 0px;
        border: none;
        -webkit-border-radius: 0px;
        -moz-border-radius: 0px;
        border-radius: 0px;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
        -webkit-background-clip: padding-box;
        -moz-background-clip: padding;
        background-clip: padding-box;
        }
        .menu.active, .menu > ul ul.active {
            max-height: 55em;
        }
        .menu ul {
            display: inline;
        }
        .menu > ul {
            border-top: 1px solid #808080;
        }
        .menu li, .menu > ul > li {
            display: block;
        }
        .menu li a {
            color: #000;
            display: block;
            padding: 0.8em;
            border-bottom: 1px solid #808080;
            position: relative;
        }
        .menu li.has-submenu > a:after {
            content: '+';
            position: absolute;
            top: 0;
            right: 0;
            display: block;
            font-size: 1.5em;
            padding: 0.55em 0.5em;
        }
        .menu li.has-submenu > a.active:after {
            content: "-";
        }
        .menu ul ul > li a {
            background-color: #e4e4e4;
            height:58px;
            padding: 19px 18px 19px 30px;
        }
        .menu ul ul, .menu ul ul ul {
            display: inherit;
            position: relative;
            left: auto; top:auto;
            box-shadow: none; 
            border:none;
        }
    }
    /*Menu End*/

我已经设置了小提琴示例，我将非常感谢这方面的帮助。

http://jsfiddle.net/9BcPd/

更新：为了避免混淆，我要上传另一张图片，该图片显示红色的辅助菜单位置指南

enter image description here

Answer 1

即使子菜单的宽度超过父菜单的宽度，也希望子菜单显示在父菜单的中心，我尝试了这个但是未能   让它变得完美。

添加

.menu ul ul {

 ---
 --- 
 ---
   margin-left:-20px;

}

.menu ul ul li {
   padding: 0px;
   border-right:none;
}
.menu ul li > a {
    padding: 5px 20px;
    text-align:center;
}

DEMO

Answer 2

以下是我对此导航菜单的看法：http://jsfiddle.net/bG46Z/。我在CSS代码中添加了一些注释，用于解决链接和子菜单的水平居中之间的垂直线。

对于此预览，请使用Firefox。 WebKit浏览器也可以工作，但是在更改视口大小时我遇到了异常（可能是错误）。也就是说，当屏幕宽度较小（低于600px）并且您调整其大小以便显示完整菜单然后将其调整为较小的宽度时，将鼠标悬停在菜单“按钮”上将不会显示菜单。它在Firefox中运行得很好，所以我认为它只是WebKit浏览器中的一个错误。为了克服后一种异常，你可以只使用一些jQuery代码。

HTML：

<div id = "menuContainer">
    <p>Menu</p>
    <ul>
        <li><a href = "#">Home</a></li>
        <li><a href = "#">Menu Two</a>
            <ul>
                <li><a href = "#">Sub Menu One</a></li>
                <li><a href = "#">Sub Menu Two</a></li>
                <li><a href = "#">Sub Menu Three</a></li>
                <li><a href = "#">Sub Menu Four</a></li>
            </ul>
        </li>
        <li><a href = "#">Menu Three</a></li>
        <li><a href = "#">Menu Four</a></li>
    </ul>
</div>
<p>Sample paragraph</p>

CSS：

/* 
    a mini-reset to eliminate default formatting 
    applied by the browser
*/

* {
    margin: 0;
    padding: 0;
}

ul {
    list-style-type: none;
}

body {
    padding: 10px;
}

#menuContainer > p {
    display: none;
}

/*
    the main ul is displayed as a table.  This makes
    it shrinkwrap around its children while remaining 
    a block element.  This allows to apply margin: 0 auto 
    to center it.  Additionally, no clearfix is required 
    if elements are floated in the table element.
*/

#menuContainer > ul {
    display: table;
    margin: 0 auto;
}

#menuContainer > ul > li {
    float: left;
    padding: 5px 0;
    position: relative;
}

#menuContainer > ul > li:hover > a {
    color: #aaa;
}

/*
    The links are displayed as blocks, which allows 
    changing their width and height indirectly through 
    paddings, line-heights, etc.
*/

#menuContainer li a {
    display: block;
    font: bold 15px/1 Sans-Serif;
    text-transform: uppercase;
    text-decoration: none;
    color: #002B81;
    text-align: center;
    padding: 0 20px;
    white-space: nowrap;
}

/*
    The border is added on the left for the links that are 
    children of the list item that follows another list 
    item.  In other words, the border is set for every 
    link that is a child of every list item, except the 
    first list item.
*/

#menuContainer > ul > li + li > a {
    border-left: 2px solid #002B81;
}

/*
    This chunk of code does the horizontal centering of the 
    nested list under its list item parent.  The left of 50% 
    moves the left edge of the list to the center of its li 
    parent; and, translateX() of -50% moves the nested list 
    to the left by 50% of its width.
*/

#menuContainer ul ul {
    position: absolute;
    left: 50%;
    top: 100%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    padding: 20px 0 30px 0;
    display: none;
}

/*
    This is a "trick" to apply the background to 
    only a part of the nested ul.  In reality the 
    ul is immediately below its li parent, but this 
    makes it look as if it is farther down.
*/

#menuContainer ul ul:before {
    content: "";
    position: absolute;
    top: 20px;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    z-index: -1;
}

#menuContainer ul ul > li:first-child {
    border-top: 2px solid #002B81;
    padding-top: 10px;
}

#menuContainer ul ul a {
    padding: 0 10px;
    color: #fafafa;
    line-height: 2;
}

#menuContainer ul ul a:hover {
    color: #ccc;
    background-color: #fafafa
}

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

/*
    media queries code that makes the menu "button" 
    visible, reformats the menus for more narrow display,
    and creates the appropriate dropdown effect.
*/

@media screen and (max-width: 600px) {
    #menuContainer > p {
        cursor: pointer;
        display: table;
        margin: 0 auto;
        padding: 5px 10px;
        font: bold 15px/1 Sans-Serif;
        text-transform: uppercase;
        color: #fafafa;
        background-color: #002B81;
    }

    #menuContainer > ul {
        padding: 10px 0 30px 0;
        position: absolute;
        display: none;
        left: 50%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
    }

    #menuContainer > ul:before {
        content: "";
        position: absolute;
        top: 10px;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ccc;
        z-index: -1;
    }

    #menuContainer > ul > li {
        float: none;
    }

    #menuContainer > ul > li:first-child {
        border-top: 2px solid #002b81;
    }

    #menuContainer > ul > li {
        padding: 5px 0;
    }

    #menuContainer > ul > li > a {
        font-size: 14px;
    }

    #menuContainer > ul > li:hover > a {
        color: #585858;
    }

    #menuContainer > ul > li + li > a {
        border: 0;
    }

    #menuContainer ul ul {
        position: static;
        display: block;
        border-top: 0;
        padding: 0;
        -webkit-transform: none;
        transform: none;
        margin-top: 5px;
    }

    #menuContainer ul ul > li:first-child {
        border: 0;
        padding-top: 0;
    }

    #menuContainer ul ul a {
        font-size: 12px;
    }

    #menuContainer:hover > p:hover + ul,
    #menuContainer:hover ul:hover {
        display: block;
    }
}

干杯。

CSS菜单格式问题

2 个答案: