如何停止CSS/HTML最后一个下拉菜单在较小屏幕上丢失

Question

第一篇文章在这里，但是一个经常阅读和使用各种问题的读者。我在这里有一小段代码来制作一个下拉菜单。我还附上了我的CSS代码说菜单。除了一个部分之外，菜单都运行得很好。我最后一个id为"workwear“的下拉菜单继续向左，这对于高分辨率的屏幕来说是很棒的，但是，对于较小的屏幕，用户看不到他们屏幕上看不到的菜单的一半。我希望发生的是下拉对齐到工作服链接的右侧，而不是左侧，并继续向右

我试着给‘工作服’ul一个类，并在我的CSS中尝试了各种我研究过的东西，但似乎都不起作用。

如果这是一个基本的错误，请宽恕我，我很感谢你能给我的任何帮助。

<div id="ProdBar">

    <ul id="Prods">

        <li><a id="BuildingSupplies" href="BuildingSupplies.php" title="Building Supplies">   <span>Building Supplies</span></a>
            <ul>
                <li><a href="/Products/CementMortarPlaster.php">Cement, Mortar & Plaster</a></li>
                <li><a href="/Products/Drainage.php">Drainage</a></li>
                <li><a href="/Products/Gutterings.php">Gutterings</a></li>
                <li><a href="/Products/ScrewsFixings.php">Screws & Fixings</a></li>
                <li><a href="/Products/SiliconesSealants.php">Silicones & Sealants</a></li>
                <li><a href="/Products/Adhesives.php">Adhesives & Pastes</a></li>
            </ul>
        </li>

        <li><a id="DoorsSecurity" href="DoorsSecurity.php" title="Doors And Security"><span>Doors And Security</span></a>
            <ul>
                <li><a href="/Products/Handles.php">Handles & Accessories</a></li>
                <li><a href="/Products/DoorLocks.php">Door Locks</a></li>
                <li><a href="/Products/Padlocks.php">Padlocks</a></li>
            </ul>
        </li>


        <li><a id="Electrics" href="Electrics.php" title="Electrics"><span>Electrics</span></a>
            <ul>
                <li><a href="/Products/Bulbs.php">Bulbs & Strip Lighting</a></li>
                <li><a href="/Products/Extensions.php">Extensions & Sockets</a></li>
                <li><a href="/Products/OutdoorLights.php">Outdoor Lighting</a></li>
                <li><a href="/Products/Switches.php">Switches</a></li>
                <li><a href="/Products/WireCable.php">Wires & Cable</a></li>
            </ul>
        </li>

        <li><a id="Flooring" href="Flooring.php" title="Flooring And Tiling"><span>Flooring & Tiling</span></a>
            <ul>
                <li><a href="/Products/Grips.php">Grips & Fittings</a></li>
                <li><a href="/Products/GroutAdhesives.php">Grouts & Adhesives</a></li>
            </ul>
        </li>

        <li><a id="GardeningOutdoors" href="Gardening.php" title="Gardening And Outdoors"><span>Gardening & Outdoors</span></a>
            <ul>
                <li><a href="/Products/HoseFittings.php">Hoses & Fittings</a></li>
                <li><a href="/Products/FoodTreatment.php">Foods & Treatments</a></li>
                <li><a href="/Products/LawnCare.php">Lawn Care</a></li>
                <li><a href="/Products/PestControl.php">Pest Control</a></li>
                <li><a href="/Products/GardeningTools.php">Gardening Tools</a></li>
                <li><a href="/Products/ToolConsumables.php">Tool Consumables</a></li>
                <li><a href="/Products/Weedkillers.php">Weedkillers & Cleaners</a></li>
                <li><a href="/Products/ExteriorWoodcare.php">Exterior Woodcare</a></li>
            </ul>
        </li>

        <li><a id="HandPowerTools" href="HandPowerTools.php" title="Hand And Power Tools"><span>Hand & Power Tools</span></a>
            <ul>
                <li><a href="/Products/Drills.php">Drills</a></li>
                <li><a href="/Products/Grinders.php">Grinders</a></li>
                <li><a href="/Products/HandTools.php">Hand Tools</a></li>
                <li><a href="/Products/PowerToolAccessories.php">Power Tool Accessories</a></li>
                <li><a href="/Products/SandersPlaners.php">Sanders & Planers</a></li>
                <li><a href="/Products/WorkTables.php">Work Tables</a></li>
            </ul>
        </li>

        <li><a id="Homewares" href="Homewares.php" title="Homewares"><span>Homewares</span></a>
            <ul>
                <li><a href="/Products/Cleaning.php">Cleaning</a></li>
                <li><a href="/Products/CurtainFixtures.php">Curtain Fixtures</a></li>
                <li><a href="/Products/Fireplace.php">Fireplace Products</a></li>
            </ul>
        </li>

        <li><a id="PaintingDecorating" href="PaintingDecorating.php" title="Painting And Decorating"><span>Painting & Decorating</span></a>
            <ul>
                <li><a href="/Products/Adhesives.php">Adhesives & Pastes</a></li>
                <li><a href="/Products/DecoratingTools.php">Decorating Tools</a></li>
                <li><a href="/Products/Emulsion.php">Emulsion</a></li>
                <li><a href="/Products/ExteriorPaints.php">Exterior Paints</a></li>
                <li><a href="/Products/FillerCaulk.php">Filler & Caulk</a></li>
                <li><a href="/Products/GlossSatinUndercoat.php">Gloss, Satin & Undercoat</a></li>
                <li><a href="/Products/SiliconesSealants.php">Silicone & Sealants</a></li>
                <li><a href="/Products/SpecialistPaint.php">Specialist Paints</a></li>
                <li><a href="/Products/StepsLadders.php">Steps & Ladders</a></li>
                <li><a href="/Products/Woodcare.php">Woodcare</a></li>
            </ul>
        </li>

        <li><a id="Plumbing" href="Plumbing.php" title="Plumbing"><span>Plumbing</span></a>
            <ul>
                <li><a href="/Products/PlumbingConsumables.php">Consumables</a></li>
                <li><a href="/Products/PlumbingFittings.php">Pipes & Fittings</a></li>
                <li><a href="/Products/PlumbingTools.php">Plumbing Tools</a></li>
                <li><a href="/Products/ShowerFittings.php">Shower Fittings</a></li>
                <li><a href="/Products/TapsPlugs.php">Taps & Plugs</a></li>
                <li><a href="/Products/ToiletAccessories.php">Toilet Accessories</a></li>
                <li><a href="/Products/Venting.php">Venting</a></li>
            </ul>
        </li>

        <li><a id="Workwear" href="Workwear.php" title="Workwear"><span>Workwear</span></a>
            <ul>
                <li><a href="/Products/WorkwearConsumables.php">Consumables</a></li>
                <li><a href="/Products/Coveralls.php">Coveralls</a></li>
                <li><a href="/Products/EarEyeProtection.php">Ear & Eye Protection</a></li>
                <li><a href="/Products/Footwear.php">Footwear</a></li>
                <li><a href="/Products/JacketsFleeces.php">Jackets, Fleeces & Hoodies</a></li>
                <li><a href="/Products/SocksHatsGloves.php">Socks, Hats & Gloves</a></li>
                <li><a href="/Products/Trousers.php">Trousers</a></li>
                <li><a href="/Products/Tshirts.php">T Shirts</a></li>
            </ul>
        </li>

    </ul>

</div>

这是我的CSS

#Prods, #Prods ul {
    padding: 0;
    margin: 0;
    list-style: none;
}
#Prods li {
    float: left;
    width: auto;
}
#Prods a {
    display: block;
}
#Prods li ul {
    position: absolute;
    width: 200px;
    left: -999em;
    background:#C60001;
}
#Prods li ul.last {
    width: 200px;
}
#Prods li:hover ul {
    display: block;
    position: absolute;
    margin: 0;
    padding: 0;
}
#Prods li:hover li {
    float: none;
    font-family:"Century Gothic";
    font-size:14px;
}
#Prods li:hover li a {
    color: #FFF;
    padding-top:6px;
    padding-left:6px;
    padding-bottom:6px;
    text-decoration:none;
}
#Prods li li a:hover {
    background-color: #FF0000;
    color: #FFF;
}
#Prods li:hover ul, #Prods li.sfhover ul {
    left: auto;
    z-index:10;
}

你可以使用see it working on this fiddle。让我知道如果更多的信息是需要的，我会提供它。

Answer 1

一种选择是在CSS中使用相邻的同级选择器(+)，因此一些规则只应用于id为“a”的工作服旁边的工作服。对于您的特定情况，它将是：

#Prods li:hover a#Workwear + ul, #Prods li.sfhover a#Workwear + ul

现在您有了针对该特定下拉列表的规则，您可以在不影响其余内容的情况下对其应用一些CSS样式。

例如，您可以做的一件事是，不在其位置显示下拉菜单，而是将其向左平移一点：

#Prods li:hover a#Workwear + ul, #Prods li.sfhover a#Workwear + ul {
    transform: translate(-50%, 0%);
}

你可以在这里看到结果：http://jsfiddle.net/wmLfu1Lu/，并在这里阅读更多关于相邻兄弟选择器的信息：http://www.w3.org/TR/CSS2/selector.html#adjacent-selectors。