我的 CSS 导航需要一个基本的子菜单

Question

所以不管样式和其他一切，我只想为我的一些导航选择显示一个子菜单。

现在我有一个使用在线教程自己制作的基本列表。不过后来，在网上搜索之后，我仍然没有找到与我的代码或理解接近的子菜单导航。

这是我的html代码：

<div class="navigation">


    <li>
        <h2>Services</h2>

    </li>





    <li>
        <h2>Store</h2> </l

        <li><a href="#">Photoshop</a></li>
            <li><a href="#">Illustrator</a></li>
            <li><a href="#">Web Design</a></li>



    </li>
    </nav>


</div>





<div class="navigation blue">

<li>
<a href="https://www.facebook.com/pages/Argano-Computer-Services/268377233227887?fref=ts">
        <h2>Facebook</h2>

        </a></li></div><a href="https://www.facebook.com/pages/Argano-Computer-Services/268377233227887?fref=ts">
        </a>





<div class="navigation orange">
    <li>
    <a href="http://www.bing.com/maps/default.aspx?v=2&amp;pc=FACEBK&amp;mid=8100&amp;rtp=adr.~pos.35.195859_-106.672877_Argano+Computer+Services_10009+Clearwater+Court%2C+Albuquerque%2C+New+Mexico&amp;cp=35.195859~-106.672877&amp;lvl=16&amp;sty=r&amp;rtop=0~0~0~&amp;mode=D&amp;FORM=FBKPL1&amp;mkt=en-US" target="_blank">
        <h2>Locate</h2>


    </a>
    </li>

    </div>

    <div class="navigation green">
    <li>
        <h2>Feedback</h2>

    </li>

    </div>

    <div class="navigation purple">
    <li>
        <h2>About</h2>


    </li>
</div>

</div>
</div>

这是我的 CSS：

<div class="navigation">


    <li>
        <h2>Services</h2>

    </li>





    <li>
        <h2>Store</h2> </l

        <li><a href="#">Photoshop</a></li>
            <li><a href="#">Illustrator</a></li>
            <li><a href="#">Web Design</a></li>



    </li>
    </nav>


</div>





<div class="navigation blue">

<li>
<a href="https://www.facebook.com/pages/Argano-Computer-Services/268377233227887?fref=ts">
        <h2>Facebook</h2>

        </a></li></div><a href="https://www.facebook.com/pages/Argano-Computer-Services/268377233227887?fref=ts">
        </a>





 <div class="navigation orange">
    <li>
    <a href="http://www.bing.com/maps/default.aspx?v=2&amp;pc=FACEBK&amp;mid=8100&amp;rtp=adr.~pos.35.195859_-106.672877_Argano+Computer+Services_10009+Clearwater+Court%2C+Albuquerque%2C+New+Mexico&amp;cp=35.195859~-106.672877&amp;lvl=16&amp;sty=r&amp;rtop=0~0~0~&amp;mode=D&amp;FORM=FBKPL1&amp;mkt=en-US" target="_blank">
        <h2>Locate</h2>


    </a>
    </li>

    </div>

    <div class="navigation green">
    <li>
        <h2>Feedback</h2>

    </li>

    </div>

    <div class="navigation purple">
    <li>
        <h2>About</h2>


    </li>
</div>

</div>
</div>

有什么建议吗？

Answer 1

简单的submenu给你：

<ul id="submenu">
    <li>Home</li>
    <li>About</li>
    <li>Team</li>
</ul>

<style>
    *, *:before, *:after {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        zoom: 1;
    }

    #submenu {
        width: 200px;
        background: #eee;
        padding: 10px;
    }

    #submenu li{
        margin: 0;
        margin-bottom: 10px;
        position: relative;
        text-align: center;
        font-weight: bold;
        color: #fff !important;
        line-height: 1 !important;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        white-space: nowrap;
        border: none;
        cursor: pointer;
        display: inline-block;
        vertical-align: middle;
        zoom: 1;
        border-radius: 3px;
        -webkit-font-smoothing: antialiased;
        background-color: #77cc6d;
        text-shadow: 0 1px 0 rgba(0,0,0,0.15);
        font-size: 15px;
        padding: 12px 12px 12px 12px;
        box-shadow: 0 3px 0 0 #53994b;
        width: 100%;
    }

    #submenu li:active, #submenu li:focus{
        box-shadow: 0 1px 0 0 #53994b;
        top: 2px;
    }

    #submenu li:last-child{
        margin-bottom: 0px;
    }
</style>

JSFiddle：http://jsfiddle.net/aLggP/1/