Question

我在网站上有以下导航栏。

http://i44.tinypic.com/211wk89.jpg

我尝试将子导航添加到html，如下所示（您可以在主题和定价标签下看到＆gt; subnav 1和2）

这是导航布局的html

<header>
     <nav>
        <div class="container">
            <div class="wrapper">
                <h1><a href="index"><strong>Virtual-Tutor</strong>Center</a></h1>
                <ul>
                    <li><a href="index" class="current">Home</a></li>
                    <li><a href="language-tutoring">Subjects &amp; Pricing</a>
                          <ul>
                          <li><a href="subnav 1">subnav 1</a></li>
                          <li><a href="subnav 2">subnav 2</a></li>
                          </ul>
                    </li>
                    <li><a href="how-online-tutoring-works">How it Works</a></li>
                    <li><a href="system-requirements">System Requirements</a></li>
                    <li><a href="contact-us">Contact Us</a></li>


                </ul>
            </div>
        </div>

    </nav>
</header>

但是我无法修复css以匹配原始导航设计，颜色和布局的外观和感觉。

header h1 {background:url(../images/logo.png) no-repeat 0 0;padding:2px 0 0 38px;font-family:'ColaborateThinRegular';font-size:26px;line-height:1.2em;color:#fff;font-weight:normal;float:left}
header h1 a {color:#fff;text-decoration:none}
header h1 strong {font-family:'ColaborateBoldRegular';font-weight:normal}
header nav {padding:7px 0 10px 0}
header nav ul {float:right;padding:2px 0 0 0}
header nav ul li {float:left;padding-left:4px}
header nav ul li a {position:relative;float:left;font-size:14px;color:#fff;text-decoration:none;font-family:'ColaborateThinRegular';text-transform:uppercase;height:32px;line-height:32px;background-color:#181717;padding:0 36px 0 10px;border-radius:17px;-moz-border-radius:17px;-webkit-border-radius:17px}
header nav ul li a:hover, header nav ul li a.current {background-image:-moz-linear-gradient(top, #ee3c09, #b90a09);/* FF3.6 */background-image:-webkit-gradient(linear,left bottom,left top,color-stop(0, #ee3c09),color-stop(1, #b90a09));/* Saf4+, Chrome */filter: progid:DXImageTransform.Microsoft.gradient(startColorstr= '#ee3c09', endColorstr= '#b90a09');/* IE6,IE7 */-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr= '#ee3c09', endColorstr= '#b90a09')";/* IE8 */}
header nav ul li a:after {content:'';display:block;position:absolute;right:12px;top:13px;width:4px;height:7px;background:url(../images/arrow1.gif) no-repeat 0 0}
header .adv-content {overflow:hidden;background:#f9f9f9;padding:10px 0 8px 0}
header .breadcrumbs {float:left;padding:3px 0 0 10px}
header .breadcrumbs li {display:inline;color:#212121;padding-left:5px}

我已经浏览了大量的子导航编码示例，但无法弄清楚如何添加与父导航栏具有相同外观的子视图。所有示例都显示了他们自己设计的从头开始。有人可以帮助css吗？

Answer 1

此论坛针对您可能正在努力解决的代码的具体问题，而不是有关如何为您的网站创建整个功能的一般性问题。

如果您查看本页面的右侧，您会发现之前已多次询问过您的问题。您可以查看这些问题，看看其他人如何回答，甚至更好，这是一个很棒且易于理解的教程，供您查看：http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-a-kick-butt-css3-mega-drop-down-menu/

导航栏中的html css下拉菜单

1 个答案: