Problem z menu rozwijanym

pytanie zadane 16 października 2019 w HTML i CSS przez BleBlock Użytkownik (600 p.)
zamknięte 17 października 2019 przez BleBlock

Witam

Próbuje zrobić menu rozwijane,

Podczas najeżdżania kursorem na element "Kolory" elementy listy <li> zamiast ukazywać się na dole ukazują się na górze. Chcę aby to menu działało jak każde inne. Poniżej wstawiam zdjęcie + kod który przybliży sytuację.

<!DOCTYPE HTML>
<html lang="pl">
<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	
	<title></title>
	
	<meta name="description" content="Opis w Google" />
	<meta name="keywords" content="słowa, kluczowe, wypisane, po, porzecinku" />
    
    <link rel="stylesheet" type="text/css" href="style.css">
    <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
    
	
</head>
<body>
              
        <nav>
	      
            <ol class="menu">
                <li><a href="#">Kolory</a>
                    <ul>
                        <li><a href="#">Czerwony</a></li>
                        <li><a href="#">Zielony</a></li>
                        <li><a href="#">Niebieski</a></li>
                        <li><a href="#">Żółty</a></li>
                    </ul>
                </li>
                <li><a href="#">Informacje 1</a>
                    <ul>
                        <li><a href="#">Czerwony</a></li>
                        <li><a href="#">Zielony</a></li>
                        <li><a href="#">Niebieski</a></li>
                        <li><a href="#">Żółty</a></li>
                    </ul>      
                </li>
                <li><a href="#">Informacje 2</a></li>
                <li><a href="#">Informacje 3</a></li>
            </ol>
			
			
		</nav>
               
	
</body>
</html>

body
{
    margin: 0;
    font-family: 'Roboto', sans-serif;
}

main
{
    margin-left: auto;
    margin-right: auto;
}



nav
{
    text-align: center;
    background-color: #444;
}

.menu
{
	list-style-type: none;
	margin: 0;
	padding-top: 15px;
	padding-bottom: 15px;
	padding-left: 0px;
	padding-right: 0px;
    font-size: 21px;
}



.menu > li
{   
    display: inline-block;
    width: 200px;
}


.menu a
{
	color: white;
	text-decoration: none;
	padding: 5px;
    display: block;
}

.menu a:hover
{
	color: #444;
	transition: 0.4s;
	background-color: white;
	padding: 5px;
	
}

.menu > li > ul
{
	list-style-type: none;
	padding: 0;
	margin: 0;
	height: 55px;
	display: none;
}

.menu > li > ul > li
{
	line-height: 150%;
}

.menu > li > ul > li:hover
{
	background-color: #444;
}
.menu > li > ul > li:hover > a
{
	color: black;
}

.menu > li:hover > ul
{
	display: block;
}

komentarz zamknięcia: Odpowiedż

1 odpowiedź

odpowiedź 17 października 2019 przez Job102 Bywalec (2,050 p.)

Cześć,

zmieniłem w style.css:

.menu > li
{   
    display: inline-block;
    width: 200px;
}

.menu li
{
	display:inline-block;
	width:200px;
	vertical-align:top;
}

oraz

.menu > li > ul
{
    list-style-type: none;
    padding: 0;
    margin: 0;
    height: 55px;
    display: none;
}

.menu > li > ul
{
    list-style-type: none;
    padding: 0;
    margin: 0;
    /* height: 55px; */
    display: none;
}

Mam nadzieję, że o to Ci chodziło.

Pozdrawiam.

komentarz 17 października 2019 przez BleBlock Użytkownik (600 p.)

Dzięki wielkie działa :)

Podobne pytania

–2 głosów

0 odpowiedzi 187 wizyt

Problem z rozwijanym menu

pytanie zadane 13 sierpnia 2018 w HTML i CSS przez Szymon hciećwiedzieć Początkujący (330 p.)

0 głosów

1 odpowiedź 191 wizyt

Problem z rozwijanym menu

pytanie zadane 30 sierpnia 2017 w HTML i CSS przez mateusz.zajac Obywatel (1,460 p.)

0 głosów

1 odpowiedź 286 wizyt

Problem z rozwijanym menu POMOCY

pytanie zadane 23 czerwca 2017 w HTML i CSS przez atiro01 Bywalec (2,390 p.)

Zaloguj lub zarejestruj się, aby skomentować.

1 odpowiedź

Zaloguj lub zarejestruj się, aby skomentować.

Podobne pytania

O działaniu forum

Pasja informatyki w internecie

Polecane miejsca w sieci