purecss-ui-menu/dist/purecss-ui-menu-default.css

Responsive menu system with submenus and dropdowns built on purecss-ui.

/* default ui varaibles */
/* brand colors */
/* blue */
/* red */
/* light gray */
/* dark gray */
/* text colors */
/* theme colors */
/* typography */
/* menus */
/* buttons */
/* tiles */
/* cards */
/* jumbotron */
/* form */
/* z-index */
/* media break points */
/* default js component variables */
/* menus */
/* default js component styles */
.pure-menu .menu-section-divider {
        margin: 8px 0;
        overflow: hidden;
        border-bottom: 1px solid #e5e5e5;
        color: #9f0000;
        padding-left: 10px;
    }
.pure-menu .menu-section-header {
        display: block;
        padding: 6px 32px;
        font-size: 11px;
        color: #999;
        white-space: nowrap;
    }
.pure-menu .pure-menu-item.sub-menu ul {
                list-style: none;
            }
.pure-menu .pure-menu-item.sub-menu ul .pure-menu-link {
                    font-weight: normal;
                }
.pure-menu .pure-menu-item.sub-menu>.sub-menu-content {
                display: none;
                position: absolute;
                min-width: 200px;
                margin: 12px 0 0;
                padding: 7px 0;
                background-clip: padding-box;
                border-radius: 4px;
                background-color: #fff;
                border: 1px solid #c3c3c3;
                box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.2);
                text-align: left;
                z-index: 1;
            }
.pure-menu .pure-menu-item.sub-menu>.sub-menu-content .pure-menu-link {
                    font-size: 14px;
                }
.pure-menu .pure-menu-item.sub-menu>.sub-menu-content li a,
                    .pure-menu .pure-menu-item.sub-menu>.sub-menu-content li button {
                        display: block;
                        text-decoration: none;
                        padding: 8px 32px;
                        color: #333;
                        white-space: nowrap;
                    }
.pure-menu .pure-menu-item.sub-menu>.sub-menu-content li a .icon-left, .pure-menu .pure-menu-item.sub-menu>.sub-menu-content li button .icon-left {
                            position: absolute;
                            left: 15px;
                            top: 11px;
                        }
.pure-menu .pure-menu-item.sub-menu>.sub-menu-content li a .icon-right, .pure-menu .pure-menu-item.sub-menu>.sub-menu-content li button .icon-right {
                            position: absolute;
                            right: 15px;
                            top: 11px;
                        }
.pure-menu .pure-menu-item.sub-menu.open>.sub-menu-content {
                    display: block;
                }
.pure-menu .pure-menu-item.sub-menu.open.open-left>.sub-menu-content {
                        position: absolute;
                        right: 100%;
                        top: -22px
                    }
.pure-menu .pure-menu-item.sub-menu.open.open-left>.sub-menu-content::before {
                            content: none;
                        }
.pure-menu .pure-menu-item.sub-menu.open.open-left>.sub-menu-content::after {
                            content: none;
                        }
.pure-menu .pure-menu-item.sub-menu.open.open-right>.sub-menu-content {
                        position: absolute;
                        left: 100%;
                        top: -22px
                    }
.pure-menu .pure-menu-item.sub-menu.open.open-right>.sub-menu-content::before {
                            content: none;
                        }
.pure-menu .pure-menu-item.sub-menu.open.open-right>.sub-menu-content::after {
                            content: none;
                        }
.pure-menu-horizontal .pure-menu-list .pure-menu-item.sub-menu.open::before {
            content: "";
            height: 0;
            width: 0;
            position: absolute;
            right: 6px;
            bottom: -12px;
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
            border-top: none;
            border-bottom: 8px solid #c3c3c3;
            z-index: 2;
        }
.pure-menu-horizontal .pure-menu-list .pure-menu-item.sub-menu.open::after {
            content: "";
            height: 0;
            width: 0;
            position: absolute;
            right: 6px;
            bottom: -13px;
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
            border-top: none;
            border-bottom: 8px solid #fff;
            z-index: 3;
        }
.pure-menu-horizontal .pure-menu-list .pure-menu-item.sub-menu.open .open-left::before {
                content: "";
                height: 0;
                width: 0;
                position: absolute;
                left: 0;
                top: 7px;
                border-left: 10px solid #c3c3c3;
                border-right: none;
                border-top: 10px solid transparent;
                border-bottom: 8px solid transparent;
                z-index: 2;
            }
.pure-menu-horizontal .pure-menu-list .pure-menu-item.sub-menu.open .open-left::after {
                content: "";
                height: 0;
                width: 0;
                position: absolute;
                left: -1px;
                top: 7px;
                border-left: 10px solid #fff;
                border-right: none;
                border-top: 10px solid transparent;
                border-bottom: 8px solid transparent;
                z-index: 3;
            }
.pure-menu-horizontal .pure-menu-list .pure-menu-item.sub-menu.open .open-right::before {
                content: "";
                height: 0;
                width: 0;
                position: absolute;
                right: 0;
                top: 7px;
                border-left: none;
                border-right: 10px solid #c3c3c3;
                border-top: 10px solid transparent;
                border-bottom: 8px solid transparent;
                z-index: 2;
            }
.pure-menu-horizontal .pure-menu-list .pure-menu-item.sub-menu.open .open-right::after {
                content: "";
                height: 0;
                width: 0;
                position: absolute;
                right: -1px;
                top: 7px;
                border-left: none;
                border-right: 10px solid #fff;
                border-top: 10px solid transparent;
                border-bottom: 8px solid transparent;
                z-index: 3;
            }
@media screen and (max-width: 1023px) {
            .pure-menu.pure-menu-horizontal .pure-menu-list.menu-collapse {
                display: none;
            }
                .pure-menu.pure-menu-horizontal.collapse-open .pure-g {
                    display: -ms-grid;
                    display: grid;
                    padding-bottom: 15px;
                }

                .pure-menu.pure-menu-horizontal.collapse-open .menu-collapse {
                    display: -ms-grid;
                    display: grid;
                }

                .pure-menu.pure-menu-horizontal.collapse-open li {
                    text-align: left;
                }
                        .pure-menu.pure-menu-horizontal.collapse-open .pure-menu-item.sub-menu>.sub-menu-content {
                            margin: 0;
                            padding: 0;
                            border: none;
                            box-shadow: none;
                            background-color: transparent;
                        }

                            .pure-menu.pure-menu-horizontal.collapse-open .pure-menu-item.sub-menu>.sub-menu-content .pure-menu-link {
                                font-size: 12px;
                            }
                                    .pure-menu.pure-menu-horizontal.collapse-open .pure-menu-item.sub-menu>.sub-menu-content li a .icon-left, .pure-menu.pure-menu-horizontal.collapse-open .pure-menu-item.sub-menu>.sub-menu-content li button .icon-left {
                                        top: 10px;
                                    }

                                    .pure-menu.pure-menu-horizontal.collapse-open .pure-menu-item.sub-menu>.sub-menu-content li a .icon-right, .pure-menu.pure-menu-horizontal.collapse-open .pure-menu-item.sub-menu>.sub-menu-content li button .icon-right {
                                        position: relative;
                                        left: 10px;
                                        right: 0;
                                        top: 0;
                                    }
                            .pure-menu.pure-menu-horizontal.collapse-open .pure-menu-item.sub-menu.open .sub-menu-content {
                                position: relative;
                                left: 14px;
                            }
                                .pure-menu.pure-menu-horizontal.collapse-open .pure-menu-item.sub-menu.open.open-left .sub-menu-content {
                                    right: 0;
                                    top: 0;
                                }
                                .pure-menu.pure-menu-horizontal.collapse-open .pure-menu-item.sub-menu.open.open-right .sub-menu-content {
                                    top: 0;
                                }
        .pure-menu.pure-menu-horizontal .pure-menu-item.sub-menu .sub-menu-content li a,
        .pure-menu.pure-menu-horizontal .pure-menu-item.sub-menu .sub-menu-content li button {
            color: #333;
        }
        .pure-menu.pure-menu-horizontal.menu-inverse .pure-menu-item.sub-menu .sub-menu-content li a,
        .pure-menu.pure-menu-horizontal.menu-inverse .pure-menu-item.sub-menu .sub-menu-content li button {
            color: #fff;
        }
            .pure-menu-horizontal .pure-menu-list .pure-menu-item.sub-menu.open::before {
                content: none;
            }

            .pure-menu-horizontal .pure-menu-list .pure-menu-item.sub-menu.open::after {
                content: none;
            }
                .pure-menu-horizontal .pure-menu-list .pure-menu-item.sub-menu.open .open-left::before {
                    content: none;
                }

                .pure-menu-horizontal .pure-menu-list .pure-menu-item.sub-menu.open .open-left::after {
                    content: none;
                }
                .pure-menu-horizontal .pure-menu-list .pure-menu-item.sub-menu.open .open-right::before {
                    content: none;
                }

                .pure-menu-horizontal .pure-menu-list .pure-menu-item.sub-menu.open .open-right::after {
                    content: none;
                }
}
.menu-toggle {
    display: none;
    float: right;
    min-height: 48px;
}
.menu-toggle .menu-toggle-button {
        background-color: transparent;
        color: #555;
        border: 1px solid #c3c3c3;
        box-shadow: none;
        outline: none;
        font-size: 22px;
        height: 40px;
        padding: 4px 10px 0 10px
    }
.menu-toggle .menu-toggle-button:focus,
        .menu-toggle .menu-toggle-button.focus,
        .menu-toggle .menu-toggle-button:hover,
        .menu-toggle .menu-toggle-button.hover,
        .menu-toggle .menu-toggle-button:active,
        .menu-toggle .menu-toggle-button.active {
            outline: none;
        }
@media screen and (max-width: 1023px) {
    .menu-toggle {
        display: flex;
        align-items: center;
        align-content: center;
    }
}