Question

我正在尝试创建一个响应式，下拉式CSS菜单，并且我有一个针对移动设备的媒体查询（760像素）。我试图让所有链接占据整个宽度，这很顺利，但问题是当我显示宽度小于760像素的下拉菜单时，下拉菜单的所有链接狭窄的导航链接。我想知道如何解决这个问题，因为我已经思考了很长时间，并且找不到解决方案。我希望服务的下拉菜单直接位于服务下方，最后的联系链接位于下拉菜单下方。这就是问题所在：

以下是HTML和CSS，以及指向JSFiddle的链接。

HTML ：

   <div class="wrapper">
      <ul class="links">
         <li id="active"><a href="#" class="link">home</a>
         </li><li><a href="#" class="link">about</a>
         </li><li><a href="#" class="link">services</a>
            <ul class="links">
               <li><a href="#" class="link2">web development</a>
               </li><li><a href="#" class="link2">design templates</a>
               </li><li><a href="#" class="link2">networking</a>
               </li><li><a href="#" class="link2">custom builds</a>
               </li>
            </ul>
         </li><li><a href="#" class="link">contact</a></li>
      </ul>
   </div>

CSS ：

html,
body {
    margin: 0;
    padding: 0;
    font-family: Source Sans Pro, Helvetica, sans-serif;
}
.wrapper {
    width: 100%;
    height: auto;
}
ul.links {
    margin: 0px;
    padding: 0px;
    list-style: none;
    background-color: #EBEBEB;
}
ul.links a {
    color: #737373;
    text-decoration: none;
}
ul.links ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
}
ul.links li {
    background: none;
    color: #737373;
    display: inline-block;
    position: relative;
    font-size: 19px;
    padding-top: 22px;
    padding-bottom: 22px;
    padding-left: 35px;
    padding-right: 35px;
    transition: background 0.2s linear 0s, color 0.2s linear 0s;
    -webkit-transition: background 0.2s linear 0s, color 0.2s linear 0s;
}
ul.links ul li {
    position: relative;
    font-size: 18px;
    display: block;
    float: left;
    width: 100%;
}
ul.links li:hover {
    background-color: #6ECFFF;
}
ul.links li:hover ul {
    display: block;
}
ul.links li:hover .link {
    color: #F0F0F0;
}
ul.links ul li:hover .link2 {
    color: #F0F0F0;
}
#active {
    background-color: #6ECFFF;
}
#active a {
    color: #F0F0F0;
}
@media screen and (max-width: 760px) {
    ul.links li 
    {
        width: 100%;
    }

    ul.links ul {
        position: absolute;
        left: 0;
    }

    ul.links ul li {
        background: #EBEBEB;
    }
}

JSFiddle ：https://jsfiddle.net/7tkn7zzs/

Answer 1

您应该在媒体查询中将ul.links ul {设为position: relative;以正确显示。

ul.links ul {
  position: relative;
  left: 0;
}

<强> Working Fiddle

Answer 2

serial........date.........value....value_prev
xxx...........2016.01.03...12.......5
xxx...........2016.01.02...5........3
xxx...........2016.01.01...3........null
yyy...........2016.01.03...9........6
yyy...........2016.01.02...6........1
yyy...........2016.01.01...1........null

CSS下拉导航链接局促

2 个答案: