Question

由于某种原因，我可以通过CSS“ display：none”代码隐藏项目的子菜单，但是无法按照我的第98行的方法将鼠标悬停在“ ONLINE TRADING”链接上来重新显示该子菜单CSS代码。我猜想，解决我的困境的方法隐藏在明显的视线范围内，但超出了mt的感知范围。

.nav_wrapper {/*---MAIN NAVIGATION WRAPPER---*/
position: fixed;
z-index: 9999;
left: 0;
top: 0;
height: 90px;
width: 100%;
transition: top .1s ease-out;
text-align: left;  
}

nav {
margin: 0 auto;   
}

.scroll {
top: 0
}

.no-scroll {
top: 0;
z-index: 9999
}

main {
margin: 0 auto;
font-size: 12px
}

.menu-link {
display: none
}

.menu {
height: 90px;
background: #FFFFFF;
transition: all 1.0s ease;
padding: 0 0 0 0;  
}

.menu ul {
padding: 0;
margin: 0;
list-style: none;
position: relative;
display: inline-block;
text-align: right;
}

.menu ul li {
padding: 0;
}

.menu>ul>li {
display: inline-block;  
}

.menu ul li a {
padding: 60px 10px 0px 0px;
display: block;
text-decoration: none;
color: #000;    
text-transform: uppercase;
text-align: left;
-o-transition: .3s;
-ms-transition: .3s;
-moz-transition: .3s;
-webkit-transition: .3s;
transition: .3s
}

.menu ul li.hover>a {
color: #990100;
font-size: 12pt;
}

.menu ul li>a {
font-size: 12pt;
margin-top: 0;
}

.menu ul ul>li a {
padding: 10px 10px;
height: auto;
}

.menu ul ul>li a:hover {
padding: 10px 10px;
height: auto;
background: #990100;
color: #FFFFFF;
}

.menu ul ul>li  {
display:none;
}

.menu ul ul>li:hover   {
display:block;
}

    <div class="nav_wrapper"> 
  <div class="spinner-master">
    <input type="checkbox" id="spinner-form" />
    <label for="spinner-form" class="spinner-spin">
    <div class="spinner diagonal part-1"></div>
    <div class="spinner horizontal"></div>
    <div class="spinner diagonal part-2"></div>
    </label>
  </div>

    <nav id="menu" class="menu"><div onclick="location.href='index.html';" class="headertablelogo"></div>
    <ul class="dropdown">
      <li><a href="#top" target="_self">Home</a></li>
      <li><a href="#onlinetrading" target="_self">Online Trading</a></li>      
        <ul>
        <li><a href="#lngbuyers">Marketplace for LNG Buyers</a></li>
        <li><a href="#lngsellersbuyers">Marketplace for LNG Sellers</a></li>
        <li><a href="traders">Marketplace for LNG Traders</a></li>
        </ul>         
      <li><a href="#counterpartyrisk" target="_self">Counterparty Risk</a></li>
      <li><a href="newsarchives" target="_self">News </a></li>
       <ul>
        <li><a href="traders">News Archives</a></li>
        </ul>  
      <li><a href="#blog" target="_self">Blog </a></li>
      <li><a href="#team" target="_self">Team </a></li>
      <li><a id="loginbutton" href="https://live.redwoodmarkets.com" target="_blank">LOGIN </a></li>
    </ul>
  </nav>
 </div>

https://jsfiddle.net/Moribund/381ntcmx/15/

Answer 1

如果您已经隐藏了li，如何将其悬停。

在下面的代码中，您隐藏了li。

.menu ul ul>li  {
    display:none;
}

在您编写的以下代码中，将鼠标悬停在上面显示。

.menu ul ul>li:hover   {
    display:block;
}

如果将鼠标悬停在ul上然后显示li，请更改代码。我不确定在CSS中是否可以使用jquery。 jQuery代码。

$(".menu ul ul:hover").hover(function(){
        $(".menu ul ul>li").css("display", "block");
        });
});

Answer 2

如下更新您的CSS，

.nav_wrapper {/*---MAIN NAVIGATION WRAPPER---*/
position: fixed;
z-index: 9999;
left: 0;
top: 0;
height: 90px;
width: 100%;
transition: top .1s ease-out;
text-align: left;  
}

nav {
margin: 0 auto;   
}

.scroll {
top: 0
}

.no-scroll {
top: 0;
z-index: 9999
}

main {
margin: 0 auto;
font-size: 12px
}

.menu-link {
display: none
}

.menu {
height: 90px;
background: #ffffff;
transition: all 1.0s ease;
padding: 0 0 0 0;  
}

.menu ul {
padding: 0;
margin: 0;
list-style: none;
position: relative;
display: inline-block;
text-align: right;
}

/*---Set main menu item will be display in line--*/
.menu ul li {
display: inline-block;  
}

/*---Set main menu item background color on hovering with mouse--*/
.menu ul li:hover {
  background-color: #f95250;
}

/*---Set main menu link properties--*/
.menu ul li a, visited {
padding: 60px 10px 0px 0px;
display: block;
text-decoration: none;
color: #000;    
text-transform: uppercase;
text-align: left;
-o-transition: .3s;
-ms-transition: .3s;
-moz-transition: .3s;
-webkit-transition: .3s;
transition: .3s
}

/*---Set main menu link properties on hovering with mouse--*/
.menu ul li a:hover {
color: White;
font-size: 12pt;
text-decoration: none;
}

/*---Display submenu on hovering on main menu item--*/
.menu ul li:hover ul {
display: block;
}

/*---Set submenu hide initialy--*/
.menu ul ul {
  display: none;
  position: absolute;
  background-color: #990100;
}

/*---Set submenu item properties--*/
.menu ul ul li {
  display: block;
  text-align: left;
}

/*---Set submenu link properties--*/
.menu ul ul li a, visited {
color: black;
}

/*---Set submenu link properties on hovering with mouse--*/
.menu ul ul li a:hover {
   color: white;
   display: block;
}

 <div class="nav_wrapper"> 
  <div class="spinner-master">
    <input type="checkbox" id="spinner-form" />
    <label for="spinner-form" class="spinner-spin">
    <div class="spinner diagonal part-1"></div>
    <div class="spinner horizontal"></div>
    <div class="spinner diagonal part-2"></div>
    </label>
  </div>

    <nav id="menu" class="menu"><div onclick="location.href='index.html';" class="headertablelogo"></div>
    <ul class="dropdown">
      <li><a href="#top" target="_self">Home</a></li>
      <li><a href="#onlinetrading" target="_self">Online Trading</a>          
       <ul>
        <li><a href="#lngbuyers">Marketplace for LNG Buyers</a></li>
        <li><a href="#lngsellersbuyers">Marketplace for LNG Sellers</a></li>
        <li><a href="traders">Marketplace for LNG Traders</a></li>
       </ul>             
      </li>      
           
      <li><a href="#counterpartyrisk" target="_self">Counterparty Risk</a></li>
      <li><a href="newsarchives" target="_self">News </a> 
       <ul>
        <li><a href="traders">News Archives</a></li>
       </ul>     
      </li>
      
      <li><a href="#blog" target="_self">Blog </a></li>
      <li><a href="#team" target="_self">Team </a></li>
      <li><a id="loginbutton" href="https://live.redwoodmarkets.com" target="_blank">LOGIN </a></li>
    </ul>
  </nav>
 </div>

在主菜单ul标签内添加子菜单li标签

下拉菜单显示/隐藏

2 个答案: