Question

我对我的课程最近开始等有点新的HTML。在我们的任务中，我们必须提交一个具有不同特征的网站，其中一个是下拉菜单。

我设法几乎把它全部工作了，但是当我试图将鼠标悬停在其中一个导航菜单标签上时，下拉菜单就像它作为列表对象一样在左边？

This is how it looks when I hover over About

我不知道我做错了什么！我试着做一些研究，最后我的导航菜单居中，但这就是我所做的一切！我需要做些什么才能使其与＆＃34;关于＆＃34;标记

＆＃13;

p {
	font-size: 44px;
	color: white;
	font-family: verdana;
	background-color: #333;
	text-align: center;
}
p2 {
 font-size: 12px;
 color: white;
 font-family: verdana;
}


body {
	background-image: url(background.jpg);
}


div {
	margin-left: 400px;
	margin-right: 400px;
	margin-top: 30px;
	border: solid white 3px;
	background-color: #333;
}


div2 {
	margin-left: auto;
  margin-right: auto;
  width: 6em;
}

#nav {
text-align:center;
}


#nav ul {
display:inline-block;
}




#nav a {
float:left;
text-decoration:none;
padding:0 30px;
}


ul {
	background-color: #333;
	font-family: verdana;


}


ul li {

	display: inline;
	background-color: #333;
	font-size: 24px;
	height: 47px;
	width: 200px;
	line-height: 47px;
	text-align: center;
	float: left;
	list-style: none;
}


ul li a {
	color: white;
	text-decoration: none;
	display: block;
}


ul li a:hover {
	background-color: white;
}


ul li a:active{
	background-color: #333;
	color: #333
}


ul li ul li {
	display: none;
}


ul li:hover  ul li{
	display: block;
}


.active {
	background-color: white;
}

＆＃13;

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
			<link rel="stylesheet" href="stylesheet.css">
		<title>Sleepless hub</title>
	</head>

<body>

	<div> <!-- Denne er med for å kun skape en fin designer strek ;) -->
	</div>

	<div>
			<p>There is nothing like a good nut </p>
	</div>

	<div> <!-- Samme her. -->
	</div>
<div id="nav">
	<ul>
		<li> <a href="#">Home</a></li>
		<li> <a href="#">About</a>
			<ul>
				<li> <a href="#">Wikipedia</li>
			</ul>
				</li>
		<li> <a href="#">Projects</a></li>
		<li> <a href="#">Contact me</a></li>
		<li> <a href="#">Fun Room</a></li>
</div>
<div>
	<p>Okay</p>
	</div>
</body>

</html>

＆＃13;

Answer 1

问题是因为你有孩子ul和锚标签的填充。如果你删除它将正确对齐。尝试将类添加到子元素中，因为这不是编写css的正确方法。

＆＃13;

Array to string conversion

＆＃13;

p {
	font-size: 44px;
	color: white;
	font-family: verdana;
	background-color: #333;
	text-align: center;
}
p2 {
 font-size: 12px;
 color: white;
 font-family: verdana;
}


body {
	background-image: url(background.jpg);
}


div {
	margin-left: 400px;
	margin-right: 400px;
	margin-top: 30px;
	border: solid white 3px;
	background-color: #333;
}


div2 {
	margin-left: auto;
  margin-right: auto;
  width: 6em;
}

#nav {
text-align:center;
}


#nav ul {
display:inline-block;
}




#nav a {
float:left;
text-decoration:none;
padding:0 30px;
}


ul {
	background-color: #333;
	font-family: verdana;


}


ul li {

	display: inline;
	background-color: #333;
	font-size: 24px;
	height: 47px;
	width: 200px;
	line-height: 47px;
	text-align: center;
	float: left;
	list-style: none;
}


ul li a {
	color: white;
	text-decoration: none;
	display: block;
}


ul li a:hover {
	border: 1px solid red;
}


ul li a:active{
	background-color: #333;
	color: #333
}


ul li ul li {
	display: none;
}

ul li ul{
  padding-left: 0;
}


ul li:hover  ul li{
	display: block;
}


.active {
	background-color: white;
}

＆＃13;

下拉菜单倾斜到一边？

1 个答案: