Question

我们的网站有一个主菜单和子菜单。当我们悬停主菜单时，会显示其子菜单。我的问题是当网站加载时，显示子菜单。我只需要在将鼠标悬停在主菜单上时显示子菜单。

在css下面

header nav {
    float:right;
}
header nav ul li {
    float:left;
}
header nav ul li a {
    font-size:22px;
    color:#fff;
    height:67px;
    line-height:67px;
    text-decoration:none;
    width:101px;
    text-align:center;
    float:left;
    background:#433b8f;
    background-image:gradient(top, #383282, #484095);
    background-image:-moz-linear-gradient(top, #383282, #484095);
    background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, #383282), color-stop(1, #484095));
 filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#383282', EndColorStr='#484095');
    -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#383282', EndColorStr='#484095')";
}
header nav ul li a.current, header nav ul li a:hover {
    padding-bottom:5px;
}

header nav ul li ul {
    width: 170px;
height: auto;
position: absolute;
top: 100%;
left: 0px;
z-index: 10;
}
header nav ul li ul.d{
    background-color:#F00;
    width: 170px;
height: auto;
position: absolute;
top: 100%;
left: 0px;
z-index: 10;
}
header nav ul li li a{
display: block;
float: none;
}
header nav ul li li a {
padding: 10px 15px 10px 15px;
background: #61D2D6;
border-top: none;
text-transform: none;
letter-spacing: normal;
}

header nav ul li:nth-of-type(2) a {
 background:#0184cd;
 background-image:-moz-linear-gradient(top, #017bc8, #018ed3);
 background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, #017bc8), color-stop(1, #018ed3));
 filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#017bc8', EndColorStr='#018ed3');
 -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#017bc8', EndColorStr='#018ed3')";
}
header nav ul li:nth-of-type(3) a {
 background:#7cbc19;
 background-image:-moz-linear-gradient(top, #73b515, #86c31d);
 background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, #73b515), color-stop(1, #86c31d));
 filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#73b515', EndColorStr='#86c31d');
 -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#73b515', EndColorStr='#86c31d')";
}
header nav ul li:nth-of-type(4) a {
 background:#ffbc00;
 background-image:-moz-linear-gradient(top, #ffb500, #ffc300);
 background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, #ffb500), color-stop(1, #ffc300));
 filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffb500', EndColorStr='#ffc300');
 -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffb500', EndColorStr='#ffc300')";
}
header nav ul li:nth-of-type(5) a {
 background:#f07502;
 background-image:-moz-linear-gradient(top, #ee6c01, #f27f02);
 background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, #ee6c01), color-stop(1, #f27f02));
 filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ee6c01', EndColorStr='#f27f02');
 -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#ee6c01', EndColorStr='#f27f02')";
}
header nav ul li:nth-of-type(6) a {
 background:#d00110;
 background-image:-moz-linear-gradient(top, #d00110, #da0116);
 background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, #d00110), color-stop(1, #da0116));
 filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#d00110', EndColorStr='#da0116');
 -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#d00110', EndColorStr='#da0116')";
}

和html代码是

<nav>
      <ul id='menu'>
        <li><a href="index.html">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="Marketing.html"class="current">Marketing</a>
         <ul style="width:60px; border-bottom-color:#F00;"><li style="margin: -592px 964px 0px;"><a href="http://localhost/new_vinu_sir/Marketing.html" >ForSale</a>                     
                                </ul></li>
        <li><a href="contacts.php" class="current">Contact</a></li>
       <!-- <li></li>-->
      </ul>
    </nav>

当悬停显示的菜单子菜单时，使用

下面的代码

<script type="text/javascript">
$('#menu li').hover(function() {
        $(this).find('ul').show();
    },
    function() {
      $(this).find('ul').hide();
});
</script>

为它提供一个解决方案

Answer 1

默认情况下，HTML或CSS文件中没有任何内容隐藏子菜单。

您应该将“display: none”属性添加到子菜单的CSS中。我假设这是带有header nav ul li ul选择器的CSS块。

当您悬停或取消悬停时，此属性将动态更改。以上只是一个起点。

（另外，如果您只想显示一个级别的子菜单，则应使用child代替find。）

Answer 2

最初使该子菜单隐藏（display:none;），它将起作用

<强> DEMO

 <ul style="width:60px; display:none; border-bottom-color:#F00;"><li style="margin:-328px 294px 0px">

Html样式问题

2 个答案: