Wie die CSS Dropdown gleichen Größe machen, wie es Eltern

Question

Der Titel vielleicht ein wenig verwirrend ist, lassen Sie mich Ihnen mit Bildern erklären:

Das ist, was ich habe:

JSFiddle

Mein HTML

<div id="nav" role="navigation"> 
     <ul> 
      <li> 
       <a href="">ABOUT</a> 
      </li> 
      <li> 
       <a href="">I LIKE POTATOES</a> 
        <ul> 
         <li> 
          <a href="">CARROTS</a> 
         </li> 
         <li> 
          <a href="">EGGPLANTS</a> 
         </li> 
         <li> 
          <a href="">SAUSAGES</a> 
         </li> 
        </ul> 
      </li> 
      <li> 
       <a href="">DISPLAY 3</a> 
        <ul> 
         <li> 
          <a href="">FEATURE 1</a> 
         </li> 
         <li> 
          <a href="">FEATURE 2</a> 
         </li> 
         <li> 
          <a href="">FEATURE 3</a> 
         </li> 
        </ul> 
      </li> 
      <li> 
       <a href="">DISPLAY 4</a> 
        <ul> 
         <li> 
          <a href="">FEATURE 1</a> 
         </li> 
         <li> 
          <a href="">FEATURE 2</a> 
         </li> 
         <li> 
          <a href="">FEATURE 3</a> 
         </li> 
        </ul> 
      </li> 
     </ul> 
    </div> 

Meine CSS (LINK ZUM FONT REMOVER aufgrund meiner RUF NACH 10)

body { 
    margin: 0 auto; 
    padding: 0 auto; 
    background-color: #999999; 
} 

div#nav > ul { 
    background-color: #333333; 
    padding: 20px; 
    margin: 0 auto; 
    padding: 0 auto; 
} 

div#nav > ul > li, 
div#nav > ul > li > ul > li { 
    list-style-type: none; 
    text-align: center; 
} 


div#nav > ul > li { 
    display: inline-block; 
} 

div#nav > ul > li > a, 
div#nav > ul > li > ul > li > a { 
    text-decoration: none; 
} 

div#nav > ul > li > ul > li { 
    margin: 0px 5px 12px 5px; 
} 

/**************** 
    LINKS STYLING AND LINKS HOVERS 
***************/ 

div#nav > ul > li > a { 
    color: #fafafa; 
    font-family: 'Lato', sans-serif; 
    padding: 10px; 
    font-size: 1.2em; 
    padding: 20px; 
} 

div#nav > ul > li> a:hover { 
    color: #555555; 
    transition: 0.3s; 
} 

div#nav > ul > li > ul > li > a { 
    color: #fafafa; 
    text-decoration: none; 
    font-family: 'Lato', sans-serif; 
} 

div#nav > ul > li > ul > li > a:hover { 
    color: #333333; 
    transition: 0.3s; 
} 

/**************** 
    DROPDOWN 
***************/ 

div#nav > ul > li > ul { 
    display: none; 
    background-color: #555555; 
    margin-top: 20px; 
} 

div#nav > ul > li:hover > ul { 
    display: block; 
    position: absolute; 
    padding: 20px; 
} 

/**************** 
    HOVER BORDERS 
***************/ 

div#nav > ul > li:hover { 
    border-left: #555555 solid 1px; 
    border-right: #555555 solid 1px; 
} 

Answer 1

in Ihrem CSS:

/**************** 
DROPDOWN 
***************/ 
div#nav > ul > li{ 
    position: relative; 
} 
div#nav > ul > li > ul { 
    width : 100%; 
    -webkit-padding-start:0; 
    display: none; 
    background-color: #555555; 
    margin-top: 20px; 
} 

div#nav > ul > li:hover > ul { 
    display: block; 
    position: absolute; 
    padding : 20px 0; 
} 

Um die Größe eines absoluten Element zu beheben, müssen Sie Deklarieren Sie ein Elternteil mit position : relative.

Dann beheben Sie die width : 100% und entfernen Sie Ihre Polster links und rechts. Zum Abschluss Chrom eine Polsterung für ul hinzufügen, so müssen Sie diesen Wert auf 0.

machen, weiß ich nicht, ob es die bessere Antwort ist, aber es funktioniert