Простое и эффектное выпадающее меню на jQuery и CSS3

<!doctype html>
<html lang="ru-RU">
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
  <title>Горизонтальная навигационная панель | Материалы сайта RUSELLER.COM</title>
  <link rel="stylesheet" type="text/css" media="all" href="/styles.css">
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>

<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>

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;
  transition: 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;
}

<script type="text/javascript">
$(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));
  });

});
</script>

Мы создаем практически любые сайты от продающих страниц до сложных, высоконагруженных и нестандартных веб приложений! Наши сайты это надежные маркетинговые инструменты для успеха Вашего бизнеса и увеличения вашей прибыли! Мы делаем красивые и максимально эффектные сайты по доступным ценам уже много лет!

Что нужно сделать, чтобы заказать создание сайта у нас?

Ну для начала вам нужно представлять (хотя бы в общих чертах), что вы хотите получить от сайта и возможно каким вы хотите его видеть. А дальше все просто. Позвоните нам или оставьте заявку нашим менеджерам, чтобы они связались с Вами, проконсультировали и помогли определиться с подходящим именно Вам сайтом по цене, сроку, дизайну или функционалу. Если вы все ещё не уверены, какой сайт вам нужен, просто обратитесь к нам! Мы вместе проанализируем вашу ситуацию и определим максимально эффективный для вас вариант.

Для всех тарифных планов на создание и размещение сайтов включено:

• Создание сайта cо всем необходимым прикладным функционалом. В дальнейшем все сайты можно развивать и расширять функционал под ваши нужды.
• ИНДИВИДУАЛЬНЫЙ дизайн по вашим пожеланиям. Современный дизайн главной и внутренних страниц сайта. Высокопрофессиональная, адаптивная и кроссбраузерная верстка с учетом всех требований юзабилити и адаптивности к различным браузерам и устройствам.
• Создание структуры сайта. Предварительное наполнение его информацией.
• Возможность создания НЕОГРАНИЧЕННОГО количества разделов и страниц на сайте.
• Базовая SEO оптимизация сайта для поисковых систем и юзабилити оптимизация для пользователей при разработке и запуске.
• SEO-ИНСТРУМЕНТЫ для продвижения вашего сайта в системе управления.
• Регистрация сайта в поисковых системах и установка систем сбора статистики и аналитики.
• Регистрация уникального доменного имени.
• Размещение сайта в Интернете сроком на 1 календарный год (Хостинг сайта, предоставление системы управления сайтом (кроме "сайта-страницы" и "посадочной страницы"), регистрация доменного имени сроком на 1 календарный год).
• Гарантийная техническая поддержка сайта. И бонусные бесплатные часы работы наших специалистов: контент-менеджеров и программистов.
• Техническая поддержка и консультационная поддержка проекта в неограниченном объеме.
• Поддержка постоянной работоспособности и безопасности сайта.
• Защита от вирусов и DDos атак. Проверка на вирусы.
• Неограниченный трафик. Неограниченный трафик не распространяется на сайты файловых архивов (графических, музыкальных, программных)
• Почтовый сервис: Защита от вирусов, спам-фильтры. Почтовые ящики, возможно подключение к сайту Веб почты Яндекс или Mail.ru...
• Резервное копирование сайтов и возможность их оперативного восстановления.
• И многое многое другое...
• Мы предлагаем действительно КОМПЛЕКСНЫЕ РЕШЕНИЯ по разработке веб-ресурсов, а также последующего ведения и развития вашего бизнеса в онлайне.
  Вы платите один раз и получаете готовый инструмент для развития вашего бизнеса и продаж в Интернете!

Комплексный подход это не просто продвижение сайта, это целый комплекс мероприятий, который определяется целями и задачами поставленными перед сайтом и организацией, которая за этим стоит. Время однобоких методов в продвижении сайтов уже прошло, конкуренция слишком высока, чтобы была возможность расслабиться и получать \ удерживать клиентов из Интернета, просто сделав сайт и не занимаясь им...

Комплексная раскрутка работает в рамках стратегии развития вашего бизнеса в сети и направлена

• на увеличение продаж,
• улучшение имиджа компании на рынке,
• корректирование бренда в глазах потребителей и повышение его узнаваемости.

ЭФФЕКТИВНОЕ СОПРОВОЖДЕНИЕ (ПОДДЕРЖКА, ОБСЛУЖИВАНИЕ) САЙТОВ

Мы оказываем полный комплекс услуг по сопровождению сайта: информационному и техническому обслуживанию и развитию Интернет сайтов.

Передав свой сайт для поддержки в руки наших специалистов, Вы избавитесь от проблем, связанных с обновлением информации и контролем за работой ресурса.

Наша компания осуществляет техническую и информационную поддержку уже имеющихся сайтов. В понятие «поддержка сайтов» также входят услуги администрирования сайтов, обновления сайтов и их модернизация.

Современный, технологичный, кроссбраузерный ... Профессиональный дизайн сайтов и веб-приложений

Редизайн сайта — создание нового дизайна сайта с целью улучшения внешнего вида, функциональности и удобства использования. Редизайн сайта – это способ преобразовать проект к извлечению из него максимальной отдачи и средств. В современном мире задачами редизайна является поднятие существующего сайта на новый уровень для внедрения новых технологий, при этом сохраняя многолетний сформировавшийся опыт и успешные решения компаний.

Адаптивный дизайн сайтов и веб-приложений

Все больше людей пользуются мобильными устройствами (телефонами, планшетами и прочими) для посещения Интернета, это не для кого уже не новость. Количество таких людей в процентном отношении будет только больше с каждым годом, потому что это удобно и по многим другим причинам.

На сегодняшний день адаптивный дизайн является стандартным подходом при разработке новых сайтов (или веб-приложений) и в идеале ваш сайт должен смотреться и функционировать так, как вы задумывали, на всём разнообразии устройств.

Контекстная реклама - это эффективный инструмент в интернет маркетинге, целью которого является увеличение продаж. Главный плюс контекстной рекламы заключается в том, что она работает избирательно.

Реклама в поисковых системах Яндекс и Google. Профессиональная настройка рекламы и отслеживание эффективности!

Рекламные объявления показываются именно тем пользователям, которые ищут информацию о Ваших товарах или услугах, поэтому такая реклама не является навязчивой и раздражающей в отличие от других видов рекламы, с которыми мы сталкиваемся на телевидении или радио. Контекстная реклама нацелена лишь на тех пользователей, которые непосредственно заинтересованы в рекламе Ваших услуг или товаров.