ナビゲーションバーのドロップダウンメニューが整列していません

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%; 

}

このことができますなら、私に教えてください。暖かくしてください！