Źle ustawione wysuwane MENU - jak wyśrodkować?

Question

Cześć, mam pytanie, jak wyśrodkować wysuwane menu, na zdjęciu po najechaniu na MENU całość jest po prawej, chciałbym aby była wyśrodkowana względem przycisku MENU, dodaje zdjęcie sytuacji i kod css, może ktoś ma jakiś pomysł.

body {
    background-color: #111;
    color: #ffffff;
    margin: 0 !important;
    flex-wrap: wrap;
}
.wrapper {
    width: 100%;
    flex-wrap: wrap;
}
.nav {
    width: 100%;
    padding: 10px 0;
    background-color: #282828;
    text-align: center;
    border-top: 1px solid #282828;
    border-bottom: 1px solid #282828;
    flex-wrap: wrap;
}
.footer {
    text-align: center;
    background-color: #282828;
    padding: 10px;
    font-size: 20px;
    bottom: 0;
    width: 98.5%;
    height: 20px;
}
ol {
    padding: 0;
    margin: 0;
    list-style-type: none;
    font-size: 18px;
    height: 35px;
    line-height: 200%;
    display: inline-block;
    flex-wrap: wrap;
}
ol a {
    color: #bdc1c6;
    text-decoration: none;
    display: block;
    flex-wrap: wrap;
}
ol > li {
    float: left;
    width: 150px;
    height: 40px;
    border-right: 1px double #707070;
    flex-wrap: wrap;
}
ol > li:first-child {
    border-left: 1px double #707070;
    flex-wrap: wrap;
}
ol > li:hover {
    background-color: #404040;
    flex-wrap: wrap;
}
ol > li:hover > a {
    color: #fff;
    flex-wrap: wrap;
}
ol > li > ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    height: 40px;
    width: 400px;
    display: none;
    flex-wrap: wrap;
}
ol > li:hover > ul {
    display: block;
    flex-wrap: wrap;
}
ol > li > ul > li {
    background-color: #242424;
    position: relative;
    z-index: 100;
    border-top: 1px double #707070;
    flex-wrap: wrap;
}
ol > li > ul > li:hover {
    background-color: #404040;
    flex-wrap: wrap;
}
ol > li > ul > li:hover > a {
    color: #fff;
    flex-wrap: wrap;
}
body::before {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: repeat-x;
    border-color: none;
    display: none;
}
h1 {
    color: #707070;
    font-weight: 400;
    font-size: 42px;
}
hr {
    border-top: 1px solid #aaa;
}
code {
    padding: 2px 5px;
    background: #fff;
    border: solid 1px #e1e4e5;
    color: #333;
}

 

Answer 1

Cześć,

W ol nadajemy position: relative, a następnie w ol > li ul position absoule i left: -120px. Masz w codepenie do sprawdzenia.

https://codepen.io/NoOgar/pen/YzGYxRL

Comments

Królu złoty dziękuje!!! to mi pomoże ale po wklepaniu kodu do finalnej strony całość jest po lewo za bardzo ale tu już sobie poradzę

Answer 2

Dorzuć html będzie prościej !??

Comments

<div class="nav">
			<ol>
	
				<li><a href="#"> <b><font size="6">MENU</font></b></a>
					<ul>
						<li><a href="./"></a></li>
						<li><a href="./"></a></li>
						<li><a href="./"></a></li>
						<li><a href="./"></a></li>
						<li><a href="./"></a></li>
						<li><a href="./"></a></li>
						<li><a href="./"></a></li>
						<li><a href="./"></a></li>
						<li><a href="./"></a></li>
						<li><a href="./"></a></li>
						<li><a href="./"></a></li>
						<li><a href="./"></a></li>
					</ul>
				</li>
				
			</ol>
		
		</div>

Proszę, ale nie wiem czy tu coś Ci pomoże :v

---

ol > li > ul {

    list-style-type: none;

    padding: 0;

    margin: 0;

    height: 40px;

    width: 400px;

    display: none;

    flex-wrap: wrap;

}

Ustaw w tym selektorze width: 150px; zamiast 400px które masz..

---

Tak wiem że to rozwiąże problem w pewnym sensie, ale właśnie chce by szerokość zawartości była 400px, a szerokość samego przycisku 150px, czyli tak jak jest. Chce po prostu wyśrodkować cały wysuwany element względem przycisku MENU bez zmieniania jego szerokości, jest taka opcja?

---

Próbowałem wielu opcji w firefox devtools... I niestety działa tylko width 150px .

---

Cóż, może ktoś inny znajdzie rozwiązanie, zatem dzięki :)

---

Dokładnie Nie ma za co .

Answer 3

Mam !!!

ol > li:hover > ul {
    display: block;
    flex-wrap: wrap;
}

Zmień na ..:

ol > li:hover > ul {
    display: inline;
    flex-wrap: wrap;
}

zamień display:block na diplay: inline; w tym selektorze!!! Sprawdzałem w Codepen i działa!

Pozdrawiam

Comments

Działa ale zmienia się szerokość z 400px na 150px czyli podporządkowuje się do szerokości samego przycisku a tego nie chciałem. Chce po prostu wyśrodkować cały wysuwany element względem przycisku MENU bez zmieniania jego szerokości, masz może inne pomysł?