Question

我有桌面的纯CSS菜单，悬停时从左向右扩展。

<nav id="nav">
  <a href="#nav" title="Show navigation"></a>
  <a href="#" title="Hide navigation"></a>
  <ul class="dropdown dropdown-vertical">
    <span class="clearfix">
        <li class="dir">ITEM 1
            <ul>
                <li class="dir">SUB ITEM 1
                    <ul>
                        <li><a href="">SUB MENU 1</a></li>
                        <li><a href="">SUB MENU 2</a></li>
                    </ul>
                </li>
                <li class="dir">SUB ITEM 2
                    <ul>
                        <li><a href="">SUB MENU 1</a></li>
                        <li><a href="">SUB MENU 2</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li class="dir"><a href="">ITEM 2</a>
            <ul>
                        <li><a href="">SUB MENU 1</a></li>
                        <li><a href="">SUB MENU 2</a></li>
            </ul>
        </li>
        <li class="dir"><a href="/dev/tradeshows.htm">ITEM 3</a>
            <ul>
                        <li><a href="">SUB MENU 1</a></li>
                        <li><a href="">SUB MENU 2</a></li>
            </ul>
        </li>
        <li class="dir">ITEM 4
            <ul>
                        <li><a href="">SUB MENU 1</a></li>
                        <li><a href="">SUB MENU 2</a></li>
            </ul>
        </li>
        <li><a href="">ITEM 5</a></li>
        <li class="dir">ITEM 6
            <ul>
                        <li><a href="">SUB MENU 1</a></li>
                        <li><a href="">SUB MENU 2</a></li>          
            </ul>
        </li>
        <li><a href="">ITEM 6</a></li>
        <li class="dir">ITEM 7
            <ul>
                        <li><a href="">SUB MENU 1</a></li>
                        <li><a href="">SUB MENU 2</a></li>
            </ul>
        </li>
        <li><a href="">ITEM 8</a></li>
            </span>
  </ul>
</nav>

CSS

@charset "UTF-8";
body {
  padding: 1.25em;
  /* 20 */
}

ul.dropdown,
ul.dropdown li,
ul.dropdown ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul.dropdown {
  position: relative;
  z-index: 597;
  float: left;
}

ul.dropdown li {
  float: left;
  line-height: 1.3em;
  vertical-align: middle;
  zoom: 1;
}

ul.dropdown li.hover,
ul.dropdown li:hover {
  position: relative;
  z-index: 599;
  cursor: default;
}

ul.dropdown ul {
  visibility: hidden;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 598;
  width: 100%;
}

ul.dropdown ul li {
  float: none;
}

ul.dropdown ul ul {
  top: 0px;
  left: 99%;
}

ul.dropdown li:hover > ul {
  visibility: visible;
}

ul.dropdown-vertical {
  width: 110px;
}

ul.dropdown-vertical ul {
  top: 0px;
  left: 99%;
}

ul.dropdown-vertical li {
  float: none;
}

ul.dropdown {
  font-weight: normal;
  font-family: arial, verdana, sans-serif;
  font-size: 12px;
}

ul.dropdown li {
  padding: 4px 5px;
  border-style: solid;
  border-width: 0px 0px 1px 0;
  border-color: #fff #d9d9d9 #d9d9d9;
  background-color: #ffffff;
  color: #000;
}

ul.dropdown li.hover,
ul.dropdown li:hover {
  background-color: #eee;
  color: #000;
}

ul.dropdown a:link,
ul.dropdown a:visited {
  color: #000;
  text-decoration: none;
}

ul.dropdown a:hover {
  color: #000;
}

ul.dropdown a:active {
  color: #ffa500;
}


/* -- level mark -- */

ul.dropdown ul {
  width: 110px;
  margin-top: 0px;
}

ul.dropdown ul li {
  font-weight: normal;
}


/*-------------------------------------------------/
 * @section     Support Class `dir`
 * @level sep   ul, .class
 */

ul.dropdown *.dir {
  padding-right: 15px;
  background-image: url(https://www.thesnowpros.org/DesktopModules/CISS.SideMenu/styles/BrandonTab/css/dropdown/themes/default/images/nav-arrow-right.png);
  background-position: 100% 50%;
  background-repeat: no-repeat;
}


/* -- Components override -- */

ul.dropdown-horizontal ul *.dir {
  padding-right: 10px;
  background-image: url(https://www.thesnowpros.org/DesktopModules/CISS.SideMenu/styles/BrandonTab/css/dropdown/themes/default/images/nav-arrow-right.png);
  background-position: 100% 50%;
  background-repeat: no-repeat;
}

.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}

我试图更改它，以便从左到右的菜单将成为移动模式下的Accordion菜单。

/* for mobile devices */

@media only screen and ( max-width: 40em)
/* 640 */

{
  html {
    font-size: 75%;
    /* 12 */
  }
  #nav > a {
    display: none;
    }
  #nav {
    position: relative;
    top: auto;
    left: auto;
  }
  #nav > a {
    width: 3.125em;
    /* 50 */
    height: 3.125em;
    /* 50 */
    text-align: left;
    text-indent: -9999px;
    background-color: #000;
    position: relative;
  }
  #nav > a:before,
  #nav > a:after {
    position: absolute;
    border: 2px solid #fff;
    top: 35%;
    left: 25%;
    right: 25%;
    content: '';
  }
  #nav > a:after {
    top: 60%;
  }
  #nav:not(:target) > a:first-of-type,
  #nav:target > a:last-of-type {
    display: block;
  }
  /* first level */
  #nav > ul {
    height: auto;
    display: none;
    position: absolute;
    left: 0;
    right: 0;
  }
  #nav:target > ul {
    display: block;
  }
  #nav > ul > li {
    width: 100%;
    float: none;
  }
  #nav > ul > li > a {
    height: auto;
    text-align: left;
    padding: 0 0.833em;
    /* 20 (24) */
  }
  #nav > ul > li:not(:last-child) > a {
    border-right: none;
    border-bottom: 1px solid #cc470d;
  }
  /* second level */
  #nav li ul {
    position: static;
    padding: 1.25em;
    /* 20 */
    padding-top: 0;
  }
}

我尝试使用this基础，但无法使其正常工作。

我的尝试显示在fiddle中。要查看移动版本，请调整窗口大小。问题是：

点击图标时展开的所有菜单和子菜单，而不是在选择时显示

我尝试了很多方法，但似乎无法让它正常工作。任何帮助或建议都非常感谢。

为移动设备转换纯CSS响应式菜单的问题

0 个答案: