相关疑难解决方法(0)

我正在开发一个响应式设计,想知道使用JavaScript或CSS设置元素样式是否更好？CSS肯定更容易维护,我不会争辩,但我更习惯用JavaScript构建对象.也许我为自己做了比我应该做的更多的工作,但我觉得我有更多的控制整体,我喜欢能够挂钩屏幕上的每个对象.

我有构造函数生成整个页面布局并将其推入DOM.没有图像,只有纯JavaScript样式和SVG图标.

我想知道的是:

• 什么表现更好？
• 什么,如果JS或CSS有任何硬件支持？
• 纯CSS解决方案比使用CSS Calc()更好吗？
• 什么更便携？
• 什么更向前兼容？

我倾向于避免使用jQuery,因为我更感兴趣的是学习什么使得现在正常工作,所以只有纯JavaScript和CSS3.

我试图制作一个简单的css下拉菜单.将鼠标悬停在链接上时,我无法实现下拉子菜单.下面是我的html和css规则,谢谢.

    ul#menu li
    {
        position:relative;
        list-style-type:none;
        float: left;
        padding:0px;
        width: 125px;
        height: 25px;
    }
    ul#sub1 li
    {
        position:absolute;
        left:0;
        width:125px;
        visibility: hidden;
    }
    ul#menu li:hover #sub1
    {
        visibility:visible;
    }


    <ul id="menu">
        <li><a href="#">Hyperlink 1</a></li>
        <li><a href="#">Hyperlink 2</a>
            <ul id="sub1"> 
                <li><a href="#">Hyperlink 2.1</a></li>
                <li><a href="#">Hyperlink 2.2</a></li>
            </ul>
        </li>
        <li><a href="#">Hyperlink 3</a></li>
        <li><a href="#">Hyperlink 4</a></li>
    </ul>

我有这样的菜单结构:

<ul class"menu">
  <li>
    <a>item1</a>
    <ul>
      <li><a>subitem1</a></li>
      <li><a>subitem2</a></li>
      <li><a>subitem3</a></li>
      <li><a>subitem4</a></li>
      <li>
        <a>item2</a>
        <ul class="sub-ul-2">
          <li><a>subitem5</a></li>
          <li><a>subitem6</a></li>
          <li><a>subitem7</a></li>
          <li><a>subitem8</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

我的要求是,当我将鼠标悬停在item1上时, subitem1,subitem2,subitem3,subitem4只需要显示,而subitem5 - 8则无需显示.

当我将鼠标悬停在item2上时,只需要显示subitem5 - 8.我怎样才能通过使用css实现这一目标？

我试过了:

ul.menu ul{
 display: none;
}
ul.menu li:hover:first-child ul {
  display:block;
}