Próbuję ustawić pozycje w menu, ale nie działa zgodnie z oczekiwaniami. Na przykład chcę, by pozycje rozwijane były wyśrodkowane pod głównymi pozycjami, patrz rysunek poniżej
Oto odpowiedni kod
<nav>
<ul id="navlist">
<li id="active"><a href="index.html">Home</a></li>
<li><a href="calendar.html">Calendar</a></li>
<li><a href="#">Recipes</a>
<ul>
<li><a href="meatballs.html">Meatballs</a></li>
<li><a href="pancakes.html">Pancakes</a></li>
</ul>
</li>
<li><a href="#">Contact</a>
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Contact us</a></li>
</ul>
</li>
</ul>
</nav>
i tutaj jest css, trochę nieprzyjemne z eksperymentowania raczej ...
nav ul {
position:relative;
padding-left: 0;
margin:1px 0 30px 0;
background-color: #1d1d1d;
float: left;
width: 100%;
font-size:24px;
}
nav ul li {
position:relative;
display: inline;
}
nav ul li a {
position:relative;
padding: 20px 20px;
background-color: #1d1d1d;
color: #fff;
text-decoration: none;
float: left;
}
nav ul li a:hover {
background-color: #619f15;
color: #fff;
}
nav ul #active a {
background-color: #619f15;
color: #fff;
}
nav ul li ul {
position: absolute;
top:66px;
width: 50%;
font-size:12px;
display:none;
}
Odpowiedzi:
1 dla odpowiedzi № 1Aby Twoje pozycje rozwijane zachowywały się właściwie, musisz ustawić je absolutnie, tak jak Ty, ale dużo łatwiej jest ustawić je od góry:
top: 100%;
left: 0;
W ten sposób elementy rozwijane nie będą już dbać o wysokość twojego menu i dostosowywać ich pozycjonowania zgodnie z głównym menu.
Jeśli chodzi o "przełączanie", możesz użyć:
nav ul li:hover > ul {
display: block;
}
Wewnątrz waszej nawigacji, jak się unosi li weź następny ul i uczynić go widocznym.
Pełny przykład bez dodatkowej stylizacji:
nav ul {
position: relative;
}
nav ul li ul {
display: none;
position: absolute;
top:100%;
left: 0;
}
nav ul li:hover > ul {
display: block;
}