Dobry wieczór,
Jak naprawić ładnie to menu by po rozwinięciu wyglądało tak jak powinno, czyli jedno pod drugim estetycznie, oraz jak zrobić by hover po najechaniu np na start jako blok zmienił kolor na lekko ciemniejszy, by właśnie był takim bloczkiem z tekstem po środku i małymi odstępami z prawej i lewej?
html;
<!DOCTYPE HTML>
<html lang="pl">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta name="author" content="PROFF"/>
<title>Pasja Informatyki</title>
<meta name="description" content="Pasja informatyki, nauka, programowanie, html"/>
<meta name="keywords" content= "www,html,pasja,informatyki"/>
<link rel="stylesheet" href="main.css">
<link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
</head>
<body>
<div id="container">
<div id="logo"><a class="logo1" href="index.html">PROFF</a></div>
<nav>
<div id="menu">
<ol>
<li><a href="index.html">Start</a><li>
<li><a href="kimjestem.html">Kim jestem?</a> <ul>
<li><a href="#">link - 1</a></li>
<li><a href="#">link - 2</a></li>
<li><a href="#">link - 3</a></li>
<li><a href="#">link - 4</a></li>
<li><a href="#">link - 5</a></li>
</ul>
</li>
<li><a href="programowanie.html">Programowanie</a><li>
<li><a href="mojsprzet.html">Mój sprzęt</a><li>
<li><a href="kontakt.html">Kontakt</a><li>
</ol>
</div>
</nav>
<main>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce placerat vehicula dolor, quis tempor purus egestas eget. Vivamus luctus felis sit amet tortor condimentum sollicitudin. Nulla facilisi. Ut dictum ornare justo, laoreet laoreet massa aliquam in. Proin efficitur felis quis sapien sagittis posuere non nec sapien. Donec at convallis urna. Curabitur faucibus turpis sit amet arcu volutpat, a pellentesque velit tempus. Ut porttitor tristique pulvinar. Donec a luctus ante. Nulla tristique lorem vestibulum lectus mattis, sit amet auctor erat suscipit. Vivamus condimentum felis et massa rhoncus tincidunt. Aliquam a velit et velit vehicula pellentesque eget a lacus. Fusce eu faucibus risus, a congue risus. Maecenas rhoncus libero sit amet nunc finibus, sit amet egestas elit vulputate. Suspendisse auctor viverra felis, id bibendum augue accumsan suscipit.</p>
<p>Maecenas nec est interdum, imperdiet turpis at, convallis quam. Aenean pellentesque laoreet urna, vel lobortis felis aliquet viverra. Nulla facilisi. Suspendisse volutpat congue nisl ut fringilla. Proin suscipit justo orci, vel varius nibh dignissim ut. Integer non magna lacus. Sed ac purus vitae libero congue efficitur. In non mauris id mi semper convallis. Ut feugiat pulvinar est id varius. Ut eu libero malesuada, vestibulum sem sit amet, efficitur lacus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
<p>Morbi a consectetur turpis. Donec finibus bibendum diam, eget ullamcorper augue porttitor eu. Donec luctus arcu vel nisi tempor sollicitudin. In hac habitasse platea dictumst. Mauris leo erat, elementum eu hendrerit vitae, pharetra vel eros. Phasellus accumsan felis enim. Nam vehicula ex vitae sem facilisis vestibulum. Praesent ac lorem a nibh commodo mollis.</p>
<p>Aliquam at neque in enim euismod auctor nec vel nunc. Suspendisse sed efficitur libero. Vivamus volutpat vulputate turpis pharetra venenatis. Pellentesque et porta massa, sit amet dignissim ante. Maecenas laoreet lorem a mi eleifend, in lacinia ante rutrum. Nam id convallis arcu. Sed a cursus diam. Maecenas convallis metus a ligula vehicula, eu sodales nulla bibendum. Aenean egestas consectetur nibh quis facilisis. Aliquam venenatis risus eu libero maximus, vel gravida tellus vulputate.</p>
<p>Fusce vehicula fermentum nisl in mollis. Nulla sed ex in libero consequat imperdiet. Praesent leo mi, egestas eget lobortis in, elementum in massa. Mauris tincidunt tempus leo, ut imperdiet nibh efficitur in. Pellentesque sed orci sit amet velit porta elementum eu ut ipsum. Integer id eleifend ex. Suspendisse ac lorem posuere, placerat elit sed, auctor felis. Vivamus elementum odio dolor, sit amet finibus mauris tristique a. Morbi pharetra odio sit amet dapibus pellentesque. Proin luctus arcu vitae faucibus consequat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque at odio a nisl vestibulum egestas at vel nisi. Curabitur hendrerit at mauris quis maximus. Maecenas condimentum augue ipsum, eu bibendum erat pharetra quis.</p>
</div>
</main>
</div>
<footer>
<div class="info">
Wszelkie prawa zastrzeżone © 2018 dziękuję za wizytę!
</div>
</footer>
</body>
</html>
css
body
{
background-color: #1F1F1F;
font-family: 'Quicksand', sans-serif;
}
#container
{
width: 1200px;
margin-left: auto;
margin-right: auto;
}
#logo
{
color: white;
margin-top: 70px;
font-size: 50px;
letter-spacing: 3px;
font-weight: 900;
height: 75px;
background-color: green;
text-align: center;
}
#menu
{
padding: auto;
text-transform: uppercase;
background-color: #303030;
color: #ffffff;
margin: auto;
width: auto;
text-align: center;
line-height:200%;
height: 40px;
}
.content
{
background-color: #336600;
color: white;
margin-top: 120px;
padding: 80px;
}
a:link
{
text-decoration:none;
color: white;
}
a:visited
{
text-decoration:none;
color: white;
}
a:hover
{
text-decoration:none;
color: white;
}
a.logo1:link {text-decoration:none;}
a.logo1:visited {text-decoration:none;}
a.logo1:visited {text-decoration:none;}
a.logo1:hover {text-decoration:none;}
.info
{
background-color: #303030;
height: 25px;
color: grey;
text-align: center;
width: 90%;
margin: 25px auto auto auto;
}
ol > li {
display: inline-block;
padding-left:25px;
background-color: blue;
}
ol > li:hover
{
color: #FFFFFF
}
ol > li:hover > a
{
color: #8D8D8D;
}
ol > li > ul {
display:none;
}
ol > li:hover > ul {
display:block;
}
ul > li {
list-style-type: none;
background-color: orange;
margin: 0;
transition: 200ms; /* wydłużamy wykonywanie stylów */
}
/////edited css
