Question

我无法根据我现有的导航装置设计,建造一个缩小的菜单。

这里是现行法典。

                     <ul>
                        <li><a href="index" class="current">Home</a></li>
                        <li><a href="psat-sat-act-online-tutoring">Subjects &amp; Pricing</a></li>
                        <li><a href="how-online-tutoring-works">Get Started</a></li>
                        <li><a href="system-requirements">System Requirements</a></li>
                        <li><a href="faq-us">FAQ</a></li>
                        <li><a href="contact-us">Contact Us</a></li>


                    </ul>

c) 法典

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:12px;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}

在开始的表格中,我想增加一个多层次的菜单。

Answer 1

You have not defined the class names in the HTML elements. You will also need to add a new unordered list to each li you want to have a drop down.

<div id="header">
<ul class="nav">
    <li><a href="index" class="current">Home</a></li>
    <li><a href="psat-sat-act-online-tutoring">Subjects &amp; Pricing</a></li>
    <li>
        <a href="how-online-tutoring-works">Get Started</a>
        <ul id="dropdown">
            <li><a href="#">Link 1</a>
            <li><a href="#">Link 2</a>
        </ul>
    </li>
    <li><a href="system-requirements">System Requirements</a></li>
    <li><a href="faq-us">FAQ</a></li>
    <li><a href="contact-us">Contact Us</a></li>
</ul>
</div>

届时,你们需要把这一点补充到你们的安保部。

ul.nav ul {
    visibility: hidden;
    z-index: 598;
}   
ul.nav li:hover > ul {
    visibility: visible;
}

友情链接