-2

I'm triying to combine these two menus: http://tympanus.net/codrops/2013/05/08/responsive-retina-ready-menu/ http://tympanus.net/codrops/2010/11/25/overlay-effect-menu/

The first one will stay unchanged and the submenu in the second one will be used with it. But as i begin to change the css code and make these to merge, i always encounter a particular error. The "ul,li and a" properties of the "responsive-retina-ready-menu" effects the submenu that i take from "overlay-effect-menu" and i can not separate these properties. I mean it shows the submenu as it has the same style with the main menu. What can i do about it?

The one i have:

<div class="main clearfix">
                <nav id="menu" class="nav">                 
                    <ul>
                        <li>
                            <a href="#">
                                <span class="icon">
                                    <i aria-hidden="true" class="icon-home"></i>
                                </span>
                                <span>Menu 1</span>
                            </a><div class="cbp-hrsub">

                        </li>
                        <li>
                            <a href="#">
                                <span class="icon"> 
                                    <i aria-hidden="true" class="icon-services"></i>
                                </span>
                                <span>Menu 2</span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span class="icon">
                                    <i aria-hidden="true" class="icon-portfolio"></i>
                                </span>
                                <span>Menu 3</span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span class="icon">
                                    <i aria-hidden="true" class="icon-blog"></i>
                                </span>
                                <span>Menu 4</span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span class="icon">
                                    <i aria-hidden="true" class="icon-team"></i>
                                </span>
                                <span>Menu 5</span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span class="icon">
                                    <i aria-hidden="true" class="icon-contact"></i>
                                </span>
                                <span>Menu 6</span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span class="icon">
                                    <i aria-hidden="true" class="icon-contact"></i>
                                </span>
                                <span>Menu 7</span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span class="icon">
                                    <i aria-hidden="true" class="icon-contact"></i>
                                </span>
                                <span>Menu 8</span>
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>

The one i want:

<div class="main clearfix">
        <nav id="menu" class="nav">                 
            <ul>
                <li>
                    <a href="#">
                        <span class="icon">
                            <i aria-hidden="true" class="icon-home"></i>
                        </span>
                        <span>Menu 1</span>
                    </a><div class="cbp-hrsub">
                        <div class="cbp-hrsub-inner"> 
                            <div>
                                <h4>Learning &amp; Games</h4>
                                <ul>
                                    <li><a href="#">Catch the Bullet</a></li>
                                    <li><a href="#">Snoopydoo</a></li>
                                    <li><a href="#">Fallen Angel</a></li>
                                    <li><a href="#">Sui Maker</a></li>
                                    <li><a href="#">Wave Master</a></li>
                                    <li><a href="#">Golf Pro</a></li>
                                </ul>
                            </div>
                            <div>
                                <h4>Utilities</h4>
                                <ul>
                                    <li><a href="#">Gadget Finder</a></li>
                                    <li><a href="#">Green Tree Express</a></li>
                                    <li><a href="#">Green Tree Pro</a></li>
                                    <li><a href="#">Wobbler 3.0</a></li>
                                    <li><a href="#">Coolkid</a></li>
                                </ul>
                            </div>
                            <div>
                                <h4>Education</h4>
                                <ul>
                                    <li><a href="#">Learn Thai</a></li>
                                    <li><a href="#">Math Genius</a></li>
                                    <li><a href="#">Chemokid</a></li>
                                </ul>
                                <h4>Professionals</h4>
                                <ul>
                                    <li><a href="#">Success 1.0</a></li>
                                    <li><a href="#">Moneymaker</a></li>
                                </ul>
                            </div>
                        </div><!-- /cbp-hrsub-inner -->
                    </div>
                </li>
                <li>
                    <a href="#">
                        <span class="icon"> 
                            <i aria-hidden="true" class="icon-services"></i>
                        </span>
                        <span>Menu 2</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span class="icon">
                            <i aria-hidden="true" class="icon-portfolio"></i>
                        </span>
                        <span>Menu 3</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span class="icon">
                            <i aria-hidden="true" class="icon-blog"></i>
                        </span>
                        <span>Menu 4</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span class="icon">
                            <i aria-hidden="true" class="icon-team"></i>
                        </span>
                        <span>Menu 5</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span class="icon">
                            <i aria-hidden="true" class="icon-contact"></i>
                        </span>
                        <span>Menu 6</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span class="icon">
                            <i aria-hidden="true" class="icon-contact"></i>
                        </span>
                        <span>Menu 7</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span class="icon">
                            <i aria-hidden="true" class="icon-contact"></i>
                        </span>
                        <span>Menu 8</span>
                    </a>
                </li>
            </ul>
        </nav>
    </div>
4

1 回答 1

0

就像我在评论中提到的那样，您需要分别指定父元素和子元素的样式。

例如，为了设置list-style:none为 parent ul，您需要以下 CSS 选择器：

ul {
    list-style:none;
}

要将默认样式保留为 children ul，您需要在前一个选择器之后添加以下选择器：

ul ul {
    list-style:disc;
}

这是一个基于 OP 中给出的 HTML的演示，具有最少的样式，但说明了您可以分别设置父元素和子元素的样式的方式。（注意：将鼠标悬停在菜单 1 上）

于 2013-07-16T12:20:22.793 回答