Как сделать CSS Dropdown такой же размер, как это родительский

Question

Название это может быть немного запутанным, позвольте мне объяснить вам с изображениями:

Это то, что у меня есть:

JSFiddle

Мой 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> 

Мой CSS (ССЫЛКА НА FONT УДАЛЕНИЯ ИЗ-ЗА МОЕЙ РЕПУТАЦИЯ ПОД 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

В вашем 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; 
} 

Чтобы зафиксировать размер абсолютного элемента, вы должны объявите родителя с position : relative.

Затем вы устанавливаете width : 100% и удаляете прокладку влево и вправо. Чтобы закончить хром добавить отступы для ul, так что вы должны сделать это значение 0.

Я не знаю, если это лучший ответ, но он работает