:CSS:HTML Problem z NAV i <ol>

Question

Siema problem z tym, że jak najade na opcje to ja rozszez. Nie wiem jak temu zapobiec. Jak ustawie stały rozmiar dla kazdego kafelka to jest ok, ale chodzi mi o to aby był padding, po lewej i prawej w opcjach. Proszę o pomoc

 

<nav>
			
			<ol>
				
				<li><a href="#">Przykład</a>
					
					<ul>
					
						<li><a href="#">Przykład</a></li>
						<li><a href="#">Przykład</a></li>
						
					</ul>
				</li>
				
				<li><a href="#">Przykład</a>
					
					<ul>
						
						<li><a href="#">Przykład</a></li>
						<li><a href="#">Przykład</a></li>
						<li><a href="#">Przykład</a></li>
						<li><a href="#">Przykład</a></li>
						
					</ul>
					
				</li>
				
				<li><a href="#">Przykład</a>
					
					<ul>
						
						<li><a href="#">Przykład</a></li>
						<li><a href="#">Przykład</a></li>
						<li><a href="#">Przykład</a></li>
						
					</ul>
					
				</li>
				
				<li><a href="#">Przykład</a>
					
					<ul>
						
						<li><a href="#">Przykład</a></li>
						<li><a href="#">Przykład</a></li>
						<li><a href="#">Przykład</a></li>
						<li><a href="#">Przykład</a></li>
						
					</ul>
					
				</li>
				
				<li><a href="#">Przykład</a></li>
				
				<li><a href="#">Przykład</a></li>
				
					
					<li><a href="#">Przykład</a>
					
					<ul>
						
						<li><a href="#">Przykład</a></li>
						<li><a href="#">Przykład</a></li>
						<li><a href="#">Przykład</a></li>
						<li><a href="#">Przykład</a></li>
						
					</ul>	
				
				</li>
				
			</ol>

	</nav>

/* css */
nav
{ 
    width: 100%;
    z-index: 1000;
    padding: 10px 0;
    text-align: center;
    background-color: #fdd031;
    box-shadow: 0 1px 5px #333;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}

ol
{
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 17px;
    height: 35px;
    font-weight: 700;
    line-height: 200%;
    display: inline-block;
}

ol a
{
    color: #000;
    text-decoration: none;
    display: block;
}

ol > li
{
    float: left;
    padding: 0 30px;
    margin: 0;
    border-right: 1px solid #FFDF00;
}

ol > li:first-child
{
    border-left: 1px solid #FFDF00;
}

ol > li > ul
{
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: none;
    font-size: 15px;
    text-align: justify;
    padding: 0 30px;
}

ol > li > ul > li
{
    background-color: #fdd031;
    padding: 0 8px;
    z-index: 1000;
    border-top: 1px dashed #FFDF00;
}

ol > li:hover > a
{
    color: #FFF;
    transition: 400ms;
}

ol > li:hover > ul
{
    display: block;
}

ol > li > ul > li:hover > a
{
    color: #FFF;
    transition: 400ms;
}

Answer 1

Selektor ol > li > ul ustawia display: none, natomiast ol > li:hover > ul ustawia display: block. To sprawia, że przy najechaniu na którąś z "opcji" nagle pokazuje się zagnieżdżone menu. To może wywoływać efekt rozszerzania, ale nie zauważyłem żeby coś zmieniało szerokość. Czy możesz sprecyzować co konkretnie wg Ciebie się rozszerza?