Question

我已从以下网站下载：

这是我的HTML代码：

<td class="dess rec">
    <a href="#" id="l_desserts" >desserts</a>
        <ul class="submenu">
            <li><a href="#">Cake</a></li>
            <li><a href="#">Ice Cream</a></li>
            <li><a href="#">Shahi Kheer</a></li>
        </ul>
 </td>

它是表格的一部分

CSS：

.submenu {
    position:absolute;
    overflow:hidden;
    opacity:0;
    background-color:#444;
    width:100px;
    top:37px;
    left:-3px;
    border-top:2px solid #fff;
}
.submenu>li {
    list-style:none; 
    margin-left:-40px;
    margin-top:3px;
}
.submenu>li>a {
    display:block;
    text-decoration:none;
    color:#fff;
    border:2px solid #444;
    border-radius:5px;
    padding:4px;
    text-align:center;
    font-family:Lucida Sans Unicode;
}
.submenu>li>a:hover {
    border:2px solid white;
}
#l_desserts:hover .submenu {
z-index:1;
    opacity: 1;
}

我的问题是这个下拉列表在这种情况下不起作用，但早些时候我使用这种方法制作了一个下拉列表。你可以在这里看到这个（以下链接是博主）：

Indian Tadka

这里应用了相同的方法。我不知道为什么它不起作用＆gt;

body{
margin:0px;
}
#header{
	height: 90px;
	background-color: #444;
	margin:0px;
	color: #fff;
}

#logo{
	width:70px;
	height:90px;
	background-image: url('../images/logo.jpg');
	background-size: 70px 90px;
	position:absolute;
	z-index:2;
	color:#fff;
	text-align: center;
	font-family: arial;
	font-weight: bold;
	text-shadow: 2px 1px #000;
	cursor: pointer;
}

#complete_name{
	position:absolute;
	top:0px;
	color:#fff;
	font-family:arial;
		font-weight:bold;
		font-size:20px;
		z-index:1;
	background-color:#444;	
}

#nav{
	position:absolute;
	left:75px;
	color:#fff;
	z-index:0;
	top:37px;
}

#l_desserts, #l_rice{
	color:#fff;
	text-decoration:none;
	padding-left:24px;
	font-family: Lucida Sans Unicode;
	display:block;
	background-image: url('../images/coffie_paper_texture.jpg');
	background-position:center;
	background-size: 100px 20px;
}

.rec{
	width:100px;
}
.otl{
	width:100px;
	background-color:#717171;
}

.submenu{
	position:absolute;
	overflow:hidden;
	opacity:0;
	background-color:#444;
	width:100px;
	top:37px;
	left:-3px;
	border-top:2px solid #fff;
}
.submenu>li{
	list-style:none; 
	margin-left:-40px;
	margin-top:3px;
}
.submenu>li>a{
	display:block;
	text-decoration:none;
	color:#fff;
	border:2px solid #444;
	border-radius:5px;
	padding:4px;
	text-align:center;
	font-family:Lucida Sans Unicode;
}
.submenu>li>a:hover{
	border:2px solid white;
}
#l_desserts:hover .submenu{
z-index:1;
	opacity: 1;
}

<header id="header"> 
		<div id="logo" onmouseover="show_name()" onmouseout="hide_name()"> </div>
		<font id="complete_name"></font>
		<table id="nav">
		 <tr id="Oth_links">
			<td class="photoGall Otl"><a id="pg" href="#">Photo Gallery</a></td>
		 </tr>
		 <tr id="toRecipes">
		   <td class="dess rec">
			<a href="#" id="l_desserts" >desserts</a>
			<ul class="submenu">
				<li><a href="#">Cake</a></li>
				<li><a href="#">Ice Cream</a></li>
				<li><a href="#">Shahi Kheer</a></li>
			</ul>
		   </td>
		   <td class="rice rec">
			<a href="#" id="l_rice">Rice</a>
		   </td>		   
		 </tr>		 
		</table>
	</header>

Answer 1

我得到了答案

我只需改变我的行：

#l_desserts:hover .submenu{ ...

到此：

#l_desserts:hover+.submenu

但它仍然不知道前面的方法在我的博客中是如何工作的

＆＃13;

body{
margin:0px;
}
#header{
	height: 90px;
	background-color: #444;
	margin:0px;
	color: #fff;
}

#logo{
	width:70px;
	height:90px;
	background-image: url('../images/logo.jpg');
	background-size: 70px 90px;
	position:absolute;
	z-index:2;
	color:#fff;
	text-align: center;
	font-family: arial;
	font-weight: bold;
	text-shadow: 2px 1px #000;
	cursor: pointer;
}

#complete_name{
	position:absolute;
	top:0px;
	color:#fff;
	font-family:arial;
		font-weight:bold;
		font-size:20px;
		z-index:1;
	background-color:#444;	
}

#nav{
	position:absolute;
	left:75px;
	color:#fff;
	z-index:0;
	top:37px;
}

#l_desserts, #l_rice{
	color:#fff;
	text-decoration:none;
	padding-left:24px;
	font-family: Lucida Sans Unicode;
	display:block;
	background-image: url('../images/coffie_paper_texture.jpg');
	background-position:center;
	background-size: 100px 20px;
}

.rec{
	width:100px;
}
.otl{
	width:100px;
	background-color:#717171;
}

.submenu{
	position:absolute;
	overflow:hidden;
	opacity:0;
	background-color:#444;
	width:100px;
	top:37px;
	left:-3px;
	border-top:2px solid #fff;
}
.submenu>li{
	list-style:none; 
	margin-left:-40px;
	margin-top:3px;
}
.submenu>li>a{
	display:block;
	text-decoration:none;
	color:#fff;
	border:2px solid #444;
	border-radius:5px;
	padding:4px;
	text-align:center;
	font-family:Lucida Sans Unicode;
}
.submenu>li>a:hover{
	border:2px solid white;
}
#l_desserts:hover+.submenu{
	opacity:1;
	z-index:3;
}

＆＃13;

<html>
<head>
<title>Indian Tadka- Home</title>
<link rel="stylesheet" href="styles/main.css" type="text/css" />
<script type="text/javascript" src="scripts/jquery.min.js"></script>
<script type="text/javascript" src="scripts/scr_home.js"></script>
<script type="text/javascript" src="scripts/JIO.js"></script>
</head>
<body>
	<header id="header"> 
		<div id="logo" onmouseover="show_name()" onmouseout="hide_name()"> </div>
		<font id="complete_name"></font>
		<table id="nav">
		 <tr id="Oth_links">
			<td class="photoGall Otl"><a id="pg" href="#">Photo Gallery</a></td>
		 </tr>
		 <tr id="toRecipes">
		   <td class="dess rec">
			<a href="#" id="l_desserts" onmouseover="showDess();" >desserts</a>
			<ul class="submenu">
				<li><a href="#">Cake</a></li>
				<li><a href="#">Ice Cream</a></li>
				<li><a href="#">Shahi Kheer</a></li>
			</ul>
		   </td>
		   <td class="rice rec">
			<a href="#" id="l_rice">Rice</a>
		   </td>		   
		 </tr>		 
		</table>
	</header>

</body>
</html>

＆＃13;

为什么我的下拉列表不起作用？

1 个答案: