Это html:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8"/>
<link href="menushechka.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="node_modules/jquery/dist/jquery.min.js"></script>
<script type="text/javasript" src="menushechka.js" ></script>
<title>Навигация</title>
</head>
<body>
<nav>
<ul id="ddmenu">
<li><a href="#">Главная</a></li>
<li><a href="#">О нас</a>
<ul>
<li><a href="#">Миссия</a></li>
<li><a href="#">Команда</a></li>
<li><a href="#">История</a></li>
</ul>
</li>
<li><a href="#">Продукты</a>
<ul>
<li><a href="#">Логитипы</a></li>
<li><a href="#">Шаблоны</a></li>
<li><a href="#">Иконки</a></li>
<li><a href="#">Плагины jQuery</a></li>
<li><a href="#">маркетинг Internet</a></li>
</ul>
</li>
<li><a href="#">Интернационализация</a>
<ul>
<li><a href="#">Китай</a></li>
<li><a href="#">Япония</a></li>
<li><a href="#">Канада</a></li>
<li><a href="#">Автсралия</a></li>
<li><a href="#">Южная Америка</a></li>
</ul>
</li>
<li><a href="#">Контакты</a></li>
</ul>
</nav>
</body>
</html>
Мой css:
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
outline: none;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html { height: 101%; }
body { background: #eaeaea url('images/bg.png'); font-size: 62.5%; line-height: 1; font-family: Arial, Tahoma, sans-serif; padding-bottom: 60px; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
strong { font-weight: bold; }
table { border-collapse: collapse; border-spacing: 0; }
img { border: 0; max-width: 100%; }
#ddmenu {
display: block;
width: 100%;
height: 80px;
margin: 0 auto;
padding: 0 15px;
background: #fff;
border-radius: 6px;
border: 1px solid rgba(0, 0, 0, 0.15);
box-shadow: 0 1px 1px rgba(20, 20, 20, 0.2);
cursor: pointer;
outline: none;
font-weight: bold;
color: #8aa8bd;
}
#ddmenu li { display: block; position: relative; float: left; font-size: 1.45em; text-shadow: 1px 1px 0 #fff; border-right: 1px solid #dae0e5; }
#ddmenu li a {
display: block;
float: left;
padding: 0 12px;
line-height: 78px;
font-weight: bold;
text-decoration: none;
color: #6c87c0;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transitio: all 0.2s linear;
}
#ddmenu li:hover > a { color: #7180a0; background: #d9e2ee; }
#ddmenu ul {
position: absolute;
top: 88px;
width: 130px;
background: #fff;
display: none;
margin: 0;
padding: 7px 0;
list-style: none;
border-radius: 3px;
border: 1px solid rgba(0, 0, 0, 0.2);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}
#ddmenu ul:after {
content: "";
width: 0;
height: 0;
position: absolute;
bottom: 100%;
left: 8px;
border-width: 0 8px 8px 8px;
border-style: solid;
border-color: #fff transparent;
}
#ddmenu ul:before {
content: "";
width: 0;
height: 0;
position: absolute;
bottom: 100%;
left: 4px;
border-width: 0 10px 10px 10px;
border-style: solid;
border-color: rgba(0, 0, 0, 0.1) transparent;
}
#ddmenu ul li {
display: block;
width: 100%;
font-size: 0.9em;
text-shadow: 1px 1px 0 #fff;
}
#ddmenu ul li a {
display: block;
width: 100%;
padding: 6px 7px;
line-height: 1.4em;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
}
#ddmenu ul li a:hover {
background: #e9edf3;
}
$(document).ready(function(){
$('a').on('click', function(e){
e.preventDefault();
});
$('#ddmenu li').hover(function () {
clearTimeout($.data(this,'timer'));
$('ul',this).stop(true,true).slideDown(200);
}, function () {
$.data(this,'timer', setTimeout($.proxy(function() {
$('ul',this).stop(true,true).slideUp(200);
}, this), 100));
});
});
P.S.: путь до jQuery я указал, согласно официальному сайту. Цитирую:"This will install jQuery in the node_modules directory. Within node_modules/jquery/dist/ you will find an uncompressed release, a compressed release, and a map file." Указал тот , что compressed.
