html - 如何阻止 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 中使用相邻的同级选择器 (+)，因此一些规则仅适用于 a 旁边的 ul id 为“workwear” .对于您的具体情况，它将是:

#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 .