Question

我正在尝试在tumblr中添加导航菜单。我禁用了默认的移动主题。但是当我输入用于媒体查询的CSS时，菜单消失了。我该如何解决这个问题？

我确实喜欢tumblr博客的响应能力。我希望我能保持响应能力，同时也增加对菜单的响应能力。这是否可以在tumblr上实现？

我在

中添加了这个

<link rel="stylesheet" href="http://static.tumblr.com/vr9xgox/K7fnmibsu/main-min.css">

<link rel="stylesheet" href="http://static.tumblr.com/q3xct0m/qVBnmxw9i/styles.css">

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

<script src="http://static.tumblr.com/q3xct0m/P9Unmxvt1/script.js"></script>

HTML

<div id='cssmenu'>
<ul>
   <li><a href='#'>Home</a></li>
   <li class='active'><a href='#'>Skin Care</a>
      <ul>
         <li><a href='#'>Skin Care</a>

         </li>

         <li><a href='#'>Product 2</a>
            <ul>
               <li><a href='#'>Sub Product</a></li>
               <li><a href='#'>Sub Product</a></li>
            </ul>
         </li>
      </ul>
   </li>
   <li class='active'><a href='#'>Make Up</a>
      <ul>
         <li><a href='#'>Product 1</a>
            <ul>
               <li><a href='#'>Sub Product</a></li>
               <li><a href='#'>Sub Product</a></li>
            </ul>
         </li>

         <li><a href='#'>Product 2</a>
            <ul>
               <li><a href='#'>Sub Product</a></li>
               <li><a href='#'>Sub Product</a></li>
            </ul>
         </li>
      </ul>
   </li>
   <li class='active'><a href='#'>Masks</a>
      <ul>
         <li><a href='#'>Product 1</a>
            <ul>
               <li><a href='#'>Sub Product</a></li>
               <li><a href='#'>Sub Product</a></li>
            </ul>
         </li>

         <li><a href='#'>Product 2</a>
            <ul>
               <li><a href='#'>Sub Product</a></li>
               <li><a href='#'>Sub Product</a></li>
            </ul>
         </li>
      </ul>
   </li>
   <li><a href='#'>About</a></li>
   <li><a href='#'>Contact</a></li>
</ul>
</div>

Answer 1

问题在于这段代码：

  #cssmenu ul {
    width: 100%;
    display: none;
  }

这是在这个巨大的媒体查询中：

@media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {

删除display:none。希望这能解决问题。

这是一个更新的小提琴：https://jsfiddle.net/lharby/b1jczua7/1/

添加CSS时，tumblr导航菜单消失

1 个答案: