I can not change the background color

Navigation
1

I'm developing a web application and I would like that when I hover over the menu, the menu item with the icon and the left and right side of the menu will remain white, but it only stays one part.

Application

Link to app as error

    
asked by anonymous 23.01.2018 / 04:36

1 answer

1

Your CSS had a lot of things to do, including all of the% as you put it apart from the Ex:

Ex :hover this is wrong! It should be a :hover (note that the : has no space)

This CSS is not perfect, I tried to move as little as possible in your classes so you can read later and understand and be able to study what I did etc. Even though I strongly recommend you to take a good look at CSS, because the way everything was set up is not the best ...

  • This should solve your problem by running the Snippet;

OBS: I just did the "T-Shirts" menu, the rest you doing and seeing how it was mounted. 

@-webkit-keyframes moveFromLeftRotate{
    from {
        -webkit-transform: translateX(-100%) rotate(-90deg);
    }
    to {
        -webkit-transform: translateX(0%) rotate(0deg);
    }
}
@-moz-keyframes moveFromLeftRotate{
    from {
        -moz-transform: translateX(-100%) rotate(-90deg);
    }
    to {
        -moz-transform: translateX(0%) rotate(0deg);
    }
}
@-ms-keyframes moveFromLeftRotate{
    from {
        -ms-transform: translateX(-100%) rotate(-90deg);
    }
    to {
        -ms-transform: translateX(0%) rotate(0deg);
    }
}
ul li {
    list-style: none;
    display: flex;
}
.nano-content a:hover .teste{
     background-color: #fff;
     padding: 10px;
     text-decoration: underline;
     cursor: pointer;
    -webkit-animation: moveFromLeftRotate 300ms ease;
    -moz-animation: moveFromLeftRotate 300ms ease;
    -ms-animation: moveFromLeftRotate 300ms ease;
}

.nano-content a:hover {
     font-size: 13pt;
     color:rgb(37, 37, 170);
}
.nano-content a:hover i {
     display: none;
}
            
.nano-content {
    margin-left: 20px;
    font-size: 12pt;
    font-family: Arial, Helvetica, sans-serif;
}
            
#lateral{
    float:left;     
    padding: 5px; 
    width: 35%; 
    height: 100%;
    overflow:auto; 
    background-color: #00008B;
    margin-top: 35px;
    color:#fff;
}

a:visited {
    color: #fff;
}
<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<aside id="lateral">

    <div id="lado_esquerdo_menu" class="nano">
        <ul class="nano-content">
        <li>
            <a href="index.html"><span id="home">HOME</span></a><br><br>
        </li>
        <li>
            <a>
            <div class="teste">
            <i class="arrow fa fa-angle-right "></i>
            Camisetas </div></a><br><br>
            
            
        </li>
        <li >
            <a><i class="arrow fa fa-angle-right "></i> Calçados</a><br><br>
            
        </li>
        <li >
            <a><i class="arrow fa fa-angle-right "></i> Bermudas</a><br><br>
        
        </li>
        
            <li>
            <a><i class="arrow fa fa-angle-right "></i> Contato</a>
        
        </li>
    
        </ul>
    </div>
    
</aside>
    
23.01.2018 / 12:44
Identify the position of the first empty cell Dictionarystring, string or NameValueCollection?