Блог

Главная - Вопросы по программированию - выпадающее меню css перемещение содержимого страницы

выпадающее меню css перемещение содержимого страницы

#html #css

#HTML #css

Вопрос:

Я создал выпадающее меню css только из css и html. Моя проблема в том, что при наведении курсора мыши на панель навигации содержимое моей страницы перемещается вправо. Затем, когда я наводю курсор на выпадающее меню, содержимое страницы перемещается обратно влево. Я пока не нашел ничего, что могло бы мне помочь. Я прикрепил соответствующий код ниже.

Пожалуйста, помогите мне и спасибо

 * {
	padding: 0;
	margin: 0;
}

nav {
	background-color: #cccccc;
	width: 100%;
	height: 80px;
}


ul {
	float: left;
}

ul li {
	position: relative;
	list-style: none;
	float: left;
	line-height: 80px;
	font-size: 20px;
	color: #c92d39;
}


ul li a{
	display: block;
	text-decoration: none;
	color: #c92d39;
	padding: 0 30px;
}


ul li a:hover {
	color: black;
	border-bottom: 1px solid #c92d39;
}

ul li:hover ul {
	display: block;
}

ul li ul {
	display: none;
	position: absolute;
	background-color: #e5e5e5;
	border-radius: 0 0 3px 3px;
}


ul li ul li a:hover {
	background-color: #b2b2b2;
	color: #c92d39;
	border-bottom: none;
}

ul li ul li {
	font-size: 15px;
	width: 100%;
	text-align: center;
}

h1 {
	color: #c92d39;
	padding: 30px;
}

h2 {
	color: #c92d39;
	padding: 5px 30px 10px 30px;
}

p {
	padding: 0px 30px;
}

a {
	text-decoration: none;
}



#logo {
	background-color: #cccccc;
	padding: 0 51px 0 75px;
	font-size: 30px;
	font-weight: bold;
}

.page-body {
	background-color: #e5e5e5;
}

.wrapper {
	margin: 0 300px 0 300px;
	padding-left: 0px;
	height: 100%;
	background-color: white;
}

.footer {
	background-color: #cccccc;
	width: 100%;
	height: 80px;
}

.empty_box {
	height: 1000px;
	width: 100%;
}

#contacts {
	margin: 0px 0px 0px 60px;
	padding: 0 20px;
	border-top: 1px solid #cccccc;
}

#contacts:hover {
	border-top: 1px solid #c92d39;
}

#copyright {
	font-size: 10px;
	float: right;
	padding: 0px 30px 0 770px;
}

#copyright:hover {
	background-color: #cccccc;
}  
 <!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Basecode</title>
		<link href="style.css" rel="stylesheet" type="text/css">
	</head>

	<body>
		<nav>
			<ul>
				<li id="logo">Cultural Asia</li>
			</ul>
			<ul>
				<li><a href="index.html">Home</a></li>
				<li>
					<a href="attractions.html">Attractions</a>
					<ul>
						<li><a href="#">attraction1</a></li>
						<li><a href="#">attraction2</a></li>
						<li><a href="#">attraction3</a></li>
					</ul>
				</li>
				<li>
					<a href="packages.html">Packages</a>
					<ul>
						<li><a href="#">package1</a></li>
						<li><a href="#">package2</a></li>
						<li><a href="#">package3</a></li>
					</ul>
				</li>
				<li><a href="contacts.html">Contacts</a></li>
			</ul>
		</nav>
		<div class="page-body">
			<div class="wrapper">
				<p>hi</p>				
				<div class="empty_box"></div>
			</div>
		</div>
		<div class="footer">
			<ul>
				<li><a href="contacts.html" id="contacts">Contact Details</a></li>
				<li id="copyright">Copyright Lachlan Dunn</li>
			</ul>
		</div>
	</body>
</html>

Ответ №1:

Вам нужно очистить свой floats .

 .page-body {
    …
    clear: left;
}

ДЕМОНСТРАЦИЯ

 * {
  padding: 0;
  margin: 0;
}

nav {
  background-color: #cccccc;
  width: 100%;
  height: 80px;
}

ul {
  float: left;
}

ul li {
  position: relative;
  list-style: none;
  float: left;
  line-height: 80px;
  font-size: 20px;
  color: #c92d39;
}

ul li a {
  display: block;
  text-decoration: none;
  color: #c92d39;
  padding: 0 30px;
}

ul li a:hover {
  color: black;
  border-bottom: 1px solid #c92d39;
}

ul li:hover ul {
  display: block;
}

ul li ul {
  display: none;
  position: absolute;
  background-color: #e5e5e5;
  border-radius: 0 0 3px 3px;
}

ul li ul li a:hover {
  background-color: #b2b2b2;
  color: #c92d39;
  border-bottom: none;
}

ul li ul li {
  font-size: 15px;
  width: 100%;
  text-align: center;
}

h1 {
  color: #c92d39;
  padding: 30px;
}

h2 {
  color: #c92d39;
  padding: 5px 30px 10px 30px;
}

p {
  padding: 0px 30px;
}

a {
  text-decoration: none;
}

#logo {
  background-color: #cccccc;
  padding: 0 51px 0 75px;
  font-size: 30px;
  font-weight: bold;
}

.page-body {
  background-color: #e5e5e5;
  clear: left;
}

.wrapper {
  margin: 0 300px 0 300px;
  padding-left: 0px;
  height: 100%;
  background-color: white;
}

.footer {
  background-color: #cccccc;
  width: 100%;
  height: 80px;
}

.empty_box {
  height: 1000px;
  width: 100%;
}

#contacts {
  margin: 0px 0px 0px 60px;
  padding: 0 20px;
  border-top: 1px solid #cccccc;
}

#contacts:hover {
  border-top: 1px solid #c92d39;
}

#copyright {
  font-size: 10px;
  float: right;
  padding: 0px 30px 0 770px;
}

#copyright:hover {
  background-color: #cccccc;
}  
 <nav>
  <ul>
    <li id="logo">Cultural Asia</li>
  </ul>
  <ul>
    <li><a href="index.html">Home</a></li>
    <li>
      <a href="attractions.html">Attractions</a>
      <ul>
        <li><a href="#">attraction1</a></li>
        <li><a href="#">attraction2</a></li>
        <li><a href="#">attraction3</a></li>
      </ul>
    </li>
    <li>
      <a href="packages.html">Packages</a>
      <ul>
        <li><a href="#">package1</a></li>
        <li><a href="#">package2</a></li>
        <li><a href="#">package3</a></li>
      </ul>
    </li>
    <li><a href="contacts.html">Contacts</a></li>
  </ul>
</nav>
<div class="page-body">
  <div class="wrapper">
    <p>hi</p>
    <div class="empty_box"></div>
  </div>
</div>
<div class="footer">
  <ul>
    <li><a href="contacts.html" id="contacts">Contact Details</a></li>
    <li id="copyright">Copyright Lachlan Dunn</li>
  </ul>
</div>

Комментарии:

1. Спасибо за ответ. Мне просто интересно, почему это устраняет проблему, чтобы я мог избежать этого в будущем.

2. @LachlanDunn Вот краткое чтение , которое должно помочь.

Ответ №2:

Проблема в том, что вы добавляете нижнюю границу к элементу, которая выталкивает абзац из его положения. сделать 

 ul li a:hover {
    color: black;   
}

вместо

  ul li a:hover {
        color: black;
        border-bottom: 1px solid #c92d39;
    }

или, если вы действительно хотите эту границу, ознакомьтесь с документацией css box-sizing property documentation