三种方法解决纯css下拉菜单鼠标移入菜单内容时菜单隐藏消失的问题

情景描述

假设我们希望导航栏上有一个元素(以下简称“菜单标题”),把鼠标移到标题上面时其下方会弹出一列菜单,鼠标离开时菜单又隐藏起来。

然而,当试图把鼠标从菜单标题移到菜单内容中时,菜单竟然也隐藏了。

我的菜单内容(平时隐藏的那一部分)是由一个

    充当的。

    html

    <html>
    	<head>
    		<title>test1title>
    		<link rel="stylesheet" type="text/css" href="test1.css">
    	head>
    	
    	<body>
    	
    		<div class="dropdown">
    			<span>菜单span>
    			<ul class="dropdown-content">
    				<li>ali>
    				<li>bli>
    				<li>cli>
    			ul>
    		div>
    		<div>后续内容div>
    		
    	body>
    html>
    

    css

    .dropdown{
    	display:inline-block;
    	position:relative;
    }
    
    .dropdown-content{
    	display:none;
    	position:absolute;
    }
    
    .dropdown:hover .dropdown-content{
    	display:block;
    }
    
    .dropdown , .dropdown-content{
    	border-width:2px;
    	border-style:dotted;
    }
    

    原因和解决方案

    首先分析这个菜单的结构:由

你可能感兴趣的:(html,css)