<div id="menu">
    <img src="" alt="logotype" class="logotype">
    <ul class="dropdown">
      <li>About the company</li>
      <li>Our projects</li>
      <li class="dropdown1">Our proposals </li>
      <ul class="dropdown-content">
        <li><a href="">1</a></li>
        <li><a href="">2</a></li>
      </ul>
      <li>Contacts</li>
    </ul>
  </div>
  <div class="content">
    <div class="content1">
      <p>About the company</p>
    </div>
    <div class="content2">

      <p>We are a team that has more than 30 years of experience in image processing. For the last 15 years,
        we have been working on scanners for spacecraft for remote sensing and IMINT, on-board video systems of
        space launch vehicles, optical systems for trajectory measurements on rocket launch pads, vision systems for

        UAV and UGV with various purposes, on-board systems of real-time image and video processing, radiation-
        resistant cameras of mobile robots for the Shelter object of the Chernobyl NPP, software for the interpretation

        of IMINT information, software of image processing and analysis for various applications, and others.
        We create solutions in image processing of any complexity. The products we develop are highly
        efficient, easy-to-use, easy-to-implement, and have high performance and minimal computational costs. We
        are constantly improving our products based on experience with their application.
        We are interested in expanding cooperation on these areas of work. If you have ideas that we could
        implement, then we are always open for collaboration.</p>
    </div>
  
  <div class="content3">
    <p>Our mission is to make the system of our clients as efficient as possible</p>
  </div>
  <div class="content4">

    <p>We create solutions in image processing of any complexity. The products we develop are highly
      efficient, easy-to-use, easy-to-implement, and have high performance and minimal computational costs. We
      are constantly improving our products based on experience with their application.
      We are interested in expanding cooperation on these areas of work. If you have ideas that we could
      implement, then we are always open for collaboration</p>

  </div>
  </div>
  <footer>
    <P>Copyright 2020 ISI | All Rights Reserved | Design By:web-master Granovskiyilya777@gmail.com<P>
  </footer>

body {
  margin: 0;
  overflow: scroll;
  height: 100%;
  width: 100%;
  overflow-x: hidden;
}
#menu {
  display: flex;
  top: 0;
  vertical-align: middle;
  font-size: 30px;
  background-color: blue;
  width: 100%;
  
  font-family: arial;
  position: sticky;
}
li {
  color: yellow;
  display: flex;
  padding-top: 2.1%;
  margin:0.5%;
}
li:hover {
  text-decoration: underline;
}
ul  {
  float: right;
  margin: 2.6%;
  display: inline-flex;
  list-style: none;
  justify-content: space-between;
  width: 60%;
}

.topmenu > li:hover .submenu {
  visibility: visible;
  opacity: 1;
  transform: perspective(600px) rotateX(0deg);
}
img {
  background-color: yellow;
  margin: 3% 11%;
  border: 3px solid green;
  border-radius: 50 50;
}

.content1 {
  width: 100%;
  text-align: center;
  height: 40%;

  display: block;
  font-size: 65px;
  font-family: arial;
  font-weight: 600;
}
.content2 {
  font-size: 35px;
  font-family: arial;
  font-weight: 400;
  display: inline-block;
  padding: 0 5%;
  background: url("sistemi-videonabludenija-4.jpg");
  color: yellow;
  text-shadow: 1px 1px 1px black;
}
.content3 {
  display: block;
  font-size: 65px;
  display: inline-block;
  font-family: arial;
  font-weight: 600;
  text-align: center;
  padding: 0 5%;
}
.content4 {
  text-align: center;
  display: inline-block;
  font-size: 35px;
  font-family: arial;
  font-weight: 400;
  padding: 0 5%;
  background: url("cam.jpg");
  color: yellow;
  text-shadow: 1px 1px 1px black;
}

.dropdown {
 display:inline-block;
  
}
.dropdown li {display:inline;}
.dropdown-content {
  position:absolute;
  display:none;
  border:3px solid red;
  }
.dropdown-content a {
  color:red;
  display:block;
  border:3px solid pink;
  width:21.8%;
  margin-left:42.2%;
  
  
}



.dropdown1:hover .dropdown-content  {
  display:block;
  }

footer:hover {
  color: yellow;
}

#menu.menu-not-top {
  font-size: 20px;
}

#menu.menu-not-top li {
  padding-top: 1rem; 
}

 const navbar = document.querySelector(`#menu`);

document.addEventListener(`scroll`, () => {
  navbar.classList.toggle(`menu-not-top`, window.pageYOffset);
});
 $(window).scroll(function() {
      var s = $(window).scrollTop();
      if (s > 0) {
        $('#headmenu').css('background-color', 'rgba(43, 140, 169, 0.95)');
        $('#headmenu').animate({
          height: "-=20px"
        }, {
          duration: 50,
          queue: false
        });
      } else if (s == 0) {
        $('#headmenu').animate({
          height: '32%'
        }, {
          duration: 50,
          queue: false
        });
        $('#headmenu').css('background-color', 'transparent');
      }
    });