выпадающие подменю горизонтальные проблемы

Question

У меня проблемы с выпадающим меню. Я не хочу, чтобы меню было вертикальным, но горизонтальным подменю. он просто не работает в том, что ссылка «about» и «contact me» нажимается на крайнюю правую сторону, когда я не курю над ней, и когда я наводил на нее курсор, появляется вертикальное падение

HTML

<div id="wrap_link"> 
    <div id="toplink"> 
     <ul> 
      <li><a href="index.php">Home</a> 
      </li> 
      <li><a href="#">Services</a> 

       <ul> 
        <li><a href="tutorials.php">tutorials</a> 
        </li> 
        <li><a href="exams.php">Exams</a> 
        </li> 
        <li><a href="mocks.php">Mocks</a> 
        </li> 
       </ul> 
      </li> 
      <li><a href="about.php">About</a> 
      </li> 
      <li><a href="contact.php">Contact</a> 
      </li> 
     </ul> 
    </div> 
    <!--topLinks --> 
</div> 

CSS

#toplink { 
    margin-left: 10px; 
    float: left; 
    width: 100%; 
} 
#toplink ul { 
    /*left: 10%;*/ 
    position:relative; 
    margin: 0; 
    padding: 0; 
    list-style:none; 
} 
#toplink ul li { 
    position: relative; 
    float:left; 
} 
#toplink li ul { 
    /* display:none;*/ 
    display:inline; 
} 
/* decoration for menu and submenu*/ 
#toplink ul li a { 
    width: 235px; 
    line-height:30px; 
    display: block; 
    text-decoration:none; 
    color: #000; 
    padding: 5px; 
    background: #fff; 
    margin-left:1px; 
    white-space: nowrap; 
} 
#toplink ul li a:hover { 
    background:#aaa; 
    color:#fff; 
} 
#toplink li:hover ul { 
    display: block; 
    position: absolute; 
} 
#toplink li:hover li { 
    float: none; 
    font-size:11px; 
} 
#toplink li:hover a { 
    background:#aaa; 
    color:#fff; 
} 
#toplink li:hover li a:hover { 
    background:#777; 
    color:#fff; 
} 
#wrapper { 
    margin-top:10px; 
    background:#333; 
    width: 1000px; 
    margin-left:auto; 
    margin-right:auto; 
    padding-top:5px; 
    height: 750px; 
    text-align:center; 
} 
body { 
    background:#000; 
    color:#FFF; 
    font: 14px Arial, Helvetica, sans-serif; 
} 

Working example

Answer 1

Я бы не использовал float, вместо этого я бы использовал display:inline-block.

Изменение:

#toplink ul li { 
position: relative; 
float:left; 
} 

To:

#toplink>ul>li{ 
    position: relative; 
    display:inline-block; 
    vertical-align:top; 
} 

См: http://jsfiddle.net/4TW4S/1/

Более подробная информация о встроенных блоках против поплавков: http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/

Update

Для Eveything быть горизонтальным использовать следующие вместо:

#toplink ul>li{ 
/* position: relative;*/ 
    display:inline-block; 
    vertical-align:top; 
} 

http://jsfiddle.net/4TW4S/3/