UI Web Dev: выпадающее меню без JavaScript со встроенным CSS - Почему мое меню не отображается? - PullRequest
0 голосов
/ 24 марта 2020

надеюсь, у вас все хорошо.

Мне нужно создать выпадающее меню с JavaScript и чистым встроенным кодом CSS. И это не покажет. Я не могу найти свою ошибку и мне нужна помощь с отладкой.

Вот код, который я написал

 <html>

<head>
  <meta charset="UTF-8">
  <title>Test</title>
  <link href="https://fonts.googleapis.com/css?family=PT+Serif&display=swap" rel="stylesheet">
      <style type="text/css">

</style>
</head>
<body style="background-color:#FFFFFF;background-image:none;background-repeat:repeat;background-position:top left;background-attachment:scroll;font-size:22px;line-height:10px;font-family:'PT Serif', serif;margin-top:0;margin-bottom:0;margin-right:0;margin-left:0;padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;" >

<div id="container" style="margin-top:0;margin-bottom:0;margin-right:auto;margin-left:auto;" >
    <nav style="margin-top:0px;margin-bottom:0px;margin-right:0;margin-left:0;background-color:#FFFFFF;" >
        <ul style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;margin-top:0;margin-bottom:0;margin-right:0;margin-left:0;list-style-type:none;list-style-position:outside;list-style-image:none;" >
            <li style="width:600px;display:inline-block;background-color:#FFFFFF;" ><a href="#" style="display:block;padding-top:0;padding-bottom:0;padding-right:10px;padding-left:10px;color:#000000;font-size:15px;line-height:25px;text-decoration:none;" >Home</a>
            <ul style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;margin-top:0;margin-bottom:0;margin-right:0;margin-left:0;list-style-type:none;list-style-position:outside;list-style-image:none;display:none;position:absolute;top:25px;" >
                <li style="background-color:#FFFFFF;width:600px;float:none;display:list-item;position:relative;border-width:1px;border-style:solid;border-color:white;" ><a href="#" style="display:block;padding-top:0;padding-bottom:0;padding-right:10px;padding-left:10px;color:#000000;font-size:15px;line-height:25px;text-decoration:none;" >Link 1</a></li>
                <li style="background-color:#FFFFFF;width:600px;float:none;display:list-item;position:relative;border-width:1px;border-style:solid;border-color:white;" ><a href="#" style="display:block;padding-top:0;padding-bottom:0;padding-right:10px;padding-left:10px;color:#000000;font-size:15px;line-height:25px;text-decoration:none;" >Link 2</a></li>
                <li style="background-color:#FFFFFF;width:600px;float:none;display:list-item;position:relative;border-width:1px;border-style:solid;border-color:white;" ><a href="#" style="display:block;padding-top:0;padding-bottom:0;padding-right:10px;padding-left:10px;color:#000000;font-size:15px;line-height:25px;text-decoration:none;" >Link 3</a></li>
                <li style="background-color:#FFFFFF;width:600px;float:none;display:list-item;position:relative;border-width:1px;border-style:solid;border-color:white;" ><a href="#" style="display:block;padding-top:0;padding-bottom:0;padding-right:10px;padding-left:10px;color:#000000;font-size:15px;line-height:25px;text-decoration:none;" >Link 4</a></li>
                <li style="background-color:#FFFFFF;width:600px;float:none;display:list-item;position:relative;border-width:1px;border-style:solid;border-color:white;" ><a href="#" style="display:block;padding-top:0;padding-bottom:0;padding-right:10px;padding-left:10px;color:#000000;font-size:15px;line-height:25px;text-decoration:none;" >Link 5</a></li>
                <li style="background-color:#FFFFFF;width:600px;float:none;display:list-item;position:relative;border-width:1px;border-style:solid;border-color:white;" ><a href="#" style="display:block;padding-top:0;padding-bottom:0;padding-right:10px;padding-left:10px;color:#000000;font-size:15px;line-height:25px;text-decoration:none;" >Link 6</a></li>
            </ul>
            </li>
    </nav>

</div>

</body>
</html>

Спасибо всем заранее

...