0
Так что у меня проблемы с шириной выпадающего эффекта зависания, что делает его подходящим и центрированным под кнопкой меню. Справа от страницы это слишком много.Имея проблемы с шириной и центрированием с помощью моего меню навигации по раскрывающимся меню
Я пробовал несколько вещей, чтобы заставить его работать, но, похоже, я неразумный, поэтому я обращаюсь к этому сообществу, ища помощь. Если вы заметите какие-либо другие проблемы с кодом, пожалуйста, скажите мне, я ценю это много.
PS: Трудно было объяснить мою проблему, но если у вас есть опыт работы с кодом и посмотрите в мой, вы, вероятно, поймете, в чем моя проблема.
html, body { margin: 0; padding: 0; }
@font-face {
font-family: 'drugsregular';
src: url('font1/drugs-webfont.eot');
src: url('font1/drugs-webfont.eot?#iefix') format('embedded-opentype'),
url('font1/drugs-webfont.woff2') format('woff2'),
url('font1/drugs-webfont.woff') format('woff'),
url('font1/drugs-webfont.ttf') format('truetype'),
url('font1/drugs-webfont.svg#drugsregular') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'birds_of_paradiseregular';
src: url('font2/birds_of_paradise__personal_use_only.eot');
src: url('font2/birds_of_paradise__personal_use_only.eot?#iefix') format('embedded-opentype'),
url('font2/birds_of_paradise__personal_use_only.woff2') format('woff2'),
url('font2/birds_of_paradise__personal_use_only.woff') format('woff'),
url('font2/birds_of_paradise__personal_use_only.ttf') format('truetype'),
url('font2/birds_of_paradise__personal_use_only.svg#birds_of_paradiseregular') format('svg');
font-weight: normal;
font-style: normal;
}
a {
text-decoration: none;
}
p {
font-family: 'drugsregular';
font-size: 16px;
text-align: justify;
color: #E6E6E6;
}
p2 {
font-family: 'drugsregular';
font-size: 16px;
color: black;
text-align: center;
}
h1 {
font-family: 'birds_of_paradiseregular';
font-size: 26px;
text-align: center;
color: white;
}
h2 {
font-family: 'drugsregular';
font-size: 16px;
color: white;
padding-top: 8px;
padding-left: 19px;
height: 32px;
}
h3 {
font-family: 'birds_of_paradiseregular';
font-size: 20px;
text-align: center;
}
h4 {
font-family: 'birds_of_paradiseregular';
font-size: 20px;
text-align: center;
color: black;
}
.Header {
background-color: white;
width: 100%;
height: 60px;
box-shadow: 0px 2px 1px #686868;
}
.Menu {
padding-right: 10px;
height: 100px;
width: 1024px;
float:right;
font-family: 'birds_of_paradiseregular';
font-size: 20px;
text-align: center;
}
.Menu ul {
display: none;
position: absolute;
top: 44px;
}
.Menu li {
margin:0 auto;
float:right;
display: inline-block;
width: 90px;
padding-right: 20px;
}
.Menu li:hover > ul {
margin:0 auto;
display: block;
width: 90px;
padding-top: 16px;
background-color: white;
font-family: 'drugsregular';
font-size: 14px;
padding-right: 20px;
}
.Menu a {
padding: 15px 10px 0px 10px;
text-decoration:none;
height: 40px;
display: block;
}
.Menu a:hover {
background-color: #E6E6E6;
}
.Logo {
float:left;
padding-left: 20px;
padding-top: 8px;
}
.container1 {
height: 400px;
}
.title {
width: 665px;
padding-top: 170px;
margin: 0 auto;
}
.bkimage1 {
background-image:url('images/bkimage1.jpg');
background-repeat: no-repeat;
background-size: cover;
height: 720px;
}
.lasmer {
background-color: #424242;
height: 40px;
width: 100px;
margin: 0 auto;
}
.lasmer :hover {
background-color: #ec4e8c;
height: 32px;
}
.content {
margin: 0 auto;
width: 900px;
}
.firsti {
}
.firstp {
padding-top: 50px;
width: 520px;
height: 380px;
margin: 0 auto;
}
.container2 {
height: 720px;
}
.bkimage2 {
height: 720px;
background-image: url(images/bkimage2.jpg);
background-repeat: no-repeat;
background-size: cover;
}<!DOCTYPE html>
<html>
<head>
<link href="css/style.css" rel="stylesheet">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>Name - Start</title>
</head>
<body>
<div class="Header">
<div class="Logo">
<img src="images/royalq2.png">
</div>
<div class="Menu">
<nav>
<li><a href="#">Menu</a>
<ul>
<li><a href="kontakt.html">Web Shop</a></li>
<li><a href="kontakt.html">Kontakt</a></li>
</ul>
</li>
</nav>
</div>
</div>
<div class="container1">
<div class="bkimage1">
<div class="title">
<h1>
Royal Q
</h1>
<p>
Royal Q lovar dig en parfym som du aldrig kommer glömma.
Med unika aromer av Italiensk ursprung ger dig den en sensuell doft som är oemotståndlig...
</p>
<div class="lasmer">
<a href="#content">
<h2>Läs mer</h2>
</a>
</div>
</div>
</div>
<div class="content">
<a name="content"></a>
<div class="firstp">
<h3>Hej!</h3>
<p2>
Royal Q lovar dig en parfym som du aldrig kommer glömma.
Med unika aromer av Italiensk ursprung ger dig den en sensuell doft som är oemotståndlig.
Med detta tillkommer även en snyggt designad flaska som är ensam i sitt slag med en högklassig förpackning.
Utöver vår parfym erbjuder vi botemedlet mot vintern.
På royal Q erbjuder vi exotiska badbomber med olika lukter och färger.
Dessa badbomber kommer ge dig en stund för ro och avkoppling som får dig att glömma vintertiden med ett dopp.
</p2>
</div>
</div>
<div class="container2">
<div class="bkimage2">
</div>
</div>
</body>
</html>