悬停内容上显示的“锚定”文本

时间：2019-02-14 20:03:55

标签： css

我有两个水平下拉菜单。当我将鼠标悬停在第二个dorpdown菜单的上方时，第一个“ li”显示在上方，但问题是第二个下拉菜单锚文本没有显示下来。请帮我在悬停内容上方显示锚文本的真正原因是什么。供您参考，我已经尝试过“ Z-index”并定位“属性”。

注意：这两个是单独的文件，我将在这两个页面中的一个php文件中包含该文件。

enter image description here 

#primary_nav_wrap
{
	
	height:40px;
	margin-top:11px;
	background:#fff;
	box-shadow: 0 2px 5px rgba(0,0,0,.2);
}

#primary_nav_wrap ul
{
	list-style:none;
	position:relative;
	float:left;
	margin:0;
	padding:0;
}

#primary_nav_wrap ul a
{
	display:block;
	color:#333;
	text-decoration:none;
	font-size:14px;
	line-height:40px;
	padding:0 70px 0 20px;
	letter-spacing:.2em;
	font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif;
	position:relative;
	z-index:0;
}

#primary_nav_wrap .arrow:after
{
	content:'\203A';
	font-size:24px;
	color:#000;
	float:right;
	margin-right:5px;
	margin-top:-32px;
	transform:rotate(90deg);
	-webkit-transform:rotate(90deg);
	-moz-transform:rotate(90deg);
}

#primary_nav_wrap ul li:hover .arrow:after
	{
		content:'\2039';
	}

#primary_nav_wrap ul li
{
	position:relative;
	float:left;
	margin:0;
	padding:0;
}

#primary_nav_wrap ul li.current-menu-item
{
	background:#ddd;
}

#primary_nav_wrap ul li.current-menu-item img
{
	width:30px;
	height:30px;
	padding:5px 5px;
}

#primary_nav_wrap ul li:hover
{
	background:#f6f6f6;
}

#primary_nav_wrap ul ul
{
	display:none;
	position:absolute;
	top:100%;
	left:0;
	background:#fff;
	padding:0;
}

#primary_nav_wrap ul ul a:before
{
	content:'\203A';
	font-size: 18px;
	margin-right:10px;
	color:black;
}

#primary_nav_wrap ul ul li
{
	float:none;
	width:250px;
}

#primary_nav_wrap ul ul a
{
	line-height:120%;
	padding:10px 15px;
}

#primary_nav_wrap ul ul ul
{
	top:0;
	left:100%;
}

#primary_nav_wrap ul li:hover > ul
{
	display:block;
}
<nav id="primary_nav_wrap">

	<div class="mainbody">
		
		<ul>
  		    <li class="current-menu-item"><a href="index.php"><img src="./icon/home.png"/></a></li>
    			<li><a href="#">Men's</a><span class="arrow"></span>
    			    <ul>
      				<li><a href="">Traditional Wear</a></li>
				<li><a href="">Top Wear</a></li>
				<li><a href="">Bottom Wear</a></li>
				<li><a href="">Footwear</a></li>
				<li><a href="">Bags</a></li>
				<li><a href="">Accessories</a></li>
			     </ul>
        		<li>
  			<li><a href="#">Women's</a><span class="arrow"></span>
    			    <ul>
      				<li><a href="">Traditional Wear</a></li>
				<li><a href="">Westen Wear</a></li>
				<li><a href="">Footwear</a></li>
				<li><a href="">Lingerie</a></li>
				<li><a href="">Bages</a></li>
				<li><a href="">Jewellery</a></li>
				<li><a href="">Accessories</a></li>
    			    </ul>
  			</li>
  			<li><a href="#">Kids</a><span class="arrow"></span>
    			    <ul>
      				<li class="dir"><a href="#">Boy's</a>
					<ul>
          				     	<li><a href="#">Category 1</a></li>
          					<li><a href="#">Category 2</a></li>
          					<li><a href="#">Category 3</a></li>
          					<li><a href="#">Category 4</a></li>
          					<li><a href="#">Category 5</a></li>
        				</ul>
				</li>
      				<li class="dir"><a href="#">Girl's</a>
					<ul>
          				     	<li><a href="#">Category 1</a></li>
          					<li><a href="#">Category 2</a></li>
          					<li><a href="#">Category 3</a></li>
          					<li><a href="#">Category 4</a></li>
          					<li><a href="#">Category 5</a></li>
        				</ul>
				</li>
				<li class="dir"><a href="#">Baby</a>
        				<ul>
          				     	<li><a href="#">Category 1</a></li>
          					<li><a href="#">Category 2</a></li>
          					<li><a href="#">Category 3</a></li>
          					<li><a href="#">Category 4</a></li>
          					<li><a href="#">Category 5</a></li>
        				</ul>
      				</li>
    			    </ul>
  			</li>
  			<li><a href="#">Home & Living</a><span class="arrow"></span>
				<ul>
						<li><a href="">Kitchen Decor</a></li>
						<li><a href="">Bathroom Decor</a></li>
						<li><a href="">Bedroom Decor</a></li>
						<li><a href="">Dining Decor</a></li>
						<li><a href="">Drawing Decor</a></li>
						<li><a href="">Furniture</a></li>
						<li><a href="">Lighting</a></li>
						<li><a href="">Textile and Rugs</a></li>
						<li><a href="">Office Stationery</a></li>
					</ul>
			</li>
  			<li><a href="#">Garden</a></li>
  			<li><a href="#">Offer Zone</a></li>
		   </ul>	
	</div>
</nav>

#part2
	{
		width:400px;
		height:60px;
		float:right;
	}
	
#part2 ul
		{	
			text-decoration:none;
			list-style:none;
			text-align:center;
		}
#part2 ul li
		{
			float: left;
			padding:15px 25px 15px 25px;
			height:30px;
			cursor:pointer;
		}
		
.num
	{
		font-size:18px;
		text-align:center;
		color:#FF0000;
		font-style:normal;
		font-size-adjust:none;
		font-weight:bold;
		line-height:30px;
		top:-15px;
		right:-5px;
		position:relative;
	}
			
#part2 ul li:hover
			{
				background:#53504E;
			}
#part2 ul li img
		{
			width:25px;
			height:25px;
		}
#part2 ul li:hover ul
			{
				display:block;
				position:absolute;
				width:200px;
				height: auto;
				background:#2F2D2C;
				top:60px;
				margin-left:-135px;
				left:auto;
				border-radius:5px;
				position:relative;
				z-index:1000;
			}
#part2 ul li ul
			{
				display:none;
			}
#part2 ul li ul li
			{
				width:190px;
				padding:10px 5px 0px 5px;
				text-align:center;
				color:#fff;
				font-weight:bold;
				position:relative;
				z-index:1000;
			}
#part2 ul li ul li:hover
					{
						background:#2F2D2C;
					}
#part2 ul li:last-child ul li:hover
{
background:#53504E;
}
#part2 li ul li:first-child:before
						{ /* the pointer tip */
							content:'';
							position:absolute;
							width:1px;
							height:1px;
							border:10px solid transparent;
							border-bottom-color:#fff;
							right:20%;
							top:-20px;
							margin-left:-5px;
						}
a
{
	text-decoration:none;
	color:#fff;
}
a:hover
{
	color:#FF6600;
}
#part2 ul li ul li input
						{
							height:25px;
							width:150px;
							border-radius:5px;
							border:0;
							padding:0 0 0 5px;
						}
<div id="part2">
				<ul>
					<li class="search-btn" onclick="myFunction()"> <img src="icon/003-search.png" name="Search" alt="Search"/></li>
					<li class="shopcard-btn"> <img src="icon/shopcard.png" name="Shopcard" alt="Shopcard"/><span class="num">3</span>
						<ul>
							<li><span class="item">Item's Name</span><span>200tk</span></li>
							<li><span class="item">Item's Name</span><span>200tk</span></li>
							<li><span class="item">Item's Name</span><span>200tk</span></li>
							<li><span class="item">Total Price</span><span>200tk</span></li>
							<li><button type="submit" name="View" class="button">View details</button></li>
							 <li><button type="submit" name="View" class="button">Check Out</button></li>
						</ul>
					</li>
					<li class="favorite-btn"> <img src="icon/favorite.png" name="Favorite" alt="Favorite"/><span class="num">3</span>
						<ul>
							<li><button type="submit" name="View" class="button">View details</button></li>
							<li><p><a href="registation.php">Sign</a> In to manage and view all items.</p></li>
						</ul>
					</li>
					<li class="user-btn"> <img src="icon/user.png" name="Login & Registation" alt="Login & Registation"/>
						<ul>
							<li><input type="text" name="Username" placeholder="User Name" /></li>
							<li><input type="password" name="Password" placeholder="Password"/></li>
							<li><button type="submit" value="Login" class="button">Login</button></li>
							<li><button type="submit" name="View" class="button">Join</button></li>
						</ul>
					</li>
					<li class="tracking-btn"> <img src="icon/tracking.png" name="Delivery Tracking" alt="Delivery Tracking"/>
					<ul>
							<li><input type="text" name="Username" placeholder="User Name" /></li>
							<li><input type="text" name="Password" placeholder="Order Number"/></li>
							<li><button type="submit" value="Login" class="button">Search</button></li>
						</ul>
					</li>
					<li class="menu-btn"> <img src="icon/menu_icon.png" name="Menu_icon" alt="menu_icon"/>
						<ul>
							<li>Sell with us</li>
							<li>Help Center</li>
							<li>About us</li>
							<li>Downlode Apps</li>
						</ul>
					</li>
				</ul>
			</div>
		</div>

1 个答案:

答案 0 :(得分：0)

就CSS代码样式而言，有些事情在这里非常糟糕。您正在使用的特异性（id作为选择器，元素选择器等）可能会导致您过分痛苦。另外，您所说的“悬停时显示的锚文本”实际上只是无序列表元素下方的文本，该元素通过放置在导航中的悬停DOM来显示。

通过向z-index: 10000添加一个#primary_nav_wrap ul ul，我能够将此元素带到渲染堆栈的顶部，从而解决了您的问题。

我还建议重新编写一些CSS，因为您正在构建非常脆弱的结构，随着复杂性的增加，该结构将继续存在问题。

#primary_nav_wrap
{
	
	height:40px;
	margin-top:11px;
	background:#fff;
	box-shadow: 0 2px 5px rgba(0,0,0,.2);
}

#primary_nav_wrap ul
{
	list-style:none;
	position:relative;
	float:left;
	margin:0;
	padding:0;
}

#primary_nav_wrap ul a
{
	display:block;
	color:#333;
	text-decoration:none;
	font-size:14px;
	line-height:40px;
	padding:0 70px 0 20px;
	letter-spacing:.2em;
	font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif;
	position:relative;
	z-index:0;
}

#primary_nav_wrap .arrow:after
{
	content:'\203A';
	font-size:24px;
	color:#000;
	float:right;
	margin-right:5px;
	margin-top:-32px;
	transform:rotate(90deg);
	-webkit-transform:rotate(90deg);
	-moz-transform:rotate(90deg);
}

#primary_nav_wrap ul li:hover .arrow:after
	{
		content:'\2039';
	}

#primary_nav_wrap ul li
{
	position:relative;
	float:left;
	margin:0;
	padding:0;
}

#primary_nav_wrap ul li.current-menu-item
{
	background:#ddd;
}

#primary_nav_wrap ul li.current-menu-item img
{
	width:30px;
	height:30px;
	padding:5px 5px;
}

#primary_nav_wrap ul li:hover
{
	background:#f6f6f6;
}

#primary_nav_wrap ul ul
{
	display:none;
	position:absolute;
	top:100%;
	left:0;
	background:#fff;
	padding:0;
  z-index: 10000;
}

#primary_nav_wrap ul ul a:before
{
	content:'\203A';
	font-size: 18px;
	margin-right:10px;
	color:black;
}

#primary_nav_wrap ul ul li
{
	float:none;
	width:250px;
}

#primary_nav_wrap ul ul a
{
	line-height:120%;
	padding:10px 15px;
}

#primary_nav_wrap ul ul ul
{
	top:0;
	left:100%;
}

#primary_nav_wrap ul li:hover > ul
{
	display:block;
}
<nav id="primary_nav_wrap">

	<div class="mainbody">
		
		<ul>
  		    <li class="current-menu-item"><a href="index.php"><img src="./icon/home.png"/></a></li>
    			<li><a href="#">Men's</a><span class="arrow"></span>
    			    <ul>
      				<li><a href="">Traditional Wear</a></li>
				<li><a href="">Top Wear</a></li>
				<li><a href="">Bottom Wear</a></li>
				<li><a href="">Footwear</a></li>
				<li><a href="">Bags</a></li>
				<li><a href="">Accessories</a></li>
			     </ul>
        		<li>
  			<li><a href="#">Women's</a><span class="arrow"></span>
    			    <ul>
      				<li><a href="">Traditional Wear</a></li>
				<li><a href="">Westen Wear</a></li>
				<li><a href="">Footwear</a></li>
				<li><a href="">Lingerie</a></li>
				<li><a href="">Bages</a></li>
				<li><a href="">Jewellery</a></li>
				<li><a href="">Accessories</a></li>
    			    </ul>
  			</li>
  			<li><a href="#">Kids</a><span class="arrow"></span>
    			    <ul>
      				<li class="dir"><a href="#">Boy's</a>
					<ul>
          				     	<li><a href="#">Category 1</a></li>
          					<li><a href="#">Category 2</a></li>
          					<li><a href="#">Category 3</a></li>
          					<li><a href="#">Category 4</a></li>
          					<li><a href="#">Category 5</a></li>
        				</ul>
				</li>
      				<li class="dir"><a href="#">Girl's</a>
					<ul>
          				     	<li><a href="#">Category 1</a></li>
          					<li><a href="#">Category 2</a></li>
          					<li><a href="#">Category 3</a></li>
          					<li><a href="#">Category 4</a></li>
          					<li><a href="#">Category 5</a></li>
        				</ul>
				</li>
				<li class="dir"><a href="#">Baby</a>
        				<ul>
          				     	<li><a href="#">Category 1</a></li>
          					<li><a href="#">Category 2</a></li>
          					<li><a href="#">Category 3</a></li>
          					<li><a href="#">Category 4</a></li>
          					<li><a href="#">Category 5</a></li>
        				</ul>
      				</li>
    			    </ul>
  			</li>
  			<li><a href="#">Home & Living</a><span class="arrow"></span>
				<ul>
						<li><a href="">Kitchen Decor</a></li>
						<li><a href="">Bathroom Decor</a></li>
						<li><a href="">Bedroom Decor</a></li>
						<li><a href="">Dining Decor</a></li>
						<li><a href="">Drawing Decor</a></li>
						<li><a href="">Furniture</a></li>
						<li><a href="">Lighting</a></li>
						<li><a href="">Textile and Rugs</a></li>
						<li><a href="">Office Stationery</a></li>
					</ul>
			</li>
  			<li><a href="#">Garden</a></li>
  			<li><a href="#">Offer Zone</a></li>
		   </ul>	
	</div>
</nav>

相关问题
最新问题