IDdaxia 2021-11-20 09:25 采纳率: 82.4%
浏览 76
已结题

如何解决小米导航栏下拉菜单选中问题

问题遇到的现象和发生背景

我的下拉菜单只能摸不能被选中（鼠标经过就显示，鼠标离开就隐藏，但是下拉菜单还没选中就隐藏了）

问题相关代码，请勿粘贴截图
 <div class="tounav w">
            <div class="tubiao"><img src="102小米商城网页模板下载/images/LOGO.png"></div>
            <!--   商品介绍栏STARTS         -->
            <div class="jiesao">
                <ul>
                    <li><a href="">Xiaomi手机</a></li>
                    <li><a href="">Redmi红米</a></li>
                    <li><a href="">电视</a></li>
                    <li><a href="">笔记本</a></li>
                    <li><a href="">平板</a></li>
                    <li><a href="">家电</a></li>
                    <li><a href="">路由器</a></li>
                    <li><a href="">服务</a></li>
                    <li><a href="">社区</a></li>
                </ul>
            </div>
            <div class="xial">
                <div class="la w">
                    <div><a href=""><img src="./小米官网抠图/小米下拉菜单" alt=""></a><span>Xiaomi Civi</span><p>2599元起</p></div>
                    <div><a href=""><img src="./小米官网抠图/小米下拉菜单" alt=""></a><span>Xiaomi Civi</span><p>2599元起</p></div>
                    <div><a href=""><img src="./小米官网抠图/小米下拉菜单" alt=""></a><span>Xiaomi Civi</span><p>2599元起</p></div>
                    <div><a href=""><img src="./小米官网抠图/小米下拉菜单" alt=""></a><span>Xiaomi Civi</span><p>2599元起</p></div>
                    <div><a href=""><img src="./小米官网抠图/小米下拉菜单" alt=""></a><span>Xiaomi Civi</span><p>2599元起</p></div>
                    <div><a href=""><img src="./小米官网抠图/小米下拉菜单" alt=""></a><span>Xiaomi Civi</span><p>2599元起</p></div>
                </div>   
            </div>
            <div class="xial">
                <div class="la w">
                    <div><a href=""><img src="./小米官网抠图/小米下拉菜单" alt=""></a><span>Xiaomi Civi</span><p>2599元起</p></div>
                    <div><a href=""><img src="./小米官网抠图/小米下拉菜单" alt=""></a><span>Xiaomi Civi</span><p>2599元起</p></div>
                    <div><a href=""><img src="./小米官网抠图/小米下拉菜单" alt=""></a><span>Xiaomi Civi</span><p>2599元起</p></div>
                    <div><a href=""><img src="./小米官网抠图/小米下拉菜单" alt=""></a><span>Xiaomi Civi</span><p>2599元起</p></div>
                    <div><a href=""><img src="./小米官网抠图/小米下拉菜单" alt=""></a><span>Xiaomi Civi</span><p>2599元起</p></div>
                    <div><a href=""><img src="./小米官网抠图/小米下拉菜单" alt=""></a><span>Xiaomi Civi</span><p>2599元起</p></div>
                </div>   
            </div>
           <div class="xial">
               <div class="la w">
                   <div><a href=""><img src="./小米官网抠图/小米下拉菜单" alt=""></a><span>Xiaomi Civi</span><p>2599元起</p></div>
                   <div><a href=""><img src="./小米官网抠图/小米下拉菜单" alt=""></a><span>Xiaomi Civi</span><p>2599元起</p></div>
                   <div><a href=""><img src="./小米官网抠图/小米下拉菜单" alt=""></a><span>Xiaomi Civi</span><p>2599元起</p></div>
                   <div><a href=""><img src="./小米官网抠图/小米下拉菜单" alt=""></a><span>Xiaomi Civi</span><p>2599元起</p></div>
                   <div><a href=""><img src="./小米官网抠图/小米下拉菜单" alt=""></a><span>Xiaomi Civi</span><p>2599元起</p></div>
                   <div><a href=""><img src="./小米官网抠图/小米下拉菜单" alt=""></a><span>Xiaomi Civi</span><p>2599元起</p></div>
               </div>   
           </div>
           <div class="xial">
               <div class="la w">
                   <div><a href=""><img src="./小米官网抠图/小米下拉菜单" alt=""></a><span>Xiaomi Civi</span><p>2599元起</p></div>
                   <div><a href=""><img src="./小米官网抠图/小米下拉菜单" alt=""></a><span>Xiaomi Civi</span><p>2599元起</p></div>
                   <div><a href=""><img src="./小米官网抠图/小米下拉菜单" alt=""></a><span>Xiaomi Civi</span><p>2599元起</p></div>
                   <div><a href=""><img src="./小米官网抠图/小米下拉菜单" alt=""></a><span>Xiaomi Civi</span><p>2599元起</p></div>
                   <div><a href=""><img src="./小米官网抠图/小米下拉菜单" alt=""></a><span>Xiaomi Civi</span><p>2599元起</p></div>
                   <div><a href=""><img src="./小米官网抠图/小米下拉菜单" alt=""></a><span>Xiaomi Civi</span><p>2599元起</p></div>
               </div>   
           </div>
           <div class="xial">
               <div class="la w">
                   <div><a href=""><img src="./小米官网抠图/小米下拉菜单" alt=""></a><span>Xiaomi Civi</span><p>2599元起</p></div>
                   <div><a href=""><img src="./小米官网抠图/小米下拉菜单" alt=""></a><span>Xiaomi Civi</span><p>2599元起</p></div>
                   <div><a href=""><img src="./小米官网抠图/小米下拉菜单" alt=""></a><span>Xiaomi Civi</span><p>2599元起</p></div>
                   <div><a href=""><img src="./小米官网抠图/小米下拉菜单" alt=""></a><span>Xiaomi Civi</span><p>2599元起</p></div>
                   <div><a href=""><img src="./小米官网抠图/小米下拉菜单" alt=""></a><span>Xiaomi Civi</span><p>2599元起</p></div>
                   <div><a href=""><img src="./小米官网抠图/小米下拉菜单" alt=""></a><span>Xiaomi Civi</span><p>2599元起</p></div>
               </div>   
           </div>
           <div class="xial">
               <div class="la w">
                   <div><a href=""><img src="./小米官网抠图/小米下拉菜单" alt=""></a><span>Xiaomi Civi</span><p>2599元起</p></div>
                   <div><a href=""><img src="./小米官网抠图/小米下拉菜单" alt=""></a><span>Xiaomi Civi</span><p>2599元起</p></div>
                   <div><a href=""><img src="./小米官网抠图/小米下拉菜单" alt=""></a><span>Xiaomi Civi</span><p>2599元起</p></div>
                   <div><a href=""><img src="./小米官网抠图/小米下拉菜单" alt=""></a><span>Xiaomi Civi</span><p>2599元起</p></div>
                   <div><a href=""><img src="./小米官网抠图/小米下拉菜单" alt=""></a><span>Xiaomi Civi</span><p>2599元起</p></div>
                   <div><a href=""><img src="./小米官网抠图/小米下拉菜单" alt=""></a><span>Xiaomi Civi</span><p>2599元起</p></div>
               </div>   
           </div>
           <div class="xial">
               <div class="la w">
                   <div><a href=""><img src="./小米官网抠图/小米下拉菜单" alt=""></a><span>Xiaomi Civi</span><p>2599元起</p></div>
                   <div><a href=""><img src="./小米官网抠图/小米下拉菜单" alt=""></a><span>Xiaomi Civi</span><p>2599元起</p></div>
                   <div><a href=""><img src="./小米官网抠图/小米下拉菜单" alt=""></a><span>Xiaomi Civi</span><p>2599元起</p></div>
                   <div><a href=""><img src="./小米官网抠图/小米下拉菜单" alt=""></a><span>Xiaomi Civi</span><p>2599元起</p></div>
                   <div><a href=""><img src="./小米官网抠图/小米下拉菜单" alt=""></a><span>Xiaomi Civi</span><p>2599元起</p></div>
                   <div><a href=""><img src="./小米官网抠图/小米下拉菜单" alt=""></a><span>Xiaomi Civi</span><p>2599元起</p></div>
               </div>   
           </div>


.tounav {
    display: flex;
    margin: 20px auto;
}

.tounav .tounav {
    flex: 20%;
}

.tubiao img {
    width: 55px;
    height: 55px;
    border-radius: 20px;
}

/* 商品介绍栏模块CSS */
.jiesao {
    flex: 50%;
}

.jiesao ul {
    width: 670px;

    height: 55px;
    margin-left: 200px;

    display: flex;

}

.jiesao ul li {
    position: relative;
}

.jiesao ul li a {

    font-size: 16px;
    color: #333;
    margin: 0 5px;
    text-align: center;
    line-height: 55px;
}

/* 小米商品下拉菜单CSS */
.xial {
    position: absolute;
    top: 130px;
    left: 0;
    width: 100%;
    display: none;
    height: 250px;
    border-bottom: 1px solid #F5F5F5;
    border-top: 1px solid #CCC;
    background-color: #FFFFFF;
    box-shadow: 0px 8px 10px rgba(0, 0, 0, .1);
    z-index: 20;
}

.la {
    height: 250px;
    display: flex;
    justify-content: space-around;
    margin: 10px auto;
}

.la div {
    flex: 1;
    text-align: center;
    width: 200px;
    height: 160px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 5px 0;
    

}

.la div a {
    width: 160px;
    height: 110px;
    border-right: 1px solid #E0E0E0;
}

.la div a img {
    width: 100%;
    height: 100%;
}
.la span{
    font-size: 14px;
    margin: 20px 0px 5px 0px;
}
.la div p{
    color: #FF4500;
    font-size: 12px;
}


$(".jiesao li").on({
    mouseover:function(){
        var index =$(this).index()
        $(".xial").eq(index).stop().fadeIn("slow")
    },
    mouseout:function(){
        
        $(".xial").stop().fadeOut("slow")
    }
    
})
运行结果及报错内容
我的解答思路和尝试过的方法
我想要达到的结果

我想在鼠标离开导航栏下拉菜单也能显示只有移到其他内容区域下拉菜单才隐藏

  • 写回答

1条回答 默认 最新

      报告相同问题？

      相关推荐 更多相似问题

      问题事件

      • 系统已结题 12月23日
      • 已采纳回答 12月15日
      • 修改了问题 11月20日
      • 创建了问题 11月20日

      悬赏问题

      • ¥15 有没有可以下载钉钉群文件视频的软件
      • ¥15 如何用LaTeX打出如下的表格
      • ¥15 程序填空补充完整的代码一共三题
      • ¥15 在MySQL中使用while建表，报错
      • ¥15 DB2线上告警，三表联查sql优化。
      • ¥15 python导入pyautogui报错，网上也没有找到解决方法如何解决？
      • ¥15 关于IPSEC和NAT SERVER同时使用的情况下，该如何解决客户端访问服务器的问题
      • ¥15 eclipse项目在idea运行部署到云服务器
      • ¥100 sql server image类型转换
      • ¥15 关于matlab的问题