html - 在移动设备上隐藏导航菜单的一部分并让移动样式表起作用

Question

我的网站在桌面上有一个由五个部分组成的导航栏，在移动设备上应该有四个可见部分。我根本无法让我的移动样式表工作，而且我不知道如何只隐藏导航栏的最后一部分及其子项。

在每个页面中我都链接了三个样式表:

<link rel="stylesheet" type="text/css" media="only screen and (max-width: 767px)" href="css/small_device.css"/>
<link rel="stylesheet" type="text/css" media="only screen and (min-width: 768px) and (max-width: 959px)" href="css/medium_device.css"/>
<link rel="stylesheet" type="text/css" href="css/style.css"/>

在样式表本身中，我试图通过添加以下内容来隐藏我想要隐藏的导航:

.vendors {
display: none;}

而不是原来的地方:

.drop_menu {
background:#000000;
background-repeat: no-repeat;
padding:0;
margin:0;
list-style-type:none;
height:150px;
}

.drop_menu li { 
float:left;
}

.drop_menu li a {
padding:10px 30px;
display:block;
color:#FFFFFF;
text-decoration:none;
font:1em arial, verdana, sans-serif;
}

/* Submenu */
.drop_menu ul {
position:absolute;
left:-9999px;
top:-9999px;
list-style-type:none;
}

.drop_menu li:hover { 
position:relative; background:#0a208d; 
}

.drop_menu li:hover ul {
left:0px;
top:30px;
background:#0a208d;
padding:0px;
}

.drop_menu li:hover ul li a {
padding:5px;
display:block;
width:170px;
text-indent:15px;
background-color:#0a208d;
}

.drop_menu li:hover ul li a:hover { 
background:#000000; 
}

因为在导航中我把它当作

<div class="drop">
<ul class="drop_menu">    
    <li>. . . </li>
    <li>. . . </li>
    <li>. . . </li>
    <li>. . . </li>
    <li><a href="vendors.html" class="vendors">Vendors</a>
        <ul>
            <li><a href="register.html" class="vendors">Register</a></li>
        </ul>
    </li>
</ul>
</div>

很抱歉，如果我错过了关于此类问题的已经回答的帖子，但我已经搜索了几个小时，但找不到太多。我发现的内容告诉我链接样式表并使用@media 东西。我不知道我应该把 @media blah blah {} 放在哪里，当我尝试将它放在样式表中时，它什么也没做。帮忙？

Answer 1

如果您想将所有内容合并到一个样式表中，使用 @media 的正确方法是以下内容:

@media screen and (min-width: 768px) and (max-width: 767px) {
  .vendors {
    display: none;
  }

  /* Styles for both max-width 767px and min-width 768px */

}

@media screen and (max-width: 767px) {

  /* Styles for max-width 767px */

}

@media screen and (min-width: 768px) {

  /* Styles for min-width 768px */

}

如果你想隐藏所有<li>对于特定的屏幕分辨率，vendors类应该在 li 上标记而不是 a标签。