Question

我的a website标准，带有子菜单内容的中心导航栏。我试图达到与this website相同的效果。

我需要菜单下拉列表，使其在显示时具有全宽和居中的内嵌项目，并且使徽标在屏幕左侧对齐约30px（而不是当前仅偏移页面的左侧））。

HTML：

<div class="oi_logo_holder">
    <div class="container">
        <div class="row">
            <div class="col-md-3 col-sm-3">
                <div class="oi_image_logo"><a href="https://okstaging.myrikdesign.co.za/" class="oi_text_logo_img"><img src="http://okstaging.myrikdesign.co.za/wp-content/uploads/2017/06/Logo-2.png" alt="Oliver Karstel Photography" /></a></div>
            </div>
            <div class="col-md-9 col-sm-9 hidden-xs">
                <div id="menu_slide_xs"><a id="nav-toggle" href="#"><span></span></a></div>
                <div class="menu-main-menu-container">
                    <ul id="menu-main-menu-1" class="oi_main_menu">
                        <li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-has-children menu-item-2060 oi_pid-2060 current-menu-item">
                            <a href="http://okstaging.myrikdesign.co.za#photography">Photos</a>
                            <ul class="sub-menu">
                                <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-2061 oi_pid-2061"><a href="http://okstaging.myrikdesign.co.za/architecture-photography">Architecture</a></li>
                            </ul>
                        </li>
                        <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-3191 oi_pid-3175">
                            <a href="https://okstaging.myrikdesign.co.za/articles/">Articles</a>
                            <ul class="sub-menu">
                                <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3207 oi_pid-3197"><a href="https://okstaging.myrikdesign.co.za/photography-articles/">Photography</a></li>
                                <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3221 oi_pid-3208"><a href="https://okstaging.myrikdesign.co.za/business-articles/">Business</a></li>
                                <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3220 oi_pid-3212"><a href="https://okstaging.myrikdesign.co.za/innovation-articles/">Innovation</a></li>
                                <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3219 oi_pid-3216"><a href="https://okstaging.myrikdesign.co.za/lifestyle-articles/">Lifestyle</a></li>
                            </ul>
                        </li>
                        <li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-2059 oi_pid-2059 current-menu-item"><a href="http://okstaging.myrikdesign.co.za#about">About</a></li>
                        <li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-2058 oi_pid-2058 current-menu-item"><a href="http://okstaging.myrikdesign.co.za#contact">Contact</a></li>
                        <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-3195 oi_pid-17"><a href="https://okstaging.myrikdesign.co.za/category/video/">Video</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

CSS：

.oi_logo_holder {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 990;
}

.oi_logo_holder {
    background-color: transparent;
}

.oi_logo_holder {
    padding-top: 30px;
    padding-right: 0;
    padding-bottom: 30px;
    padding-left: 0;
}

.oi_text_logo a, .oi_main_menu li > a, .oi_footer_menu li a, .oi_slide_header_side, input[type="submit"], input, textarea, .oi_readmore_btn, .blog_title_a, .oi_img_holder, .oi_zoom_img, .oi_list_cats li a, .oi_pg a, .oi_ff_img_holder img, .oi_ff_mask, .oi_vc_port_mask, .oi_port_style_ii .oi_vc_potrfolio, #load_more_port_masorny_posts, .oi_a_holder, .oi_np_holder, .oi_port_nav, .oi_creative_p_content, .oi_crea_a, .oi_c_resize, .oi_c_details, .oi_modern_p_next.test, .oi_logo_holder, .oi_site_description {
    webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/* MY OWN CODE BELOW */

#menu-main-menu-1 {
    padding-top: 17px;
    float: left!important;
}

.oi_main_menu li {
    position: initial!important;
}

.sub-menu {
    min-height: 73px;
    display: inline-block;
}

.oi_main_menu li > ul {
    padding-top: 28px!important;
}

.oi_main_menu li> ul li a {
    text-align: center;
}

悬停时的全宽和居中子菜单

0 个答案: