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"> ➤ </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%;
}
}
