Меню закрывает собой Login

@BlenderHTML · Регистрация: 30.01.2020

Author24 — интернет-сервис помощи студентам

Как сделать так что бы меню не закрывало собой логин,и переместить логин в право?

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZUGmarket</title>
<style>
#navbar ul{
display: none;
background-color: #f90;
position: absolute;
top: 100%;
}
#navbar li:hover ul { display: block; }
#navbar, #navbar ul{
margin: 0;
padding: 0;
list-style-type: none;
}
#navbar {
height: 30px;
background-color: #666;
padding-left: 25px;
min-width: 470px;
}
#navbar li {
float: left;
position: relative;
height: 100%;
}
#navbar li a {
display: block;
padding: 6px;
width: 310px;
color: #fff;
text-decoration: none;
text-align: center;
}
#navbar ul li { float: none; }
#navbar li:hover { background-color: #f90; }
#navbar ul li:hover { background-color: #666; }

#navbar {
position: fixed; /* Фиксированное положение */
left: 0; bottom: 627px; /* Левый нижний угол */
width: 100%; /* Ширина слоя */
}

///////ww

body {font-family: Arial, Helvetica, sans-serif;}

/* Full-width input fields */
input[type=text], input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}

/* Set a style for all buttons */
button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
}

button:hover {
opacity: 0.8;
}

/* Extra styles for the cancel button */
.cancelbtn {
width: auto;
padding: 10px 18px;
background-color: #f44336;
}

/* Center the image and position the close button */
.imgcontainer {
text-align: center;
margin: 24px 0 12px 0;
position: relative;
}

img.avatar {
width: 40%;
border-radius: 50%;
}

.container {
padding: 16px;
}

span.psw {
float: right;
padding-top: 16px;
}

/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
padding-top: 60px;
}

/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
border: 1px solid #888;
width: 80%; /* Could be more or less, depending on screen size */
}

/* The Close Button (x) */
.close {
position: absolute;
right: 25px;
top: 0;
color: #000;
font-size: 35px;
font-weight: bold;
}

.close:hover,
.close:focus {
color: red;
cursor: pointer;
}

/* Add Zoom Animation */
.animate {
-webkit-animation: animatezoom 0.6s;
animation: animatezoom 0.6s
}

@-webkit-keyframes animatezoom {
from {-webkit-transform: scale(0)}
to {-webkit-transform: scale(1)}
}

@keyframes animatezoom {
from {transform: scale(0)}
to {transform: scale(1)}
}

/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
span.psw {
display: block;
float: none;
}
.cancelbtn {
width: 100%;
}
}

</style>
</head>

<body>

<ul id="navbar">
<li><a href="">Главная</a></li>
<li><a href="">Список товаров</a></li>
<li><a>Контакты</a>
<ul>
<li><a href="">Адрес</a></li>
<li><a href="">Телефон</a></li>
<li><a href="">Email</a></li>
</ul>
</li>
</ul>

<a href="file:///C:/Users/user/Desktop/mysite/ZUGreg.html"><button onclick="document.getElementById('id01').style.display='block'" style="width:auto;">Вход/Регистрация</button></a>

</body>
</html>

@BlenderHTML 0 / 0 / 0 Регистрация: 30.01.2020 Сообщений: 2
		1
	Меню закрывает собой Login 31.01.2020, 22:17. Показов 609. Ответов 0 Метки css, html (Все метки) Как сделать так что бы меню не закрывало собой логин,и переместить логин в право? <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ZUGmarket</title> <style> #navbar ul{ display: none; background-color: #f90; position: absolute; top: 100%; } #navbar li:hover ul { display: block; } #navbar, #navbar ul{ margin: 0; padding: 0; list-style-type: none; } #navbar { height: 30px; background-color: #666; padding-left: 25px; min-width: 470px; } #navbar li { float: left; position: relative; height: 100%; } #navbar li a { display: block; padding: 6px; width: 310px; color: #fff; text-decoration: none; text-align: center; } #navbar ul li { float: none; } #navbar li:hover { background-color: #f90; } #navbar ul li:hover { background-color: #666; } #navbar { position: fixed; /* Фиксированное положение / left: 0; bottom: 627px; / Левый нижний угол / width: 100%; / Ширина слоя / } ///////ww body {font-family: Arial, Helvetica, sans-serif;} / Full-width input fields / input[type=text], input[type=password] { width: 100%; padding: 12px 20px; margin: 8px 0; display: inline-block; border: 1px solid #ccc; box-sizing: border-box; } / Set a style for all buttons / button { background-color: #4CAF50; color: white; padding: 14px 20px; margin: 8px 0; border: none; cursor: pointer; width: 100%; } button:hover { opacity: 0.8; } / Extra styles for the cancel button / .cancelbtn { width: auto; padding: 10px 18px; background-color: #f44336; } / Center the image and position the close button / .imgcontainer { text-align: center; margin: 24px 0 12px 0; position: relative; } img.avatar { width: 40%; border-radius: 50%; } .container { padding: 16px; } span.psw { float: right; padding-top: 16px; } / The Modal (background) / .modal { display: none; / Hidden by default / position: fixed; / Stay in place / z-index: 1; / Sit on top / left: 0; top: 0; width: 100%; / Full width / height: 100%; / Full height / overflow: auto; / Enable scroll if needed / background-color: rgb(0,0,0); / Fallback color / background-color: rgba(0,0,0,0.4); / Black w/ opacity / padding-top: 60px; } / Modal Content/Box / .modal-content { background-color: #fefefe; margin: 5% auto 15% auto; / 5% from the top, 15% from the bottom and centered / border: 1px solid #888; width: 80%; / Could be more or less, depending on screen size / } / The Close Button (x) / .close { position: absolute; right: 25px; top: 0; color: #000; font-size: 35px; font-weight: bold; } .close:hover, .close:focus { color: red; cursor: pointer; } / Add Zoom Animation / .animate { -webkit-animation: animatezoom 0.6s; animation: animatezoom 0.6s } @-webkit-keyframes animatezoom { from {-webkit-transform: scale(0)} to {-webkit-transform: scale(1)} } @keyframes animatezoom { from {transform: scale(0)} to {transform: scale(1)} } / Change styles for span and cancel button on extra small screens */ @media screen and (max-width: 300px) { span.psw { display: block; float: none; } .cancelbtn { width: 100%; } } </style> </head> <body> <ul id="navbar"> <li><a href="">Главная</a></li> <li><a href="">Список товаров</a></li> <li><a>Контакты</a> <ul> <li><a href="">Адрес</a></li> <li><a href="">Телефон</a></li> <li><a href="">Email</a></li> </ul> </li> </ul> <a href="file:///C:/Users/user/Desktop/mysite/ZUGreg.html"><button onclick="document.getElementById('id01').style.display='block'" style="width:auto;">Вход/Регистрация</button></a> </body> </html> 0

	31.01.2020, 22:17