Rozwijane menu po najechaniu na obrazek

Question

Chciałbym napisać coś takiego, że po najechaniu na obrazek pojawi się pod nim menu. Napisałem to sposobem w jaki pisze się rozjane menu, ale po najechaniu zwiększa się też obszar <ol> wokół obrazka przez co rozjeżdża się trochę stronka i chciałem aby to się pokazało po najechaniu na obrazek bez obszaru wokół niego... Mój kod :
 

        <div className={styles.LoggedNavBar}>
            <ul>
                <li><NavLink to="/panel">Panel</NavLink></li>
                <li><NavLink to="/">Obiekty</NavLink></li>
                <li><NavLink to="/events">Wydarzenia</NavLink></li>
            </ul>
            <ol><img src={photo} className={styles.LoggedNavBarCircularPhoto} />
                <li><input style={{float: 'right'}} type="submit" value="Wyloguj" onClick={this.props.signOut} /></li>
                <li>Ha</li>
                <li>ah</li>
            </ol>
        </div>

i CSS :
 

.LoggedNavBar ol {
    margin: 0px;
    padding: 0px;
    list-style-type: none;
    text-align: center;
    height: 60px;
    line-height: 60px;
    float: right;
}

.LoggedNavBar ol > li{
    margin: 0px;
    padding: 0px;
    background-color: red;
    display: none;
    width: 100px;
}

.LoggedNavBar ol:hover > li {
    display: block;
}