Question

我对创建子菜单有疑问。一切似乎都很正常，直到我将鼠标悬停在左侧最后一个按钮上并看到我在父按钮的内部有三个按钮。我该怎么做才能使他们脱离那个按钮？我的意思是，如何显示它们垂直堆叠并在父按钮容器下方？不知道我是否清楚。

代码如下：

@charset "utf-8";
#menutop ul {
	
	list-style-type: none;
}

#menutop li {

	float: left;
	margin: 5px;
	border-color: black;
	border-width: 10px;
	border-style: solid;
	padding: 5px;
	background-color: orange;
}

#menutop li:hover {
	
	background-color: green;
	color: white;
	
}

li ul {
	
	display: none;
	
	}
	
li:hover > ul {
	
	display: block;
	
	}
	
#submenu li {
	
	float: none;
	
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Menú Práctica</title>
<link href="estilos.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="menutop">
<ul>
<li>Menú 1</li>
<li>Menú 2</li>
<li>Menú 3</li>
<li>Menú 4
<ul id="submenu">
<li>Menú 1</li>
<li>Menú 2</li>
<li>Menú 3</li>
</ul></li>
</ul>
</div>

</body>
</html>

就像我之前说的，这可能是很小的东西（基本上是菜鸟）。

来自阿根廷的问候。

Answer 1

您应该在子菜单上使用绝对位置...通过位置：相对于子菜单的上级li

受约束

@charset "utf-8";
#menutop ul {
	
	list-style-type: none;
}
#menutop ul > li {
    position: relative;
}
#menutop li {

	float: left;
	margin: 5px;
	border-color: black;
	border-width: 10px;
	border-style: solid;
	padding: 5px;
	background-color: orange;
}

#menutop li:hover {
	
	background-color: green;
	color: white;
	
}

li ul {
	
	display: none;
	position: absolute;
    top: 100%
	left: 0;
	}
	
li:hover > ul {
	
	display: block;
	
	}
	
#submenu li {
	
	float: none;
	
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Menú Práctica</title>
<link href="estilos.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="menutop">
<ul>
<li>Menú 1</li>
<li>Menú 2</li>
<li>Menú 3</li>
<li>Menú 4
<ul id="submenu">
<li>Menú 1</li>
<li>Menú 2</li>
<li>Menú 3</li>
</ul></li>
</ul>
</div>

</body>
</html>

下拉菜单问题（按钮内部的按钮）

1 个答案: