การวางตำแหน่งรายการเมนูแบบอินไลน์กับรายการอื่นๆ ทั้งหมด

ฉันกำลังทำงานกับปุ่มจองทันทีในการนำทางหลักที่นี่: http://www.rubitours.com/

โดยพื้นฐานแล้วรายการนำทางอื่นๆ ทั้งหมดจะมีไทล์ย่อย บางส่วนที่คุณเห็นและบางส่วนที่ไม่ทำลายพื้นที่ สิ่งนี้ทำให้พวกเขาทั้งหมดสามารถเข้าแถวได้ เนื่องจากมีพื้นหลังโปร่งใสจึงไม่สำคัญ

ฉันไม่ต้องการคำบรรยายบนปุ่มจองเลย และหากฉันเว้นที่ว่างไว้ ก็จะกลายเป็นพื้นที่สีเขียวที่เห็นได้ชัดเจนใต้คำว่าจองเลย เราต้องการให้ปุ่มดูเหมือนเป็นอยู่ในขณะนี้ แต่ต้องเรียงกันมากขึ้นกับรายการนำทางอื่นๆ (หน้าแรก เกี่ยวกับ ฯลฯ) โดยเว้นช่องว่างด้านล่างเป็นสีแดง

ฉันได้ลองสิ่งนี้โดยใช้ระยะขอบด้านบนเป็นลบ (ซึ่งไม่ได้ทำอะไรเลย) และระยะขอบด้านล่างซึ่งเพิ่งกดสีแดงลงด้านล่างแถบนำทางทั้งหมด

ใครสามารถช่วยฉันวางตำแหน่งรายการนี้ได้อย่างถูกต้อง?

HTML:

 <div id="menu_wrapper">
    <!--Other Header Content -->
    <div id="menu_border_wrapper" style="display: block;">
        <div class="menu-main-menu-container">
            <ul class="nav" id="main_menu">
                <li class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-14 current_page_item" id="menu-item-27"><a href="http://www.rubitours.com/"><span><strong>Home</strong><span>&nbsp;</span></span></a></li>
                <li class="menu-item menu-item-type-post_type menu-item-object-page" id="menu-item-812"><a href="http://www.rubitours.com/virginia-city-tour/"><span><strong>Virginia City</strong><span>Tours &amp; Desctiption</span></span></a></li>
                <li class="menu-item menu-item-type-post_type menu-item-object-page" id="menu-item-1002"><a href="http://www.rubitours.com/genoa-lake-tahoe-tour/"><span><strong>Genoa Tour</strong><span>via Lake Tahoe, NV</span></span></a></li>
                <li class="menu-item menu-item-type-post_type menu-item-object-page" id="menu-item-1110"><a href="http://www.rubitours.com/reno-nv-sights-lights-jeep-tour/"><span><strong>Sights &amp; Lights</strong><span>Reno City Tour</span></span></a></li>
                <li class="menu-item menu-item-type-post_type menu-item-object-page" id="menu-item-24"><a href="http://www.rubitours.com/about-us/"><span><strong>About Us</strong><span>&nbsp;</span></span></a></li>
       <!--Button in question is below -->
       <li class="book_btn menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-1047"><a href="http://www.rubitours.com/tours/"><span><strong>Book Now</strong></span></a></li>
                <li class="mobile-only menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-1050"><a href="http://www.rubitours.com/?s="><span><strong>Search</strong></span></a></li>
            </ul>
        </div>                      
    </div>
    </div>

CSS (ใช้งานไม่ได้)

#menu_wrapper div .nav li.book_btn {
    margin-top:-20px;
}