Question

大家好，我是HTML5和CSS的新手。尝试以经典设备图标的形式创建dropdown菜单，但它不起作用。也许有人可以回答我。

我通过显示非隐藏它，并说它在悬停时显示块也许这可能是我不知道的切片的一些问题。

<header class="Header"> 
  <!-- Head navigation--> 
    <div>
      <a href="#" title="cart"> <img src="images/cart_logo_webb_design.svg" alt="cart"></a>
      <a href="#" title="Search"> <img src="images/search_logo_webb_design.svg" alt="search glass"></a>
   </div>
   <div>
  <img src="images/k_logo_webb_design.svg" alt="CompanyLogo">
  </div>

  <nav id="MainNavigation">
   <a href="#" title="MenuIcon"><img src="images/menu_logo_webb_design.svg" alt="Menu icon"></a>
    <ul id="dropDownMenu">
        <li>
        <a class="Sub_Menu_Link" href="#" title="Woman">Woman</a>
        <ul>
        <li><a href="#">1</a> </li>
         <li><a href="#">2</a> </li>
          <li><a href="#">3</a> </li>
           <li><a href="#">4</a> </li>
            <li><a href="#">5</a> </li>
        </ul>
        </li>
        <li>
        <a class="Sub_Menu_Link" href="#" title="Man">Man</a>
        <ul>
       <li><a href="#">1</a> </li>
         <li><a href="#">2</a> </li>
          <li><a href="#">3</a> </li>
           <li><a href="#">4</a> </li>
            <li><a href="#">5</a> </li>
        </ul>
        </li>
        <li><a href="#" title="Sale">Sale</a></li>
      </ul>
      </nav>


and my css here

/*GeneralHeader*/
header{
    position:relative;
    display:block;
    top:15px;   
    z-index: 1;

}

.Header img{
    width:36px;
    height:40px;

    }

header div:first-of-type{
    float:right;
    background-color:red;
    margin-right:0;
    width:30%;
    position:absolute;
    top:0;
    right:0;
}

header div:last-of-type{
position:relative;
    left:50%;

}

header div:after{
    content:"";
    visibility:hidden;
    display:block;
    clear:both;
}
 nav{
    float:left;
    width:20%;
     position:absolute;
    left:0;
     top:0;
    background-color:red;

}



nav:after{
        content:"";
    visibility:hidden;
    display:block;
    clear:both;
}
nav ul{
    margin:5%;
    padding:0;
}
nav ul li:hover{
    background-color:white;
}
nav ul >ul:hover{
    display:block;
}
nav ul li a{
    display:inline-block;
    color:black;
    padding: 5px 3px;
    width:125px;
    text-decoration:none;
    position:relative;
}

nav ul li a:visited{
    color:rgba(70,80,0,.65);
}

nav ul li a:hover{
    color:green;
}

nav ul ul{
    position:absolute;
    display:none;

}
nav ul ul li{     /*  */
    position:relative;
}

nav ul ul ul{   /* denna innbär att de 3e underlänkarna ``positineras till vänster om sna föräldrar.. ej nödvändigt för mig hehe */
    left:100%;
    top:0;
}

Answer 1

nav>ul ul{
  display: none;
}
nav>ul li:hover ul{
  display: block;
}

如果您有用，请使用此代码段

css下拉菜单不会打开胡佛

1 个答案: