Element not appearing on hover

user_18986279 0
Viewed 112

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>

css html javascript
3 Answers

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>

user_46226200

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>

user_148071110

I got to work with just CSS. I just changed the ol/ul part. Instead of having a separate ol for the menus, I put the menus inside the main headings of the ol as a ul and it works now.

ol {
list-style: none;
}


li {
float:left;
margin-left:7.5%;
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;
position:relative;
}

#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:-60px;
display: none;
position:absolute;
}

#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:-60px;
display: none;
position:absolute;
}

#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:-60px;
display: none;
position:absolute;
}

#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:-60px;
display: none;
position:absolute;
}

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
     <ol> 
         <li id="insertmenu"> 
             Photos 
             Videos
             Table

         </li>
        
    </ol> </li>
    
    <li id="view"> View 
    <ol> 
        <li id="viewmenu"> 
            Photos 
            Videos
            Table

        </li>
       
   </ol></li>
    
   <li id="table"> Table
    <ol> 
        <li id="tablemenu"> 
            Photos 
            Videos
            Table

        </li>
       
   </ol> </li>
   
   <li id="design"> Design 
    <ol> 
        <li id="designmenu"> 
            Photos 
            Videos
            Table

        </li>
       
   </ol> </li>
   
   <li> Info </li>
    
</ol>

user_189862790
Related