Udało się!
Zamiast dodawać padding do komórek listy głównej, wrzuciłem margin'y do do atrybutów linków. I jest pięknie!
Natomiast nadal nie mam pomysłu na zakładkę BLOG. Jak wymusić by komórka menu głównego z góry pobrała szerokość podmenu i do takiej się dostosowała. Chodzi mi o to, żeby po najechaniu na pole BLOG menu "nie jeździło"
Wrzucam poprawiony kod i liczę na waszą pomoc
<!DOCTYPE HTML>
<html lang="pl">
<head>
<meta charset="utf-8" />
<title> Simple Solution - We do it for You!</title>
<meta name="description" content="We specialize in creating simple WWW website, virtual tours, movie tours and floorplans" />
<meta name="keywords" content="www, virtual tours, virtual walks, movie tours, flooplans, websites, easy website, simple website, video editing, weston-super-mare, bristol, somerset" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chorme=1" />
<link rel="stylesheet" href="css/style.css" type="text/css" />
</head>
<body>
<header>
<nav>
<div id="top">
<div id="left">
<img src="images/logo.png">
</div>
<div id="right">
<div id="lng">
<div id="lang1">Language:</div>
<ul id="lang"><a href="index.html"><img src="images/uk.png"> English</a>
<li><a href="index.html"><img src="images/pl.png"> Polski</a></li>
</ul>
</div>
</div>
</div>
<div class="naw">
<ol class="menu">
<li><a href="index.html">CONTACT</a></li>
<li><a href="index.html">BLOG</a>
<ul class="submenu">
<li><a href="index.html">FIRST</a></li>
<li><a href="index.html">SECOND</a></li>
<li><a href="index.html">THIRD</a></li>
</ul>
</li>
<li><a href="index.html">WEBSITES</a>
<ul class="submenu">
<li><a href="index.html">ABOUT</a></li>
<li><a href="index.html">PRICING</a></li>
<li><a href="index.html">DEMOS</a></li>
</ul>
</li>
<li><a href="index.html">FLOOR PLANS</a>
<ul class="submenu">
<li><a href="index.html">ABOUT</a></li>
<li><a href="index.html">PRICING</a></li>
<li><a href="index.html">DEMOS</a></li>
</ul>
</li>
<li><a href="index.html">MOVIE TOURS</a>
<ul class="submenu">
<li><a href="index.html">ABOUT</a></li>
<li><a href="index.html">PRICING</a></li>
<li><a href="index.html">DEMOS</a></li>
</ul>
</li>
<li><a href="index.html">VIRTUAL TOURS</a>
<ul class="submenu">
<li><a href="index.html">ABOUT</a></li>
<li><a href="index.html">PRICING</a></li>
<li><a href="index.html">DEMOS</a></li>
</ul>
</li>
<li><a href="index.html">HOME</a></li>
</ol>
</nav>
</nav>
</header>
<div class="picture">
<img src="images/test.jpg">
<div>
<main>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis varius dui in nibh elementum, quis tincidunt ipsum suscipit. Nulla eu congue orci. Etiam id volutpat nibh. Maecenas fringilla arcu semper lacus sollicitudin viverra. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla facilisi. Nullam in ex vehicula, fringilla dolor non, facilisis sem. Suspendisse in magna ipsum. In eget velit eget eros aliquam elementum quis eu ante. Praesent purus ante, pulvinar id dui eu, tempor interdum mauris. Vestibulum vestibulum quis tellus vitae mattis. Praesent sit amet pharetra nisl. Integer ligula massa, tincidunt eleifend euismod at, blandit ut nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque non maximus ipsum. Curabitur luctus, magna et convallis ultrices, nulla ex lacinia ipsum, quis convallis massa dui ut magna.</p>
<p>Vestibulum ut interdum tellus. Etiam sed elit placerat, vestibulum lacus vel, accumsan orci. Duis eu mi nec eros porta placerat quis ac mauris. Sed faucibus viverra libero, id placerat sem gravida vel. Suspendisse sollicitudin volutpat risus a convallis. Morbi efficitur vel felis quis vehicula. Etiam vulputate est suscipit aliquam tincidunt. Sed vel tortor mauris.</p>
<p>Vestibulum lobortis porttitor risus, a feugiat metus pretium id. Vestibulum vestibulum nisl vel commodo molestie. Sed accumsan, odio sagittis dignissim semper, lorem nunc rutrum sapien, eu dictum risus nibh semper risus. Aliquam erat volutpat. Pellentesque eget aliquet ante, vel hendrerit ante. Fusce sed dui tincidunt, pulvinar eros in, posuere orci. Praesent tristique cursus urna vitae ultrices. Donec massa arcu, sodales vel viverra id, efficitur id est. Pellentesque ac risus facilisis, iaculis arcu ut, laoreet velit. Sed et augue vitae odio tincidunt mollis. Cras finibus velit non diam egestas, ut maximus dui suscipit. Proin vitae turpis mattis, iaculis elit ut, viverra purus. Nunc pellentesque et lectus quis bibendum. Aliquam ultrices sollicitudin felis, quis ornare turpis hendrerit et. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis varius dui in nibh elementum, quis tincidunt ipsum suscipit. Nulla eu congue orci. Etiam id volutpat nibh. Maecenas fringilla arcu semper lacus sollicitudin viverra. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla facilisi. Nullam in ex vehicula, fringilla dolor non, facilisis sem. Suspendisse in magna ipsum. In eget velit eget eros aliquam elementum quis eu ante. Praesent purus ante, pulvinar id dui eu, tempor interdum mauris. Vestibulum vestibulum quis tellus vitae mattis. Praesent sit amet pharetra nisl. Integer ligula massa, tincidunt eleifend euismod at, blandit ut nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque non maximus ipsum. Curabitur luctus, magna et convallis ultrices, nulla ex lacinia ipsum, quis convallis massa dui ut magna.</p>
<p>Vestibulum ut interdum tellus. Etiam sed elit placerat, vestibulum lacus vel, accumsan orci. Duis eu mi nec eros porta placerat quis ac mauris. Sed faucibus viverra libero, id placerat sem gravida vel. Suspendisse sollicitudin volutpat risus a convallis. Morbi efficitur vel felis quis vehicula. Etiam vulputate est suscipit aliquam tincidunt. Sed vel tortor mauris.</p>
<p>Vestibulum lobortis porttitor risus, a feugiat metus pretium id. Vestibulum vestibulum nisl vel commodo molestie. Sed accumsan, odio sagittis dignissim semper, lorem nunc rutrum sapien, eu dictum risus nibh semper risus. Aliquam erat volutpat. Pellentesque eget aliquet ante, vel hendrerit ante. Fusce sed dui tincidunt, pulvinar eros in, posuere orci. Praesent tristique cursus urna vitae ultrices. Donec massa arcu, sodales vel viverra id, efficitur id est. Pellentesque ac risus facilisis, iaculis arcu ut, laoreet velit. Sed et augue vitae odio tincidunt mollis. Cras finibus velit non diam egestas, ut maximus dui suscipit. Proin vitae turpis mattis, iaculis elit ut, viverra purus. Nunc pellentesque et lectus quis bibendum. Aliquam ultrices sollicitudin felis, quis ornare turpis hendrerit et. </p>
</main>
<footer>
© Simple Solutions 2019, All rights reserved
</footer>
<script src="jquery.min.js"></script>
<script>
$(document).ready(function() {
var NavY = $('.naw').offset().top;
var stickyNav = function(){
var ScrollY = $(window).scrollTop();
if (ScrollY > NavY) {
$('.naw').addClass('sticky');
} else {
$('.naw').removeClass('sticky');
}
};
stickyNav();
$(window).scroll(function() {
stickyNav();
});
});
</script>
</body>
</html>
body
{
background-color: #2F3336;
font-family: Verdana;
font-size: 20px;
color: #fff;
margin: 0 !important;
}
.naw
{
width: 100%;
clear: both;
background-color: #1c74b2;
text-align: center;
max-height: 20px;
}
#top
{
width: 1000px;
height: 150px;
margin-left: auto;
margin-right: auto;
z-index: 100;
}
#left
{
width: 300px;
max-height: 150px;
float: left;
background-color: #2F3336;
}
ul
{
margin: 0px;
}
#right
{
width: 700px;
height: 150px;
float: left;
position: relative;
background-color: #2F3336;
background-image: url('../images/top.png');
}
#lng
{
position: absolute;
display: block;
right: 10px;
top: 10px;
font-size: 12px;
}
#lang1
{
display: block;
float: left;
}
#lang
{
margin: 0px 0px 0px 3px;
padding: 0px;
display: block;
float: left;
background-color: red;
}
#lang > li
{
list-style-type: none;
margin: 0px;
padding: 0px;
display: none;
}
#lang:hover > li
{
display: block;
}
#lang:hover > li > a:hover
{
color: red;
}
#lang:hover > a:hover
{
color: red;
}
main
{
width: 1000px;
margin-left: auto;
margin-right: auto;
text-align: justify;
}
.picture
{
width: 1000px;
margin-left: auto;
margin-right: auto;
}
footer
{
background-color: #1c74b2;
height: 20px;
font-size: 12px;
text-align: center;
padding-bottom: 3px;
padding-top: 6px;
}
a
{
margin-left: 10px;
margin-right: 10px;
text-decoration: none;
text-align: center;
}
a:link
{
color: white;
}
a:visited
{
color: white;
}
a:hover
{
color: #152977;
}
h1.logo
{
font-size: 50px;
font-weight: 900;
letter-spacing: 1px;
margin-top: 20px;
margin-left: 30px;
}
.menu
{
width: 1000px;
margin: 0px;
list-style-type: none;
margin: 0px;
padding-left: 10px;
padding-right: 10px;
font-size: 14px;
display: inline-block;
}
.menu > li
{
float: right;
height: 20px;
border-right: 1px dashed #152977;
display: block;
}
.menu > li:last-child
{
border-left: 1px dashed #152977;
}
.menu > li:hover
{
background-color: #2f9ce9;
}
.menu > li > .submenu
{
list-style-type: none;
margin: 0px;
padding: 0px;
height: 20px;
display: none
}
.menu > li:hover > .submenu
{
display: block;
}
.menu > li > .submenu > li
{
display: block;
background-color: #2f9ce9;
position: relative;
z-index: 100;
border-top: 1px dashed #152977;
}
.menu > li > .submenu > li:hover
{
background-color: #1c74b2;
}
.blog
{
list-style-type: none;
margin: 0;
padding: 10px;
font-size: 18px;
min-height: 40px;
}
.sticky
{
width: 100%;
position: fixed;
left: 0;
top: 0;
z-index: 100;
}
