下拉菜单只有CSS

早上好：D下拉菜单只有CSS

我想为我的网站做一个菜单。在我的CSS我有一个.responsive-menuul 我希望显示当屏幕宽度是750px。我为此做了一个@media，但它不起作用。我试图只使用CSS，所以我不想使用任何JavaScript。当您在全屏显示网站时，菜单正在按照我的要求工作，唯一的问题是响应菜单。我正在使用复选框使菜单onclick。

所以，如果屏幕宽度为750px，比我想.menu走开并显示.responsive-menu

这是我的HTML：

<html> 
    <head> 
     <link rel="stylesheet" href="stylesheet.css"> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> 
    </head> 
    <body> 
     <div class="header"> 
      <div class="naam"> 
       <p>Bart van Bussel <i class="fa fa-check"></i></p> 
      </div> 
      <input type="checkbox" id="trigger" /> 
      <div class="menu"> 
       <ul> 
        <li> 
         <label for="trigger"><i class="fa fa-bars"><span class="menu-naam">Menu</span></i></label> 
         <ul class="dropdown"> 
          <li> 
           <a href="">Random stuff</a> 
          </li> 
          <li> 
           <a href="">stuff I made</a> 
          </li> 
          <li> 
           <a href="">About myself</a> 
          </li> 
         </ul> 
        </li> 
       </ul> 
      </div> 
      <div class="responsive-menu"> 
       <ul> 
        <li>About myself</li> 
        <li>stuff I made</li> 
        <li>Random stuff</li> 
       </ul> 
      </div> 
     </div> 
    </body> 
</html>

这是我的CSS：

* { 
    padding:0; 
    margin:0; 
    font-family:arial; 
} 

/*--------Header-------*/ 

.header { 
    background-color:#f1f1f1; 
    height:50px; 
    width:100%; 
    position: fixed; 
    box-shadow: inset 0px -200px 16px -200px rgba(0,0,0,0.75); 
} 

.naam p{ 
    font-size:25px; 
    padding:12px; 
    width:100%; 
} 

/*--------Menu-------*/ 

.menu ul li i { 
    float:right; 
    font-size:35px; 
    position:relative; 
    top:-65px; 
    padding:20px; 
    cursor: pointer; 
} 

.menu ul li ul { 
    display:none; 
} 

.menu ul li ul li { 
    display:inline; 
    float:right; 
    position:relative; 
    top:-53px; 
} 

.dropdown li a{ 
    color:black; 
    text-decoration:none; 
    padding:20px; 
} 

.menu-naam { 
    font-family:arial; 
    font-size:25px; 
    padding:8px; 
    position:relative; 
    bottom:3px; 
} 

.responsive-menu ul { 
    display:none; 
    color:black; 
    position:absolute; 
    background-color:rgba(255,255,255,0.8); 
    width:100%; 
    top:50px; 
} 

.responsive-menu ul li { 
    padding:10px; 
    text-align:center; 
} 

#trigger { 
    display: none; 
} 
#trigger:checked + .menu ul li ul { 
    display: block; 
} 

#trigger:checked + .menu ul li { 
    color:gray; 
} 

/*--------Media-------*/ 

@media screen and (max-width:750px) { 
    .background p { 
     font-size:900%; 
    } 
    .menu ul li ul li { 
     display:none; 
    } 
    #trigger:checked + .responsive-menu ul { 
     display:block; 
    } 
}

我希望有人能帮我解决这个问题:)

这是JSfiddle。

来源

2016-02-05 Bart Bussel

问题是与#trigger:checked + .responsive-menu，这是行不通的。 +运算符仅适用于源中彼此相邻的元素。

解决方案：使用~运算符，如果两个元素之间有东西，也可以使用。

New fiddle。

来源

2016-02-05 10:49:15

谢谢:)被卡在那几天！ –

你可以试试这个：

* { 
    padding:0; 
    margin:0; 
    font-family:arial; 
} 

/*--------Header-------*/ 

.header { 
    background-color:#f1f1f1; 
    height:50px; 
    width:100%; 
    position: fixed; 
    box-shadow: inset 0px -200px 16px -200px rgba(0,0,0,0.75); 
} 

.naam p{ 
    font-size:25px; 
    padding:12px; 
    width:100%; 
} 

/*--------Menu-------*/ 

.menu ul li i { 
    float:right; 
    font-size:35px; 
    position:relative; 
    top:-65px; 
    padding:20px; 
    cursor: pointer; 
} 

.menu ul li ul { 
    display:none; 
} 

.menu ul li ul li { 
    display:inline; 
    float:right; 
    position:relative; 
    top:-53px; 
} 

.dropdown li a{ 
    color:black; 
    text-decoration:none; 
    padding:20px; 
} 

.menu-naam { 
    font-family:arial; 
    font-size:25px; 
    padding:8px; 
    position:relative; 
    bottom:3px; 
} 

.responsive-menu ul { 
    display:none; 
    color:black; 
    position:absolute; 
    background-color:rgba(255,255,255,0.8); 
    width:100%; 
    top:50px; 
} 

.responsive-menu ul li { 
    padding:10px; 
    text-align:center; 
} 

#trigger { 
    display: none; 
} 
#trigger:checked + .menu ul li ul { 
    display: block; 
} 

#trigger:checked + .menu ul li { 
    color:gray; 
} 

/*--------Media-------*/ 

@media screen only and (max-width:750px) { 
    .background p { 
     font-size:900%; 
    } 
    .menu ul li ul li { 
     display:none; 
    } 
    #trigger:checked + .responsive-menu ul { 
     display:block; 
    } 
}

DEMO HERE

来源

2016-02-05 10:47:22

没有。当屏幕宽度为750px时，菜单将消失并显示.responsive-menu。 –

@IvinRaj看来你试图解决OP描述的一个不同的问题。如果您不确定OP的要求，您应该在评论中提出要求。另请参阅[我们是否可以关注质量而不是数量？]（http：//meta.stackoverflow。com/q/316112/1016716）在元，特别是说的评论，_包含“尝试这个”的答案的数量是“使用这个”的两倍大......_ –

@media它的工作完美，错误是您使用的选择器。

如果你这样说，你只hidding 李，而不是他的父母。菜单：

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

，并使用UL，您使用的显示：无;在UL元素上，没有.responsive菜单

#trigger:checked + .responsive-menu ul{ 
    display: block; 
}

其他事情：.responsive-menu不嵌套到：#trigger：检查。 #trigger的嵌套元素是.menu。所以这不会工作。

在恢复，只是这样做你@media内：

.menu{ 
    display:none; 
} 

.responsive-menu ul{ 
    display: block; 
}

如果我的回答对您没有帮助，让我知道，我解释说，不工作我想更好的

来源

2016-02-05 10:59:16

下拉菜单只有CSS

回答

相关问题