我的導航欄中的下拉菜單未對齊

Question

我在導航欄中對齊下拉菜單時遇到了問題，我嘗試了所有建議。我試過left,float: left,right，以及其他幾乎所有的東西。我認爲這可能是干擾事件。下拉菜單中的所有內容都從父菜單項的中心到右邊對齊。

https://jsfiddle.net/ethacker/j7tgq95j/3/

我的html代碼：

<header> 
<nav> 
    <h1> Welcome to Mommy Madness</h1> 
    <ul> 
     <li class="parentMenu"><a href="../Home/mmHome.html">Home</a> 
      <ul class="sub-menu"> 
       <li><a href="../Home/mmAbout.html">About</a></li> 
       <li><a href="../Home/mmContact.html">Contact</a></li> 
      </ul> 
     </li> 
     <li class="parentMenu"><a href="../PregnancyPages/preg.html">Pregnancy</a> 
      <!-- 
      Gender Predictions: 
      Old Wive's Tale 
      Boy vs Girl- The Ramzi Method 
      --> 
      <ul class="sub-menu"> 
       <li><a href="../PregnancyPages/pregAdvice.html">Advice</a></li> 
       <li><a href="../PregnancyPages/pregGenderPredictions.html">Gender Predictions</a></li> 
       <li><a href="../PregnancyPages/pregTTC.html">Trying To Conceive</a></li> 
      </ul> 
     </li> 
     <li class="parentMenu"><a href="../AllAboutBaby/AllAboutBaby.html">All About Baby</a> 
      <ul class="sub-menu"> 
       <li><a href="../AllAboutBaby/aabFetalDev.html">Fetal Development</a></li> 
       <li><a href="../AllAboutBaby/aabGuidelines.html">Guidelines </a> </li> 
       <li><a href="../AllAboutBaby/aabMilestones.html"> Milestones</a></li> 
      </ul> 
     </li> 
     <li class="parentMenu"><a href="../PartyMomma/PartyMomma.html">Party Momma</a> 
      <!-- 
      Birthdays - Link to 1-10th bdays. 
      --> 
      <ul class="sub-menu"> 
       <li><a href="../PartyMomma/pmPregAnn.html">Pregnancy Announcement</a></li> 
       <li><a href="../PartyMomma/pmGenderReveal.html">Gender Reveal</a></li> 
       <li><a href="../PartyMomma/pmBabyShower.html">Baby Shower</a></li> 
       <li><a href="../PartyMomma/pmBirthAnn.html">Birth Announcement</a></li> 
       <li><a href="../PartyMomma/pmBirthdays.html"> Birthdays</a></li> 
      </ul> 
     </li> 
     <li class="parentMenu"><a href="../Stations/Stations.html">Stations</a> 
      <ul class="sub-menu"> 
       <li><a href="../Stations/sHospitalBag.html">Hospital Bag</a></li> 
       <li><a href="../Stations/sDiaperBag.html">Diaper Bag</a></li> 
       <li><a href="../Stations/sChangingStation.html">Changing Station</a></li> 
       <li><a href="../Stations/sBabyGear.html">Baby Gear</a></li> 
      </ul> 
     </li> 
     <li class="parentMenu"><a href="../MemoryMarkers/memoryMarkers.html">Memory Markers</a> 
      <!-- 
      Drop Down Menu: 
      DIY 
      Purchases 
      (Both to have holiday/event selectors on right of page) 
      --> 
      <ul class="sub-menu"> 
       <li><a href="../MemoryMarkers/memDIY.html">DIY</a></li> 
       <li><a href="../MemoryMarkers/memPurchase.html">Purchases</a></li> 
      </ul> 
     </li> 
     <li class="parentMenu"><a href="../Reviews/Reviews.html">Reviews</a> 
      <ul class="sub-menu"> 
       <li><a href="../Reviews/Games.html">Games</a></li> 
       <li><a href="../Reviews/Gear.html">Gear</a></li> 
       <li><a href="../Reviews/Learning.html">Learning</a></li> 
      </ul> 
     </li> 
     <li class="parentMenu"><a href="../Blog/mmBlog.html">Blog</a> 
      <ul class="sub-menu"> 
       <li>Fit Momma</li> 
       <li>Minimal Momma</li> 
       <li>Modern Momma</li> 
       <li>Organic Momma</li> 
       <li>Organizing Queen</li> 
       <li>Savings Savvy</li> 
       <li>Tech Savvy</li> 
       <li>Traditional Momma</li> 
      </ul> 
     </li> 
    </ul> 
</nav> 

我的CSS代碼：

body { 
background-color: beige; 
color: lightblue; 
padding: 0; 
margin:0; 
} 

header { 
background-color: lightblue; 
padding: 5px 0; 
margin: 0; 
} 
header h1 { 
color: cadetblue; 
font-family: Arial; 
margin: 0; 
padding: 5px 15px; 
display: inline; 
} 

.navMenu{ 
display: inline; 
margin: 0; 
} 

.navMenu .parentMenu { 
display: inline-block; 
list-style-type: none; 
background-color: lightgray; 
padding: 5px 10px; 
border: thin solid darkgray; 
border-radius: 3px; 
color: honeydew; 
position: relative; 
margin: 0; 
} 

.navMenu .parentMenu a{ 
color: azure; 
} 

.navMenu .parentMenu .sub-menu{ 
    display: none; 
} 

.navMenu .parentMenu:hover .sub-menu{ 
    display: block; 
    position: absolute; 
    list-style-type: none; 
    margin:0; 
    } 

.parentMenu:hover .sub-menu li{ 
border: thin solid darkgray; 
padding: 4%; 
background-color: lightgray; 
color: honeydew; 
text-align: left; 
white-space: nowrap; 
width: 100%; 
list-style-type: none; 
margin: 0; 
} 

.parentMenu .sub-menu li:hover { 
background-color: lightsteelblue; 
} 

.section { 
background-color: wheat; 
color: darkslategray; 
padding: 5px; 
float: left; 
display: inline; 
width: 63%; 
margin: 0 1% 1% 1%; 
border-radius: 10px; 
border: thin solid khaki; 
box-shadow: lightgray; 
} 

#about { 
float: right; 
width: 30%; 
margin: 1% 1% 0 0; 
text-align: center; 
} 

#home{ 
margin: 1% 0 1% 1%; 
} 

h4, h3 { 
color: lightseagreen; 
} 

Answer 1

這將對齊子菜單的左邊：

.navMenu .parentMenu .sub-menu { 
    display: none; 
    position:absolute; 
    list-style-type: none; 
    padding:0; 
    margin: 0; 
    left:-1px; 
    top:27px; 
} 

.navMenu .parentMenu:hover .sub-menu { 
    display: block; 
} 

https://jsfiddle.net/am13qur4/

Answer 2

你沒有指定要調整你的下拉元素。你想把所有的對齊到右邊，中間還是左邊。我假設離開，所以嘗試添加下面的代碼。您可能需要調整左側屬性的值和懸停背景樣式。

.SUB-菜單{

position: absolute; 
left: 3%; 

}

讓我知道，如果這有助於。保暖！