Element not appearing on hover

Question

I made a basic website header and the respective menus should appear when you hover over the options but it doesn't work. When hovering over the options "Home" "Insert" "design" "table" "info" etc the respective menus should appear. I have made menus and did dispaly:none on them to make them disappear and put display:block on the options to make the menus appear when you hover over them. What is the mistake pls help.

ol {
  list-style: none;
}

li {
  float: left;
  margin-left: 9%;
  font-size: 20px;
  font-family: calibri;
  padding: 8 20 8 20;
  background-color: skyblue;
  border-radius: 20px;
  margin-top: 5px;
  border-top: 5px rgb(53, 53, 185) groove;
  border-bottom: 5px rgb(53, 53, 185) groove;
}

#insertmenu {
  font-size: 25px;
  background-color: skyblue;
  width: 100px;
  padding: 20 10 20 10;
  font-family: calibri;
  border-radius: 10px;
  border-left: 4px rgb(20, 20, 119) solid;
  border-right: 4px rgb(20, 20, 119) solid;
  margin-top: 40px;
  margin-left: 23.5%;
  display: none;
}

#viewmenu {
  font-size: 25px;
  background-color: skyblue;
  width: 100px;
  padding: 20 10 20 10;
  font-family: calibri;
  border-radius: 10px;
  border-left: 4px rgb(20, 20, 119) solid;
  border-right: 4px rgb(20, 20, 119) solid;
  margin-top: 40px;
  margin-left: 7%;
  display: none;
}

#tablemenu {
  font-size: 25px;
  background-color: skyblue;
  width: 100px;
  padding: 20 10 20 10;
  font-family: calibri;
  border-radius: 10px;
  border-left: 4px rgb(20, 20, 119) solid;
  border-right: 4px rgb(20, 20, 119) solid;
  margin-top: 40px;
  margin-left: 7%;
  display: none;
}

#designmenu {
  font-size: 25px;
  background-color: skyblue;
  width: 100px;
  padding: 20 10 20 10;
  font-family: calibri;
  border-radius: 10px;
  border-left: 4px rgb(20, 20, 119) solid;
  border-right: 4px rgb(20, 20, 119) solid;
  margin-top: 40px;
  margin-left: 7%;
  display: none;
}

#li:hover {
  background-color: white;
}

#insert:hover+#insertmenu {
  display: block;
}

#view:hover+#viewmenu {
  display: block;
}

#table:hover+#tablemenu {
  display: block;
}

#design:hover+#designmenu {
  display: block;
}

<ol>
  <li> Home </li>
  <li id="insert"> Insert </li>
  <li id="view"> View </li>
  <li id="table"> Table </li>
  <li id="design"> Design </li>
  <li> Info </li>

</ol>

<br> <br> <br>

<ol>
  <li id="insertmenu">
    Photos Videos Table
  </li>

  <li id="viewmenu">
    Chart Pictures Videos
  </li>

  <li id="tablemenu">
    Chart Pictures Videos
  </li>

  <li id="designmenu">
    Chart Pictures Videos
  </li>

</ol>

Answer 1

It is indeed possible with CSS only but you have a "setup/layout" that won't allow it due to the nesting your are using.

There is no CSS selector that allows you to move OUT of the <ol> elements and find the other <li> elements INSIDE the seconds <ol>.

Additionally the + operator in CSS won't work here either as it only looks for directly adjacent elements (if I'm not mistaken! Please verify for yourself!).

The Operator you are looking for is the "tilde" operator ~.

I've provided a working example that might explain better what I mean:

.fake-li {
  float: left;
  margin-left: 9%;
  font-size: 20px;
  font-family: calibri;
  padding: 8 20 8 20;
  background-color: skyblue;
  border-radius: 20px;
  margin-top: 5px;
  border-top: 5px rgb(53, 53, 185) groove;
  border-bottom: 5px rgb(53, 53, 185) groove;
}

#insertmenu {
  font-size: 25px;
  background-color: skyblue;
  width: 100px;
  padding: 20 10 20 10;
  font-family: calibri;
  border-radius: 10px;
  border-left: 4px rgb(20, 20, 119) solid;
  border-right: 4px rgb(20, 20, 119) solid;
  margin-top: 40px;
  margin-left: 23.5%;
  display: none;
}

#viewmenu {
  font-size: 25px;
  background-color: skyblue;
  width: 100px;
  padding: 20 10 20 10;
  font-family: calibri;
  border-radius: 10px;
  border-left: 4px rgb(20, 20, 119) solid;
  border-right: 4px rgb(20, 20, 119) solid;
  margin-top: 40px;
  margin-left: 7%;
  display: none;
}

#tablemenu {
  font-size: 25px;
  background-color: skyblue;
  width: 100px;
  padding: 20 10 20 10;
  font-family: calibri;
  border-radius: 10px;
  border-left: 4px rgb(20, 20, 119) solid;
  border-right: 4px rgb(20, 20, 119) solid;
  margin-top: 40px;
  margin-left: 7%;
  display: none;
}

#designmenu {
  font-size: 25px;
  background-color: skyblue;
  width: 100px;
  padding: 20 10 20 10;
  font-family: calibri;
  border-radius: 10px;
  border-left: 4px rgb(20, 20, 119) solid;
  border-right: 4px rgb(20, 20, 119) solid;
  margin-top: 40px;
  margin-left: 7%;
  display: none;
}

li:hover {
  background-color: white;
}

#insert:hover ~ #insertmenu {
  display: block;
}

#view:hover ~ #viewmenu {
  display: block;
}

#table:hover ~ #tablemenu {
  display: block;
}

#design:hover ~ #designmenu {
  display: block;
}

<div class="fake-li">Home</div>
<div id="insert" class="fake-li">Insert</div>
<div id="view" class="fake-li">View</div>
<div id="table" class="fake-li">Table</div>
<div id="design" class="fake-li">Design</div>
<div class="fake-li">Info</div>

<br />
<br />
<br />

<div id="insertmenu" class="fake-li">Photos Videos Table</div>
<div id="viewmenu" class="fake-li">Chart Pictures Videos</div>
<div id="tablemenu" class="fake-li">Chart Pictures Videos</div>
<div id="designmenu" class="fake-li">Chart Pictures Videos</div>

Answer 2

Update

In your case with your HTML structure you cant archive this with pur CSS. You have to use Javascript. Take a look of this small working example. I refactor your code only a little bit. But you will see how it works and you can adjusting for your wishes.

function showBox(sel) {  
  const el = document.getElementById(sel);
  el.classList.remove('hide');  
}

function hideBox(sel) {
  const el = document.getElementById(sel);
  el.classList.add('hide');    
}

ol {
  list-style: none;
}

li {
  float: left;
  margin-left: 9%;
  font-size: 25px;
  font-family: calibri;
  padding: 8 20 8 20;
  background-color: skyblue;
  border-radius: 20px;
  margin-top: 5px;
  border-top: 5px rgb(53, 53, 185) groove;
  border-bottom: 5px rgb(53, 53, 185) groove;
}

#insertmenu {
  font-size: 25px;
  background-color: skyblue;
  width: 100px;
  padding: 20 10 20 10;
  font-family: calibri;
  border-radius: 10px;
  border-left: 4px rgb(20, 20, 119) solid;
  border-right: 4px rgb(20, 20, 119) solid;
  margin-top: 40px;
  margin-left: 23.5%;  
}

#viewmenu {
  font-size: 25px;
  background-color: skyblue;
  width: 100px;
  padding: 20 10 20 10;
  font-family: calibri;
  border-radius: 10px;
  border-left: 4px rgb(20, 20, 119) solid;
  border-right: 4px rgb(20, 20, 119) solid;
  margin-top: 40px;
  margin-left: 7%; 
}

#tablemenu {
  font-size: 25px;
  background-color: skyblue;
  width: 100px;
  padding: 20 10 20 10;
  font-family: calibri;
  border-radius: 10px;
  border-left: 4px rgb(20, 20, 119) solid;
  border-right: 4px rgb(20, 20, 119) solid;
  margin-top: 40px;
  margin-left: 7%;  
}

#designmenu {
  font-size: 25px;
  background-color: skyblue;
  width: 100px;
  padding: 20 10 20 10;
  font-family: calibri;
  border-radius: 10px;
  border-left: 4px rgb(20, 20, 119) solid;
  border-right: 4px rgb(20, 20, 119) solid;
  margin-top: 40px;
  margin-left: 7%;  
}

ol li:hover {
  background-color: white;
}

.hide {
  display: none;
}

<ol>
  <li> Home </li>
  <li id="insert" onmouseover="showBox('insertmenu')" onmouseout="hideBox('insertmenu')"> Insert </li>
  <li id="view" onmouseover="showBox('viewmenu')" onmouseout="hideBox('viewmenu')"> View </li>
  <li id="table" onmouseover="showBox('tablemenu')" onmouseout="hideBox('tablemenu')"> Table </li>
  <li id="design" onmouseover="showBox('designmenu')" onmouseout="hideBox('designmenu')"> Design </li>
  <li> Info </li>

</ol>

<br> <br> <br>

<ol>
  <li id="insertmenu" class="hide">
    Photos Videos Table
  </li>

  <li id="viewmenu" class="hide">
    Chart Pictures Videos
  </li>

  <li id="tablemenu" class="hide">
    Chart Pictures Videos
  </li>

  <li id="designmenu" class="hide">
    Chart Pictures Videos
  </li>

</ol>