Задать вопрос
@zaebulochka
css

Не видимая мне ошибка в коде выпадающего меню?

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Index</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #nav {
            height: 70px;
        }

        #nav ul {
            list-style: none;
        }

        #nav>ul>li {
            float: left;
            width: 180px;
            position: inherit;
        }

        #nav li a {
            display: block;
            background: #d3d3d3;
            border: 2px solid #010101;
            border-radius: 6px;
            color: #868991;
            padding: 8px;
            text-decoration: none;

        }

        #nav li a:hover {
            background: #d3d3d3;
        }

        #nav li .menu {
            display: none;
            position: absolute;
            top: 100%;
        }

        #nav li:hover .menu {
            display: inline-block;
        }
    </style>
</head>

<body>
    <nav id="nav">
        <ul>
            <li><a href="#">Понедельник</a></li>
            <li><a href="#">Вторник</a></li>
            <li><a href="#">Среда</a>
                <ul class="menu">
                    <li><a href="#">Завтрак</a></li>
                    <li><a href="#">Обед</a></li>
                    <li><a href="#">Ужин</a></li>
                </ul>
            </li>
            <li><a href="#">Четверг</a></li>
            <li><a href="#">Пятница</a></li>
        </ul>
    </nav>


</body>

</html>


Все отлично в коде, кроме того, что не работает выпадающее меню. Я уже голову сломала в поиске. Очень нужна помощь!
  • Вопрос задан
  • 87 просмотров
5 комментариев
Подписаться 1 Простой 5 комментариев
Ответ пользователя UthvfyV К ответам на вопрос (1)
@UthvfyV 
ul {
margin: 0;
padding: 0;
list-style: none;
width: 30%; 
display: block;
border-bottom: 1px solid #ccc;
}
ul li {
display: block;
width: 100%;
position: relative;
border-bottom: none;
border: 1px solid #ccc;
}
 li ul {
position: absolute;
left: 100%;
top: 0;
width: 75%;
display: none;
}
ul li a {
display: block; text-decoration: none; color: #777;
font-size: 16px;
background: #fff;
padding: 5px;
}
ul li a:hover {
color: #E2144A; background: #f9f9f9;
}
li:hover ul {
display: block;
}
.nav {
margin-top: 10px;
}

Диета 2
<ul class="nav" id="nav">
<li><a href="#">Понедельник</a>
<ul><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>
</ul></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="#">Ужин</a></li></ul></li>
<li><a href="#">Пятница</a>
<ul>
<li><a href="#">Голодовка</a></li></ul></li></ul>

<script>
startList=function(){var nodes=document.getElementById("nav").getElementsByTagName("LI");for(var i=0;i nodes[i].onmouseover=function(){this.className+=" over";}
nodes[i].onmouseout=function(){this.className=this.className.replace(new RegExp(" over\\b"),"");}}}
if(window.attachEvent)window.attachEvent("onload",startList);
</script>
Ответ написан
Комментировать
Комментировать