首先发布在这里但是常规读者和用户遇到各种问题。我在这里有一些代码来制作一个下拉菜单。我还附上了我的菜单的CSS代码。除了一个部分，菜单工作得很好。我的最后一个下拉菜单，带有id＆＃34;工作服＆＃34;继续向左移动，这对于高分辨率屏幕非常有用，但是对于较小的屏幕，用户无法看到屏幕上看不到的一半菜单。我想要发生的是下拉以对齐工作服链接的右侧而不是左侧并继续向右移动
我试过给工作服＆＃39;在我的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。如果需要更多信息，请告诉我，我会提供。
答案 0 :(得分：0)
一个选项是在CSS中使用相邻的兄弟选择器（+），因此某些规则仅应用于ul旁边的a，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。