Задать вопрос
@svilkov87
javascript

Почему меню не выпадает?

всем привет. не получается простейшее выпадающее меню на jquery. Посмотрите, пжл, код. Помогите разобраться в проблеме:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="styles/main.css">
    <script type="text/javascript" src="js/script.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

</head>
<body>
    <ul>
        <li><a href="#">home</a>
        <ul>
            <li><a href="#">link1</a></li>
            <li><a href="#">link2</a></li>
            <li><a href="#">link3</a></li>
            <li><a href="#">link4</a></li>
        </ul>
        </li>
        <li><a href="#">about us</a>
        <ul>
            <li><a href="#">link1</a></li>
            <li><a href="#">link2</a></li>
            <li><a href="#">link3</a></li>
            <li><a href="#">link4</a></li>
        </ul>    
        </li>
        <li><a href="#">servises</a></li>
        <li><a href="#">faqs</a></li>
        <li><a href="#">contact us</a></li>
    </ul>
</body>
</html><code lang="css">

</code>
ul{
    margin: 0;
    padding: 0;
    list-style: none;
}

ul li{
    float: left;
    width: 150px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background: #ff0000;
    
}

ul li a{
    text-decoration: none;
    color: aliceblue;
}

ul li ul{
    background: #ff0000;
    color: #fff;
    display: none;
}

ul li li a{
    text-decoration: none;
    display: block;
}
ul li li:hover{
    background: #555;
}


$(function(){
$('li').hover(function(){
    $(this).children('ul').stop(false, true).fadeIn(300);
},function(){
    $(this).children('ul').stop(false, true).fadeOut(300);
});
});
  • Вопрос задан
  • 285 просмотров
Комментировать
Подписаться 1 Оценить Комментировать
Пригласить эксперта
Ответы на вопрос 4
@Romanssski
jquery первым в списке подключите
Ответ написан
2 комментария
2 комментария
OuroborosSK
@OuroborosSK
Линуксоид, Мозилец.
Честно говоря, сделал html, для решения вашей проблемы и меню выпадает.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="styles/main.css">
    <script type="text/javascript" src="js/script.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

</head>
<body>
<script>
$(function(){
$('li').hover(function(){
    $(this).children('ul').stop(false, true).fadeIn(300);
},function(){
    $(this).children('ul').stop(false, true).fadeOut(300);
});
});
</script>
<style>
ul{
    margin: 0;
    padding: 0;
    list-style: none;
}

ul li{
    float: left;
    width: 150px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background: #ff0000;
    
}

ul li a{
    text-decoration: none;
    color: aliceblue;
}

ul li ul{
    background: #ff0000;
    color: #fff;
    display: none;
}

ul li li a{
    text-decoration: none;
    display: block;
}
ul li li:hover{
    background: #555;
}
</style>
    <ul>
        <li><a href="#">home</a>
        <ul>
            <li><a href="#">link1</a></li>
            <li><a href="#">link2</a></li>
            <li><a href="#">link3</a></li>
            <li><a href="#">link4</a></li>
        </ul>
        </li>
        <li><a href="#">about us</a>
        <ul>
            <li><a href="#">link1</a></li>
            <li><a href="#">link2</a></li>
            <li><a href="#">link3</a></li>
            <li><a href="#">link4</a></li>
        </ul>    
        </li>
        <li><a href="#">servises</a></li>
        <li><a href="#">faqs</a></li>
        <li><a href="#">contact us</a></li>
    </ul>
</body>
</html>
Ответ написан
Комментировать
Комментировать
frost18
@frost18
Программист PHP
jsfiddle.net/c0zcq32L
Вроде работает ваш код
Ответ написан
3 комментария
3 комментария
zloycoder
@zloycoder
Разработка веб-сайтов на заказ
Что конкретно не получается?
По Вашему коду я вижу, что все работает :)
Ответ написан
1 комментарий
1 комментарий
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
JavaScript Fullstack
OnClass
от 2 000 до 7 000 $
JavaScript FullStack developer
Wanted. • Санкт-Петербург
До 220 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Разработать телеграм бота с реферальной системой, Юкассой и ChatGPT
23 дек. 2024, в 02:13
20000 руб./за проект
Собрать из исходного кода и запустить в докере рабочее приложение с бд
22 дек. 2024, в 22:57
500 руб./за проект
Аппликация для фильтра заказов
22 дек. 2024, в 20:40
10000 руб./за проект
Ещё заказы