Witam, jak można zmienić szerokość <li> a konkretnie jesli rodzic ma np 150px zeby dziecko miało więcej szerokości i tekst w nim nie zjezdzał do linii poniżej tylko był w 1 linii.
Aktualnie jak zmieniam szerokość dziecka ol > li > ul >li na 300 to owszem zwieksza się ale całe rozwijane ol > li > ul się przesuwa w prawo. Ja chce zeby było dokładnie pod spodem, na srodku i miało wiekszą szerokość od rodzica.
To kod HTML i CSS
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="wlasny.css" type="text/css";>
<link href="https://fonts.googleapis.com/css?family=Dancing+Script:400,700&subset=latin-ext" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,500&subset=latin-ext" rel="stylesheet">
</head>
<body>
<div id="container">
<div id="logo">Sklep</div>
<div id="nav">
<ol>
<li><a href="#">O nas</a></li>
<li><a href="#">Promocje</a></li>
<li><a href="#">Odzież</a>
<ul>
<li><a href="#">Bluzy</a></li>
<li><a href="#">Bluzki</a></li>
<li><a href="#">Koszule</a></li>
<li><a href="#">Kurtki</a></li>
<li><a href="#">Okrycia wierzchnie</a></li>
<li><a href="#">Swetry</a></li>
<li><a href="#">Spodnie</a></li>
<li><a href="#">Spódnice i spódniczki</a></li>
<li><a href="#">Tuniki</a></li>
<li><a href="#">Inne</a></li>
</ul>
</li>
<li><a href="#">Obuwie</a></li>
<li><a href="#">Dodatki</a></li>
<div style="clear: both;"></div>
</ol>
</div>
</div>
</body>
</html>
body
{
/* Wzór tła z Toptal Subtelne wzory */
background-image: url("images/crossline-lines.png");
font-size: 20px;
margin: 0;
}
#container
{
width: 1000px;
height: 1400px;
margin-left: auto;
margin-right: auto;
background-color: white;
opacity: 0.7;
}
#logo
{
font-size: 60px;
width: 1000px;
height: 50px;
text-align: center;
color: black;
padding-top: 20px;
padding-bottom: 40px;
font-family: 'Dancing Script', cursive;
}
#nav
{
width: 100%;
padding: 10px 0;
margin: 20px 0;
text-align: center;
background-color: #dedede;
}
ol
{
font-family: 'Montserrat', sans-serif;
list-style-type: none;
height: 35px;
margin: 0;
padding: 0;
line-height: 200%;
font-size: 18px;
display: inline-block;
}
ol a
{
color: black;
text-decoration: none;
display: block;
}
ol > li
{
float: left;
width: 150px;
height: 40px;
}
ol > li:hover > a
{
font-weight: 900;
}
ol > li > ul
{
list-style-type: none;
padding: 0;
margin: 0;
height: 40px;
text-align: center;
display: none;
}
ol > li:hover > ul
{
display: block;
}
ol > li > ul > li
{
position: relative;
z-index: 100;
}
ol > li > ul > li:hover > a
{
font-weight: 900;
}