Question

你好那里的人我是一个想要掌握“css”和“responssss”艺术的新手。这是我的代码，我正在尝试的是，当您将鼠标悬停在mobile-custom-sub-left-right上时，可以将移动自定义子左侧和.mobile-custom-sub-menu li > ul打开。{/ p>

<div class="mobile-custom-sub-left">Categories</div>
 <div class="mobile-custom-sub-left-right">All
    <ul class="mobile-custom-sub-menu">
    <li>
        <ul>
        <a href="#"><li>Restaurant</li></a>
            <a href="#"><li>Bars</li></a>
            <a href="#"><li>Food</li></a>
            <a href="#"><li>Wineries</li></a>
            <a href="#"><li>Shops</li></a>
            <a href="#"><li>Spa &amp; Beauty</li></a>
            <a href="#"><li>Adventures</li></a>
            <a href="#"><li>Experiences</li></a>
            <a href="#"><li>Hotels</li></a>
            <a href="#"><li>Art</li></a>
        </ul>
    </li>
    </ul>
    </div>

正在运行的CSS！

.mobile-custom-sub-left-right:hover .mobile-custom-sub-menu li > ul{
display:block;
}

而且我正在努力让它发挥作用

.mobile-custom-sub-left:hover  div.mobile-custom-sub-left-right ul.mobile-custom-sub-menu li ul{
    display:block!important;
    }

Answer 1

EDIT FIDDLE DEMO：http://jsfiddle.net/spk063/BCwFX/2/

.mobile-custom-sub-left:hover, .mobile-custom-sub-left-right:hover, .mobile-custom-sub-menu li  ul{
display:block;
}

你应该将HTML更改为

<ul>
    <li><a href="#">Restaurant</a></li>
        <li><a href="#">Bars</a></li>
        <li><a href="#">Food</a></li>
        <li><a href="#">Wineries</a></li>
        <li><a href="#">Shops</a></li>
        <li><a href="#">Spa &amp; Beauty</a></li>
        <li><a href="#">Adventures</a></li>
        <li><a href="#">Experiences</a></li>
        <li><a href="#">Hotels</a></li>
        <li><a href="#">Art</a></li>
    </ul>

Answer 2

<html>    
<style>
p
 {
margin-left:100px; text-align:justify;
font-size:20px;
 }

nav ul ul {
display: none;
}

nav ul li:hover > ul {
    display: block;
}
nav{
margin-left:400px;}
   nav ul {

position: relative;
display: inline-table;

 }
nav ul:after
    {
    content: ""; clear: both; display: block;
}
   nav ul li 
    {
float: left;
    }
nav ul li:hover {
    background: #4b545f;

}
    nav ul li:hover a {
        color: #fff;
    }

nav ul li a {
    display: block; padding: 25px 40px;

}
  nav ul ul {
background: #5f6975; border-radius: 0px; padding: 0;
position: relative; top: 100%;
  }
nav ul ul li {
    float: none; 
    border-top: 1px solid #6b727c;
    border-bottom: 1px solid #575f6a;
    position: relative;
}
    nav ul ul li a {
        padding: 15px 40px;
        color: #fff;
    }   

  nav ul ul ul {
position: relative; left: 100%; top:0;
  }

 </style>
  <nav>
<ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Restaurant</a>
        <ul>
            <li><a href="#">Coconut</a></li>
            <li><a href="#">Rava </a></li>


            </li>
        </ul>
    </li>
    <li><a href="#">Sweets</a>

    </li>
    <li><a href="#">Exclusive</a></li>
</ul>
 </nav>
</html>

 http://jsfiddle.net/tZ9Uu/

用悬停显示div

2 个答案: