Rozwijane menu na stronie

pytanie zadane 13 lipca 2016 w HTML i CSS przez szymonq Użytkownik (770 p.)
edycja 13 lipca 2016 przez szymonq

Witam, proszę o pomoc z rozwijanym menu na stronie. Chodzi o to że po najechaniu kursorem na przycisk, rozwijana część się pokazuje ale rozpycha mi przycisk i przestawia całe menu.

Normalny wygląd:

Po najechaniu kursorem:

Kod HTML:

<div class="navbar">
                <ol class="menu">
                    <li><a href="index.html">Strona Główna</a></li>
                    <li><a href="#">Przycisk</a></li>
                    <li><a href="#">Przycisk</a></li>
                    <li><a href="#">Przycisk</a></li>
                    <li><a href="#">Przycisk</a></li>
                    <li><a href="#">Przycisk</a></li>
                    <li><a href="#">Więcej ></a>
                        <ul class="expand">
                            <li><a href="#">Pierwszy</a></li>
                            <li><a href="#">Drugi</a></li>
                            <li><a href="#">Trzeci</a></li>
                        </ul>
                    </li>
                </ol>
            </div>

.navbar
{
    width: 100%;
    height: 40px;
    padding: 10px 0;
    background-color: #299446;
    text-align: center;
    font-size: 22px;
    -webkit-box-shadow: 0px 1px 1px 0px rgba(153,255,153,0.7);
    -moz-box-shadow: 0px 1px 1px 0px rgba(153,255,153,0.7);
    box-shadow: 0px 1px 1px 0px rgba(153,255,153,0.7);
}

.sticky
{
	width: 100%;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 500;
}

ol.menu
{
    padding: 0;
    margin: 0;
    list-style-type: none;
    height: 2em;
    line-height: 2em;
    display: inline-block;
}

ol.menu a
{
    color: #fff;
	text-decoration: none;
	display: block;
}

ol.menu > li
{
    float: left;
    padding: 0 15px;
    height: 40px;
    border-radius: 5px 5px 5px 5px;
    -moz-border-radius: 5px 5px 5px 5px;
    -webkit-border-radius: 5px 5px 5px 5px;
    transition-duration: 300ms;
}

ol.menu > li:hover
{
    background-color: #efefef;
}

ol.menu li:hover a
{
    color: #c60;
}

ol.menu > li > ul.expand
{
    list-style-type: none;
	padding: 0;
	margin: 0;
    width: 120px;
	height: 40px;
	display: none;
    background-color: #fff;
}

ol.menu > li:hover > ul.expand
{
    display: block;
}

ol.menu > li:hover > ul.expand > li
{
    margin: 0;
    padding: 0;
	position: relative;
	z-index: 100;
    background-color: #299446;
    transition-duration: 300ms;
}

ol.menu > li > ul.expand a
{
    color: #fff;
	text-decoration: none;
	display: block;
}

ol.menu > li:hover > ul.expand > li:hover
{
    background-color: #efefef;
}

ol.menu > li:hover > ul.expand > li:hover a
{
    color: #c60;
}

Od dłuższego czasu nie mogę rozwiązać tego problemu. Dla przycisków nie mam szerokości ustawionej na sztywno, jest to szerokość napisu + 15px paddingu po bokach. Czy to może być przyczyną? Jak sprawić żeby rozwijana lista była szersza od przycisku ale go nie rozepchała? Magia CSSa na pewno ma na to lekarstwo, lecz dopiero zaczynam przygodę z tym językiem, więc proszę drodzy forumowicze o pomoc