White Maskers White Maskers - 2 months ago 5
CSS Question

The hover property is not working properly in the sub menu

In code given below i'm tried to give an hover property to sub menu items.initially you need to click on the glass icon to visible the flip menu.There we have two drop down menus 'apps' and 'layouts'.when click on this drop downmenus the sub menus are visible.i'm tried to do is given an hover property background-color: red,but it's not working properly.how can i fix it?



var m;
function functionButton() {
document.getElementById("flip-up-menu").style.display = "block";
}
function buttonSec() {
document.getElementById("flip-up-menu").style.display = "none";
}
function displaySubMenu(e) {
var k = e;
if (k === 2) {
if(document.getElementById("first-drop-down-icon").className=="spinner-icon in fa fa-caret-down"){
document.getElementById("sub-menu-one").style.display="";
}
else{
document.getElementById("sub-menu-one").style.display = "block";
document.getElementById("flip-main-two").style.background = "rgba(105,193,132,1)";
document.getElementById("sub-menu-two").style.display = "";
document.getElementById("flip-main-one").style.background = "";
document.getElementById("flip-main-three").style.background = "";
document.getElementById("flip-main-four").style.background = "";
}
} else if (k === 3) {
if(document.getElementById("second-drop-down-icon").className=="spinner-icon in fa fa-caret-down"){
document.getElementById("sub-menu-two").style.display="";
}
else{
document.getElementById("sub-menu-two").style.display = "block";
document.getElementById("flip-main-three").style.background = "rgba(105,193,132,1)";
document.getElementById("sub-menu-one").style.display = "";
document.getElementById("flip-main-one").style.background = "";
document.getElementById("flip-main-two").style.background = "";
document.getElementById("flip-main-four").style.background = "";}
} else if (k === 1) {
document.getElementById("flip-main-one").style.background = "rgba(105,193,132,1)";
document.getElementById("sub-menu-one").style.display = "";
document.getElementById("sub-menu-two").style.display = "";
document.getElementById("flip-main-two").style.background = "";
document.getElementById("flip-main-three").style.background = "";
document.getElementById("flip-main-four").style.background = "";
} else if (k === 4) {
document.getElementById("flip-main-four").style.background = "rgba(105,193,132,1)";
document.getElementById("sub-menu-one").style.display = "";
document.getElementById("sub-menu-two").style.display = "";
document.getElementById("flip-main-one").style.background = "";
document.getElementById("flip-main-three").style.background = "";
document.getElementById("flip-main-two").style.background = "";
} else {
document.getElementById("sub-menu-one").style.display = "";
document.getElementById("sub-menu-two").style.display = "";
}
}
/*function rotateIcon(m) {
var key=m;
if (key === 2) {
document.getElementById("first-drop-down-icon").className = "spinner-icon in fa fa-caret-down";
document.getElementById("second-drop-down-icon").className = "spinner-icon out fa fa-caret-down";
} else if (key === 3) {
document.getElementById("second-drop-down-icon").className = "spinner-icon in fa fa-caret-down";
document.getElementById("first-drop-down-icon").className = "spinner-icon out fa fa-caret-down";
} else {
document.getElementById("second-drop-down-icon").className = "spinner-icon out fa fa-caret-down";
document.getElementById("first-drop-down-icon").className = "spinner-icon out fa fa-caret-down";
}
}*/
function rotateIcon(m) {
var key = m;
if ( key === 2)
{

if(document.getElementById("first-drop-down-icon").className=="spinner-icon in fa fa-caret-down")
{

document.getElementById("first-drop-down-icon").className="spinner-icon out fa fa-caret-down";

}
else
{
document.getElementById("first-drop-down-icon").className="spinner-icon in fa fa-caret-down";
document.getElementById("second-drop-down-icon").className = "spinner-icon out fa fa-caret-down";
}


}
else if(key === 3)
{
if(document.getElementById("second-drop-down-icon").className=="spinner-icon in fa fa-caret-down")
{

document.getElementById("second-drop-down-icon").className="spinner-icon out fa fa-caret-down";
}
else
{
document.getElementById("second-drop-down-icon").className="spinner-icon in fa fa-caret-down";
document.getElementById("first-drop-down-icon").className = "spinner-icon out fa fa-caret-down";
}
}
else{
document.getElementById("second-drop-down-icon").className="spinner-icon out fa fa-caret-down";
document.getElementById("first-drop-down-icon").className="spinner-icon out fa fa-caret-down";
}
}

.left-side-container{
float: left;
width: 6%;
height: 100%;
background-color: rgb(26,35,126);
color: white;
text-align: center;
display:block;
}
.left-side-container i{
margin-top: 25%;
}
.flat-kit-icon{
margin-top: 30%;
text-align:center;
}
.flat-kit-icon img{
width:50%;
}
.right-side-container{
float: left;
width: 94%;
height: 100%;
background-color: bisque;
}
.right-side-top-container{
padding:1rem;
float:left;
width:100%;
min-height: 3.5rem;
background-color : white;
}
.text-dashboard{
font-family: inherit;
font-weight: 600;
line-height: 3.5rem;
white-space: nowrap;
margin-right: 1rem;
margin-bottom: 0;
font-size: 1.25rem;
box-sizing: inherit;
}
/*2 new class added*/
.plus-icon{
color: inherit;
opacity: .6;
}
body {
font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: .875rem;
background-color: #f0f0f0;
-webkit-font-smoothing: antialiased;
}
.text-new{
line-height: 3.5rem;
white-space: nowrap;
}
.button-to-open{
float:left;
margin-left: -1.6rem;
width: 1.2rem;
}
/*new 1 class*/
.text-welcome{
font-weight: 300;
margin-bottom: 0!important;
font-size: 1.5rem;
font-family: inherit;
line-height: 1.6;
color: inherit;
margin-top: 0;
display: block;
}
.text-bootstrap{
font-size: 80%;
opacity: 0.6;
font-weight: 400;
box-sizing: inherit;
}
#flip-up-menu{
width: 12.5rem;
height: 100%;
position: absolute;
top: 0%;
display: none;
/*new properties*/
border: inherit;
background-color:rgb(26,35,126);
color: rgba(255,255,255,.87)!important;
border-radius: 0!important;
min-height: 4rem;
border:none;
padding: 1.3rem 1.1rem;
flex-shrink: 0;
}
.flip-up-menu-top-icon-container{
display:inline-block;
white-space: nowrap;
outline: 0;
text-align: center;
}
.flip-menu-text-flatkit{
/*satifactory properties below*/
font-size: 20px;
font-weight: 700;
white-space: nowrap;
text-align: left;
margin-left: 10px;
padding-top: -20px;
/*margin-top: -5rem;*/
}
.flat-kit-icon-two{
height: 34px;
width: 35px;
float: left;
margin-top: -.44rem;
margin-left: -.5rem;
}
.buttnsec{
margin-left: 104%;
width: 1.2rem;
}
.flip-container-main-menu-head-one{
/*new changes starts here*/
opacity: 0.6;
font-size: 90%;
color: inherit;
font-weight: 400;
box-sizing: inherit;
line-height: 2.25rem;
text-align: -webkit-match-parent;
}
.flip-container-main-menu-parent{
cursor: pointer;
margin-left: -1rem;
padding-left: 1rem;
margin-right: -1rem;
padding-bottom: .5rem;
}
.flip-menu-main-icon{
float:none;
margin-right:10px;
margin-left: 0;
position: relative;
top:0;
min-width: 1.5rem;
list-style-type: none;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
}
.fa.flip-menu-main-icon{
font-size: 13px;
width: 1em;
height: 1em;
line-height: 2.5rem;
font-style: normal;
font-weight: normal;
opacity:1;
}
.flip-menu-text{
text-align: left;
font-weight:500;
line-height: 1.125rem;
padding: .5625rem 0;
margin: 0;
outline: 0;
border: 0;
font-size: 14px;
}
.flip-sub-menu{
opacity: 0.75;
padding-top: .4375rem;
padding-bottom: .4375rem;
padding-right: 9.4rem;
padding-left: 4rem;
margin-left: -2rem;
text-align: left;
line-height: 1.125rem;
display:block;
background-color: rgba(24,33,118,1);
color: rgba(255,255,255,.87)!important;
width: 100%;
display: none;
}
ul.flip-sub-menu li a{
color: rgba(255,255,255,.87)!important;
line-height: 2rem;
font-size: 14px;
}
.flip-container-sub-menu-one li a
{
color: white;
}
.flip-container-sub-menu-two li a
{
color: white;
}

.flip-menu-drop-down-icon{
float: right;
padding-right: 5%;
margin-top: 5%;
margin-left:-3rem;
}
.spinner-icon{
font-size:13px;
float: right;
margin-top: 5%;
margin-right: 7%;
transition: all 0.6s ease-in-out;
opacity:0.75;
}
.fa.spinner-icon{
font-size: 13px;
}
.spinner-icon.in{
transform: rotate(-180deg);
}
.spinner-icon.out{
transform:rotate(0deg);
}
/*hover properties starts here*/
#flip-up-container ul:hover{
background-color: #122112;
}
#flip-up-container .flip-up-container-main-menu-parent:hover
{
background-color: #122112;
}
.flip-container-submenu-one li:hover{
background-color: #0f0f3e;
}
.flip-container-sub-menu-two li:hover{
background-color: #0f0f3e;
}

.flip-container-main-menu-parent:hover {
background-color:rgba(24,33,118,1);
font-weight: 600;
}
.flip-sub-menu li:hover{
background-color: red;
}



<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">

<script src="js/rise.js">
</script>
</head>
<body>
<!--left side window starts here-->
<div class="main-container">
<div class="right-side-container">
<ul class="right-side-top-container">
<!--button-->
<li><span onclick="functionButton()" class="fa fa-glass"></span></li>
</ul>
</div>
</div>
<div id="flip-up-menu">
<!--change start here-->
<p id="flip-up-menu-top-icon-container">
<img src="img/image1.jpg" class="flat-kit-icon-two">
<span class="flip-menu-text-flatkit">Flatkit</span>
</p>
<!--button2-->
<img src="img/right.jpg" onclick="buttonSec()" class="buttnsec">
<p class="flip-container-main-menu-head-one" >Main</p>
<!--change ends here-->
<ul class="flip-container-main-menu">
<li class="flip-container-main-menu-parent" id="flip-main-one" onclick="displaySubMenu(1);rotateIcon('first-drp-down-icon');"><i class="flip-menu-main-icon fa fa-glass "></i><span class="flip-menu-text">Dashboard</span></li>
<li class="flip-container-main-menu-parent" id="flip-main-two" onclick="displaySubMenu(2);rotateIcon(2);"><i class="flip-menu-main-icon fa fa-th"></i><span class="flip-menu-text">Apps</span> <i id="first-drop-down-icon" class="spinner-icon fa fa-caret-down"></i> </li>
<ul id="sub-menu-one" class="flip-sub-menu">
<li> <a href="#">Inbox</a> </li>
<li> <a href="#">Condact</a> </li>
<li> <a href="#">Calendar</a> </li>
</ul>
<li class="flip-container-main-menu-parent" id="flip-main-three" onclick="displaySubMenu(3);rotateIcon(3);"><i class="flip-menu-main-icon fa fa-th-large"></i><span class="flip-menu-text">Layouts</span><i id="second-drop-down-icon" class="spinner-icon fa fa-caret-down"></i> </li>
<ul id="sub-menu-two" class="flip-sub-menu">
<li> <a href="#">Header</a> </li>
<li> <a href="#">Aside</a> </li>
<li> <a href="#">Footer</a> </li>
</ul>
<li class="flip-container-main-menu-parent" id="flip-main-four"onclick="displaySubMenu(4);rotateIcon(4);"><i class="flip-menu-main-icon fa fa-align-justify"></i><span class="flip-menu-text">Widjet</span></li>
</ul>

</div>
</body>
</html>





But when i tried to create this flip-menu alone it's working and that snippet i'm added below.



function displaySubMenu(e) {
var k = e;
if (k === 2) {
if(document.getElementById("first-drop-down-icon").className=="spinner-icon in fa fa-caret-down"){
document.getElementById("sub-menu-one").style.display="";
}
else{
document.getElementById("sub-menu-one").style.display = "block";
document.getElementById("flip-main-two").style.background = "rgba(105,193,132,1)";
document.getElementById("sub-menu-two").style.display = "";
document.getElementById("flip-main-one").style.background = "";
document.getElementById("flip-main-three").style.background = "";
document.getElementById("flip-main-four").style.background = "";
}
} else if (k === 3) {
if(document.getElementById("second-drop-down-icon").className=="spinner-icon in fa fa-caret-down"){
document.getElementById("sub-menu-two").style.display="";
}
else{
document.getElementById("sub-menu-two").style.display = "block";
document.getElementById("flip-main-three").style.background = "rgba(105,193,132,1)";
document.getElementById("sub-menu-one").style.display = "";
document.getElementById("flip-main-one").style.background = "";
document.getElementById("flip-main-two").style.background = "";
document.getElementById("flip-main-four").style.background = "";}
} else if (k === 1) {
document.getElementById("flip-main-one").style.background = "rgba(105,193,132,1)";
document.getElementById("sub-menu-one").style.display = "";
document.getElementById("sub-menu-two").style.display = "";
document.getElementById("flip-main-two").style.background = "";
document.getElementById("flip-main-three").style.background = "";
document.getElementById("flip-main-four").style.background = "";
} else if (k === 4) {
document.getElementById("flip-main-four").style.background = "rgba(105,193,132,1)";
document.getElementById("sub-menu-one").style.display = "";
document.getElementById("sub-menu-two").style.display = "";
document.getElementById("flip-main-one").style.background = "";
document.getElementById("flip-main-three").style.background = "";
document.getElementById("flip-main-two").style.background = "";
} else {
document.getElementById("sub-menu-one").style.display = "";
document.getElementById("sub-menu-two").style.display = "";
}
}
function rotateIcon(m) {
var key = m;
if ( key === 2)
{

if(document.getElementById("first-drop-down-icon").className=="spinner-icon in fa fa-caret-down")
{

document.getElementById("first-drop-down-icon").className="spinner-icon out fa fa-caret-down";

}
else
{
document.getElementById("first-drop-down-icon").className="spinner-icon in fa fa-caret-down";
document.getElementById("second-drop-down-icon").className = "spinner-icon out fa fa-caret-down";
}


}
else if(key === 3)
{
if(document.getElementById("second-drop-down-icon").className=="spinner-icon in fa fa-caret-down")
{

document.getElementById("second-drop-down-icon").className="spinner-icon out fa fa-caret-down";
}
else
{
document.getElementById("second-drop-down-icon").className="spinner-icon in fa fa-caret-down";
document.getElementById("first-drop-down-icon").className = "spinner-icon out fa fa-caret-down";
}
}
else{
document.getElementById("second-drop-down-icon").className="spinner-icon out fa fa-caret-down";
document.getElementById("first-drop-down-icon").className="spinner-icon out fa fa-caret-down";
}
}

.flip-container-main-menu-parent{
cursor: pointer;
margin-left: -1rem;
padding-left: 1rem;
margin-right: -1rem;
padding-bottom: .5rem;
}
.flip-menu-main-icon{
float:none;
margin-right:10px;
margin-left: 0;
position: relative;
top:0;
min-width: 1.5rem;
list-style-type: none;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
}
.fa.flip-menu-main-icon{
font-size: 13px;
width: 1em;
height: 1em;
line-height: 2.5rem;
font-style: normal;
font-weight: normal;
opacity:1;
}
.flip-menu-text{
text-align: left;
font-weight:500;
line-height: 1.125rem;
padding: .5625rem 0;
margin: 0;
outline: 0;
border: 0;
font-size: 14px;
}
.flip-sub-menu{
opacity: 0.75;
padding-top: .4375rem;
padding-bottom: .4375rem;
padding-right: 9.4rem;
padding-left: 4rem;
margin-left: -2rem;
text-align: left;
line-height: 1.125rem;
display:block;
background-color: rgba(24,33,118,1);
color: rgba(255,255,255,.87)!important;
width: 100%;
display: none;
}
ul.flip-sub-menu li a{
color: rgba(255,255,255,.87)!important;
line-height: 2rem;
font-size: 14px;
}
.flip-container-sub-menu-one li a
{
color: white;
}
.flip-container-sub-menu-two li a
{
color: white;
}

.flip-menu-drop-down-icon{
float: right;
padding-right: 5%;
margin-top: 5%;
margin-left:-3rem;
}
.spinner-icon{
font-size:13px;
float: right;
margin-top: 5%;
margin-right: 7%;
transition: all 0.6s ease-in-out;
opacity:0.75;
}
.fa.spinner-icon{
font-size: 13px;
}
.spinner-icon.in{
transform: rotate(-180deg);
}
.spinner-icon.out{
transform:rotate(0deg);
}
/*hover properties starts here*/
#flip-up-container ul:hover{
background-color: #122112;
}
#flip-up-container .flip-up-container-main-menu-parent:hover
{
background-color: #122112;
}
.flip-container-submenu-one li:hover{
background-color: #0f0f3e;
}
.flip-container-sub-menu-two li:hover{
background-color: #0f0f3e;
}

.flip-container-main-menu-parent:hover {
background-color:rgba(24,33,118,1);
font-weight: 600;
}
.flip-sub-menu li:hover{
background-color: red;
}

<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/mango.css">
<script src="js/mango.js"> </script>
</head>
<body>
<ul class="flip-container-main-menu">
<li class="flip-container-main-menu-parent" id="flip-main-one" onclick="displaySubMenu(1);rotateIcon('first-drp-down-icon');"><i class="flip-menu-main-icon fa fa-glass "></i><span class="flip-menu-text">Dashboard</span></li>
<li class="flip-container-main-menu-parent" id="flip-main-two" onclick="displaySubMenu(2);rotateIcon(2);"><i class="flip-menu-main-icon fa fa-th"></i><span class="flip-menu-text">Apps</span> <i id="first-drop-down-icon" class="spinner-icon fa fa-caret-down"></i> </li>
<ul id="sub-menu-one" class="flip-sub-menu">
<li> <a href="#">Inbox</a> </li>
<li> <a href="#">Condact</a> </li>
<li> <a href="#">Calendar</a> </li>
</ul>
<li class="flip-container-main-menu-parent" id="flip-main-three" onclick="displaySubMenu(3);rotateIcon(3);"><i class="flip-menu-main-icon fa fa-th-large"></i><span class="flip-menu-text">Layout</span><i id="second-drop-down-icon" class="spinner-icon fa fa-caret-down"></i> </li>
<ul id="sub-menu-two" class="flip-sub-menu">
<li> <a href="#">Header</a> </li>
<li> <a href="#">Aside</a> </li>
<li> <a href="#">Footer</a> </li>
</ul>
<li class="flip-container-main-menu-parent" id="flip-main-four"onclick="displaySubMenu(4);rotateIcon(4);"><i class="flip-menu-main-icon fa fa-align-justify"></i><span class="flip-menu-text">Widjet</span></li>
</ul>
</body>





what is the problem with the first code?.how can i fix it?

Answer

i think are you waiting for this

 var m;
    function functionButton() {                    
        document.getElementById("flip-up-menu").style.display = "block";
    }
    function buttonSec() {
        document.getElementById("flip-up-menu").style.display = "none"; 
    }
    function displaySubMenu(e) {
        var k = e;
        if (k === 2) {
            if(document.getElementById("first-drop-down-icon").className=="spinner-icon in fa fa-caret-down"){
                document.getElementById("sub-menu-one").style.display="";
            }
            else{
                     document.getElementById("sub-menu-one").style.display = "block"; 
            document.getElementById("flip-main-two").style.background = "rgba(105,193,132,1)";
            document.getElementById("sub-menu-two").style.display = "";
            document.getElementById("flip-main-one").style.background = "";
            document.getElementById("flip-main-three").style.background = "";
            document.getElementById("flip-main-four").style.background = "";
            }
        } else if (k === 3) {
             if(document.getElementById("second-drop-down-icon").className=="spinner-icon in fa fa-caret-down"){
                  document.getElementById("sub-menu-two").style.display="";
             }
            else{
            document.getElementById("sub-menu-two").style.display = "block";
            document.getElementById("flip-main-three").style.background = "rgba(105,193,132,1)";
            document.getElementById("sub-menu-one").style.display = "";            
            document.getElementById("flip-main-one").style.background = "";
            document.getElementById("flip-main-two").style.background = "";
            document.getElementById("flip-main-four").style.background = "";}
        } else if (k === 1) {
            document.getElementById("flip-main-one").style.background = "rgba(105,193,132,1)"; 
            document.getElementById("sub-menu-one").style.display = "";
            document.getElementById("sub-menu-two").style.display = "";
            document.getElementById("flip-main-two").style.background = "";
            document.getElementById("flip-main-three").style.background = "";
            document.getElementById("flip-main-four").style.background = "";
        } else if (k === 4) {
            document.getElementById("flip-main-four").style.background = "rgba(105,193,132,1)";
            document.getElementById("sub-menu-one").style.display = "";
            document.getElementById("sub-menu-two").style.display = "";
            document.getElementById("flip-main-one").style.background = "";         
            document.getElementById("flip-main-three").style.background = "";
            document.getElementById("flip-main-two").style.background = "";
        } else {
            document.getElementById("sub-menu-one").style.display = "";
            document.getElementById("sub-menu-two").style.display = "";
        }
    }
    /*function rotateIcon(m) {
        var key=m;
        if (key === 2) {
            document.getElementById("first-drop-down-icon").className = "spinner-icon in fa fa-caret-down";
            document.getElementById("second-drop-down-icon").className = "spinner-icon out fa fa-caret-down";
        } else if (key === 3) {
            document.getElementById("second-drop-down-icon").className = "spinner-icon in fa fa-caret-down";
            document.getElementById("first-drop-down-icon").className = "spinner-icon out fa fa-caret-down";
        } else {
            document.getElementById("second-drop-down-icon").className = "spinner-icon out fa fa-caret-down";
            document.getElementById("first-drop-down-icon").className = "spinner-icon out fa fa-caret-down";
        }
    }*/
    function rotateIcon(m) {
      var key = m;
    if ( key === 2)
      {
       
       if(document.getElementById("first-drop-down-icon").className=="spinner-icon in fa fa-caret-down")
         {
          
           document.getElementById("first-drop-down-icon").className="spinner-icon out fa fa-caret-down";
           
           }
        else
          {
             document.getElementById("first-drop-down-icon").className="spinner-icon in fa fa-caret-down";
             document.getElementById("second-drop-down-icon").className = "spinner-icon out fa fa-caret-down";
            }
        
       
        }
      else if(key === 3)
        {
          if(document.getElementById("second-drop-down-icon").className=="spinner-icon in fa fa-caret-down")
         {
          
           document.getElementById("second-drop-down-icon").className="spinner-icon out fa fa-caret-down";
           }
        else
          {
             document.getElementById("second-drop-down-icon").className="spinner-icon in fa fa-caret-down";
             document.getElementById("first-drop-down-icon").className = "spinner-icon out fa fa-caret-down";
            }
          }
        else{
            document.getElementById("second-drop-down-icon").className="spinner-icon out fa fa-caret-down";
            document.getElementById("first-drop-down-icon").className="spinner-icon out fa fa-caret-down";
        }
    }
   .left-side-container{
            float: left;
            width: 6%;
            height: 100%;
            background-color: rgb(26,35,126);
            color: white;
            text-align: center;
            display:block;
        }
        .left-side-container i{
           margin-top: 25%;
        }
         .flat-kit-icon{
             margin-top: 30%;
             text-align:center;
         }
         .flat-kit-icon img{ 
           width:50%;
         } 
        .right-side-container{
            float: left;
            width: 94%;
            height: 100%;
            background-color: bisque;
        }
        .right-side-top-container{  
            padding:1rem;
            float:left;
            width:100%;
            min-height: 3.5rem;
            background-color : white;
        }
        .text-dashboard{
            font-family: inherit;
            font-weight: 600;
            line-height: 3.5rem;
            white-space: nowrap;
            margin-right: 1rem;
            margin-bottom: 0;
            font-size: 1.25rem;
            box-sizing: inherit;
        }
        /*2 new class added*/ 
        .plus-icon{
            color: inherit;
            opacity: .6;
        }
        body {
            font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
            font-size: .875rem;
            background-color: #f0f0f0;
            -webkit-font-smoothing: antialiased;
        }
        .text-new{
            line-height: 3.5rem;
            white-space: nowrap;
        }
        .button-to-open{
            float:left;
            margin-left: -1.6rem;
            width: 1.2rem;
        }
        /*new 1 class*/
        .text-welcome{
            font-weight: 300;
            margin-bottom: 0!important;
            font-size: 1.5rem;
            font-family: inherit;
            line-height: 1.6;
            color: inherit;
            margin-top: 0;
            display: block;
        }
        .text-bootstrap{
            font-size: 80%;
            opacity: 0.6;
            font-weight: 400;
            box-sizing: inherit;
        }
        #flip-up-menu{
          width: 50.5rem;    
            height: 100%;
            position: absolute;
            top: 0%;
            display: none;
            /*new properties*/
            border: inherit;
            background-color:rgb(26,35,126);
            color: rgba(255,255,255,.87)!important;
            border-radius: 0!important;
            min-height: 4rem;
            border:none;
            padding: 1.3rem 1.1rem;
            flex-shrink: 0;
        }
        .flip-up-menu-top-icon-container{
            display:inline-block;
            white-space: nowrap;
            outline: 0;
            text-align: center;
        }
        .flip-menu-text-flatkit{
            /*satifactory properties below*/
            font-size: 20px;
            font-weight: 700;
            white-space: nowrap;
            text-align: left;
            margin-left: 10px;
            padding-top: -20px;
            /*margin-top: -5rem;*/
        }
        .flat-kit-icon-two{
            height: 34px;
            width: 35px;
            float: left;
            margin-top: -.44rem;
            margin-left: -.5rem;
        }
        .buttnsec{
             margin-left: 104%;
                 width: 1.2rem;
        }
        .flip-container-main-menu-head-one{
         /*new changes starts here*/
            opacity: 0.6;
            font-size: 90%;
            color: inherit;
            font-weight: 400;
            box-sizing: inherit;
            line-height: 2.25rem;
            text-align: -webkit-match-parent;
        }
        .flip-container-main-menu-parent{
             cursor: pointer;
             margin-left: -1rem;
            padding-left: 1rem;
            margin-right: -1rem;
            padding-bottom: .5rem;
        }
        .flip-menu-main-icon{
            float:none;
            margin-right:10px;
            margin-left: 0; 
            position: relative;
            top:0;
            min-width: 1.5rem;
            list-style-type: none;
            text-transform: none;
            letter-spacing: normal;
            word-wrap: normal;
         }
        .fa.flip-menu-main-icon{
            font-size: 13px;
            width: 1em;
            height: 1em;
            line-height: 2.5rem;
            font-style: normal;
            font-weight: normal;
            opacity:1;
        } 
        .flip-menu-text{
            text-align: left;
            font-weight:500;
            line-height: 1.125rem;
            padding: .5625rem 0;
            margin: 0;
            outline: 0;
            border: 0;
            font-size: 14px;
        }
        .flip-sub-menu{
            opacity: 0.75;
            padding-top: .4375rem;
            padding-bottom: .4375rem;
            padding-right: 9.4rem;
            padding-left: 4rem;
            margin-left: -2rem;
            text-align: left;
            line-height: 1.125rem;
            display:block;
            background-color: rgba(24,33,118,1);
            color: rgba(255,255,255,.87)!important;
            width: 100%;
            display: none;
        }
        ul.flip-sub-menu li a{
            color: rgba(255,255,255,.87)!important;
            line-height: 2rem;
            font-size: 14px;
        }
        .flip-container-sub-menu-one li a
        {
            color: white;
        }
        .flip-container-sub-menu-two li a
        {
            color: white;
        }

        .flip-menu-drop-down-icon{
            float: right;
            padding-right: 5%;
            margin-top: 5%;
            margin-left:-3rem;
        }
        .spinner-icon{
                font-size:13px;
                float: right;
                margin-top: 5%;
                margin-right: 7%;
                transition: all 0.6s ease-in-out;
                opacity:0.75;
        }
        .fa.spinner-icon{
            font-size: 13px;
        }
        .spinner-icon.in{
            transform: rotate(-180deg);
        }
        .spinner-icon.out{
            transform:rotate(0deg);
        }
    /*hover properties starts here*/
        #flip-up-container ul:hover{
            background-color: #122112;
        }
        #flip-up-container .flip-up-container-main-menu-parent:hover
        {
            background-color: #122112;
        }
      .flip-container-submenu-one li:hover{
            background-color: #0f0f3e;
        }
        .flip-container-sub-menu-two li:hover{
            background-color: #0f0f3e;
        } 

        .flip-container-main-menu-parent:hover {
            background-color:rgba(24,33,118,1);
            font-weight: 600;
        }
        .flip-sub-menu li:hover {
            background-color: red;
        }
        
       
                <!--left side window starts here-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">

                <div class="main-container">
                    <div class="right-side-container">
                         <ul class="right-side-top-container">
                             <!--button--> 
                           <li><span   onclick="functionButton()" class="fa fa-glass"></span></li>
                        </ul>
                    </div>
                </div>
                 <div id="flip-up-menu">
                    <!--change start here-->
                    <p id="flip-up-menu-top-icon-container">
                        <img src="img/image1.jpg"  class="flat-kit-icon-two">
                        <span class="flip-menu-text-flatkit">Flatkit</span>
                    </p>
                        <!--button2-->        
                        <img src="img/right.jpg"  onclick="buttonSec()" class="buttnsec">
                        <p class="flip-container-main-menu-head-one" >Main</p>
                    <!--change ends here-->
                    <ul class="flip-container-main-menu">
                        <li class="flip-container-main-menu-parent" id="flip-main-one" onclick="displaySubMenu(1);rotateIcon('first-drp-down-icon');"><i class="flip-menu-main-icon fa fa-glass "></i><span class="flip-menu-text">Dashboard</span></li>
                        <li class="flip-container-main-menu-parent" id="flip-main-two" onclick="displaySubMenu(2);rotateIcon(2);"><i class="flip-menu-main-icon fa fa-th"></i><span class="flip-menu-text">Apps</span> <i id="first-drop-down-icon" class="spinner-icon fa fa-caret-down"></i> </li>
                            <ul id="sub-menu-one" class="flip-sub-menu"> 
                                <li>   <a href="#">Inbox</a>    </li>
                                <li>   <a href="#">Condact</a>  </li>
                                <li>   <a href="#">Calendar</a> </li>
                            </ul>
                        <li class="flip-container-main-menu-parent" id="flip-main-three" onclick="displaySubMenu(3);rotateIcon(3);"><i class="flip-menu-main-icon fa fa-th-large"></i><span class="flip-menu-text">Layouts</span><i id="second-drop-down-icon" class="spinner-icon fa fa-caret-down"></i>  </li>
                            <ul id="sub-menu-two" class="flip-sub-menu">
                                <li>    <a href="#">Header</a>  </li>
                                <li>    <a href="#">Aside</a>   </li>
                                <li>    <a href="#">Footer</a>  </li>
                            </ul>
                        <li class="flip-container-main-menu-parent" id="flip-main-four"onclick="displaySubMenu(4);rotateIcon(4);"><i class="flip-menu-main-icon fa fa-align-justify"></i><span class="flip-menu-text">Widjet</span></li>
                     </ul>
                    
                </div>