Rozwijane menu przy hoverze

pytanie zadane 30 listopada 2019 w HTML i CSS przez Teslum_369 Gaduła (4,190 p.)

Witam,

Chciałbym zrobić, aby po spełnieniu reguły media, menu przy hoverze rozwijało się nie w bok (jak to jest pierwotnie) lecz w dół.

Wizualizacja mojej idei: https://imgur.com/a/LLjRCtJ

index.html:

<html>
	<head>
        <meta charset = "utf-8" /> 
        <meta name="viewport" content="with-device-width, initial-scale=1.0">
		<link rel="stylesheet" type = "text/css" href="przepisy.css">
        

	</head>
	 <body>

	 	<div id="menuleft">
		<ul>
			<li><a href="">Przepisy <div id="arrow">  &#x27A4; </div></a>
				<ul>
					<li><a href="index.html">Przepis1</a></li>
					<li><a href="przepis2.html">Przepis2</a></li>
					<li><a href="przepis3.html">Przepis3</a></li>
				</ul>
			</li>
			<li><a href="form.html">Napisz do nas</a></li>
			<li><a href="artykuly.html">Artykuły</a></li>
			<li><a href="sklep.html">Sklep internetowy</a></li>
		</ul>
	</div>



	 	<div id = "content">
	 	</div>
	 </body>
</html>

przepisy.css:

body
{
    position: absolute;
	margin: 0;
    padding: 0;
    overflow: scroll;
}

#arrow
{
	float: right;
}



#menuleft
{
	background-color: white;
	height: 300px;
	width: 200px;
	float: left;
}

#menuleft ul
{
    position:relative;
	display:block;
	width:100%;
    height:auto;
    margin:0px;
    padding:0px;
    list-style:none;
}

#menuleft ul li
{
   
	position:relative;
	display:block; 
	height:auto; 

}
#menuleft ul li a
{
    position:relative;
    display:block;
    width:100%;
    height:auto;
    box-sizing:border-box;
    font-size:13px;
    text-transform:uppercase;
    font-weight:bold;
    color:#FBF7F7;
    line-height:1.2em;
    padding:10px 15px;
    border-top:1px solid #236A92;
    text-decoration:none;
    background-color: orange;

}

#menuleft ul  li:first-child a
{
	border:0px;
}

#menuleft ul li a:hover, #menuleft ul li:hover a
{
    background-color: orange;
}

#menuleft ul li ul
{

    position:absolute;
    top:0px;
    left:100%;
    display:none;
    width:auto;
}
           
#menuleft ul li:hover ul
{
    display: block;

}

#menuleft ul li ul li a
{
    white-space:nowrap;
    text-transform:none;
    padding:5px 20px;
}

#menuleft ul li ul li a:hover
{
    background:#75C1D4;
    color:#0A3CC1;
} 



 @media only screen and (max-width: 576px) 
            {
   
      
                #menuleft ul li:hover ul
                {
                    display: block;
                    float: left;
                    top:100%;

                }
                
            }

1 odpowiedź

odpowiedź 30 listopada 2019 przez lateM Pasjonat (17,660 p.)
wybrane 30 listopada 2019 przez Teslum_369

Najlepsza

"#menuleft ul li ul li a" orientujesz się w tym jakimś cudem?

Nie styluj po "id", zwiększasz tym sposobem niepotrzebnie "specyficzność" tego selektora
Nadawaj elementom klasy. Znacznie łatwiej ostylować listę o klasie "list" i jej elementy "list__el / list__item" oraz jej linki "list__link" niż #menuleft ul li ul li a
margin: 0; a później margin:0px; - to stawiasz spacje, czy nie stawiasz?
Staraj się nie wchodzić na wyższy poziom zagnieżdżenia, niż "ul li a"

A co do pytania, to możesz na przykład nadać temu elementowi w stanie "hover" position: static; - jeśli menu ma być pionowe i absolute (tak jak masz teraz) - jeśli chcesz, aby było z boku.