JSFiddle - React, Tailwind, and code Playground

by nikolya223

HTML

<head>
<title>В Меню - Никита))</title>


<link rel="stylesheet" href="menu.css" type="text/css"></link>


<script type="text/javascript">

     
          $(function(){
            $('#nav li').hover(function(){
                  $(this).children('ul').stop(false, true).fadeIn(300);
      },function(){
                  $(this).children('ul').stop(false, true).fadeOut(300);
            });

        });

        
        

</script>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"
></script>


</head>

<body>

<nav>

<ul id="nav">

<li><a href="#" id="a">Главная</a></li>
<li><a href="#" id="a">Скачать
<ul id="y">
<li><a href="#" id="a">Картинки</a></li>
<li><a href="#" id="a">Видео</a></li>
<li><a href="#" id="a">Музыка</a></li>
</ul>
</li>
<li><a href="#" id="a">Обратная связь</a></li>

</ul>

</nav>

</body>

CSS

#nav
{
 margin: 30px;
}


li
{
 float: left;
 list-style: none;
 width: 150px;
}
#nav ul
{
 display: none;
}






#a
{
 text-decoration: none;
 background: #0000cc;
 padding: 15px;
 text-align: center;
 color: #ccc;
 display: block;
 margin: 3px;
 border-radius: 5px;
}

#a:hover
{
 background: #6666ff;
 color: white;
}