JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="menu1">
     <li> <div class="pravo">
             <div id="tbl">
             ПРАВОВЫЕ СИСТЕМЫ
             </div>
            <div id="img-c">
                    <div id="law">
                     </div>
            </div>
    </div>

 <ul>
  <li><a href="file:///\\****.ru\***ot\SH***\P**e\G*****an*\
garant.exe">Гарант</a></li>
  <li><a href="file:///\\****.ru\***ot\SH***\P**e\K**d****s\
kodweb.exe">Кодекс</a></li>
  <li><a href="file:///\\****.ru\***ot\SH***\P**e\Con****\
cons.exe">Консультант проф</a></li>
  <li><a href="file:///\\****.ru\***ot\SH***\P**e\CR***\
cons.exe">Консультант регион</a></li>
  <li><a href="http://ls**10*.****.ru/">WWW- Кодекс</a></li>
 </ul>
 </li>
</ul>

CSS

.pravo {
  BACKGROUND: #ccf934;
  display: block;
  width: 322px;
  height: 142px;
 }

#menu1 li:hover .pravo, .pravo:hover {
    background: #cdd456;
}

#tbl {
        width: auto;
        height: auto;
        padding: 10px 0 0 10px;
        font-family: Arial;
        font-size: 15pt;
        color: #fff
}
#law {
       background: url('http://www.sugaroom.ru/img_tovar/2862.jpg') no-repeat;
        width: 90px;
        height:90px;
        }

#img-c {
          width: 90px;
          height:90px;
          padding:0 0 0 212px;
}

#menu1{
    list-style:none;
    padding:0;
    margin:0;
}
#menu1 li{
    float:left;
    position:relative;

}
#menu1 li ul{
    list-style:none;
    padding0:0;
    margin:120px 0 0 -40px;
    width:322px;
    position:absolute;
    left:0;
    top:20px;
    display: none;
}
#menu1 li ul li{
    float:none;
    height:20px;
    margin:0;
    width:322px;
    font-weight: bold;
    text-align:center;
    BACKGROUND: #340cdf;

}
#menu1 li a{
    display:block;
    width:322px;
    height:auto;
}
#menu1 li:hover ul{
    display:block;
}
#menu1 li:hover{
    background:#00cc00;
}