Prośba o kod menu ?

pytanie zadane 3 września 2019 w HTML i CSS przez P0Y3B Nowicjusz (220 p.)

Jak uzyskać efekt:

[Menu1] [Menu2] [Menu3] [Menu4]

[Lista1][lista1][lista1][lista1][lista1]

[Lista2][lista2][lista2][lista2][lista2]

Po najechaniu na [Menu1] ukaże się lista1 lista1 ...

Gdy najedziemy na Menu 2 / 3 /4 ... zniknie poprzednia a wyskoczy adekwatna do numeru [ID]

Oraz gdy żadna opcja nie jest wybrana to aby Menu1 wraz z lista 1 był wyświetlany

1	komentarz 3 września 2019 przez Tomek Sochacki Ekspert (227,510 p.) a probowałeś chociaż w ogóle zacząć szukać w necie... choćby na hasło menu html/css :) ?

2 odpowiedzi

odpowiedź 4 września 2019 przez lkobylski Nowicjusz (200 p.)

odpowiedź 11 września 2019 przez P0Y3B Nowicjusz (220 p.)

<html>
<head>

<style>
body {
	font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 13px;
    line-height: 18px;
    height: 100%;
    margin: 0;
    background-color: #121212;
    color: #bfbfbf;
}

#container {
	width: 1220px;
    margin: 0 auto;
    text-align: center;
    margin-top: 100px;
}

#main {
	margin: 0;
	padding: 0;
}

#main li {
    display: inline-block;
}

#main li a {
    background: rgba(255, 255, 255, 0.04);
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    padding: 9px 25px;
    border-radius: 2px 2px 0px 0px;
    font-weight: bold;
    display: block;
    position: relative;
    text-align: center;
    text-decoration: none;
}

#main li a:hover {
    background: #000000;
    color: #ffffff;
}

#main-1,
#main-2,
#main-3 {
    background: #000;
	margin: 0;
	padding: 0;
}

#main-1 li,
#main-2 li,
#main-3 li {
	display: inline-block;
}

#main-1 li a,
#main-2 li a,
#main-3 li a{
    display: block;
    position: relative;
    text-align: center;
    text-decoration: none;
    font-size: 13px;
    padding: 12px 18px 8px;
    color: rgba(53,60,65,0.6);
}


#open-main-1:hover #main-1 {
	display: block;
}

#open-main-2:hover #main-2 {
	display: block;
	}
	
#main-1,
#main-2,
#main-3 {
	display: none;
}
	
#open-main-1:hover #main-1 {display: block;}
#open-main-2:hover #main-2 {display: block;}
#open-main-3:hover #main-3 {display: block;}
</style>

</head>
<body>


<div id="container">

<ul id="main">
	<li><a href="#" id="open-main-1">Odnośnik</a></li>
	<li><a href="#" id="open-main-2">Odnośnik</a></li>
	<li><a href="#" id="open-main-3">Odnośnik</a></li>
</ul>

<ul id="main-1">
	<li><a href="#">Odnośnik ID 1</a></li>
	<li><a href="#">Odnośnik ID 1</a></li>
	<li><a href="#">Odnośnik ID 1</a></li>
	<li><a href="#">Odnośnik ID 1</a></li>
</ul>

<ul id="main-2">
	<li><a href="#">Odnośnik ID 2</a></li>
	<li><a href="#">Odnośnik ID 2</a></li>
	<li><a href="#">Odnośnik ID 2</a></li>
	<li><a href="#">Odnośnik ID 2</a></li>
</ul>

<ul id="main-3">
	<li><a href="#">Odnośnik ID 3</a></li>
	<li><a href="#">Odnośnik ID 3</a></li>
	<li><a href="#">Odnośnik ID 3</a></li>
	<li><a href="#">Odnośnik ID 3</a></li>
</ul>





</body>
</html>