html - CSS dropdown menu jumping -

The problem I am stuck with a drop down menu is that the "original" link is jumping.

HTML:

  & lt; Ul id = "nav" & gt; & Lt; Li & gt; & Lt; Period & gt; Page 1 & lt; / Span & gt; & Lt; Ul & gt; & Lt; Li & gt; & Lt; A & gt; Additional page 1.1 & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; One & gt; Page 1.2 & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; One & gt; Page 1.3 & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Page 2 & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; Period & gt; Page 3 & lt; / Span & gt; & Lt; Ul & gt; & Lt; Li & gt; & Lt; One & gt; Page 3.1 & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A & gt; Longer description of page 3.2 & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; One & gt; Page 3.3 & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; One & gt; Page 3.4 & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Li & gt; & Lt; / Ul & gt;   
 CSS:  
  * {margin: 0; Padding: 0; } #nav {float: right; } #nav ul {float: left; } # Nav li {float: left; Padding-top: 2px; List style: none; Background: # 3451ff; } # Nav li a, # nav li span {display: block; Text-decoration: None; Font size: 12pt; font-weight: bold; Padding: 13px 10px 9px 10px; } # Nav li a: link, # nav li a: active, # nav li a: visited, # nav li span {color: #fff; } # Nav li a: hover, # nav li an active, # nav li span: hover {color: # 000; } #nav li li {display: none; } # Nav li: Hover li {display: block; Float: None; Background: # 555; } # Nav li li (font size: 10pt; Margin: 1px; Width: 100%; Background: # 3c6f3a; Padding: 5px 0; }   
  
 How can I make this original static that this width does not change over the hover? I do not want to use JS.   
 
 
 Set the width for the parent:    #nav li { Float: left; Padding-top: 2px; List style: none; Width: 100px; / * Add this bad boy * / background: # 3451ff; }