html - 如何使用CSS将移动设备上的水平菜单更改为垂直菜单

Question

我需要为我的网站发布类设计一个响应式模板。我已经对 jquery 有所了解，所以我决定将桌面版的水平导航菜单转换为移动版的垂直菜单。基本上，我不想显示所有以一定宽度中断的导航列表项，而是希望在您单击“导航”文本时显示菜单。我已经让菜单隐藏在移动设备上，直到您单击导航文本并且列表在被告知时显示。我的问题是，当实际菜单出现时，它会扩展作为 ul 父元素的导航元素的高度。如何修复我的代码，使导航元素的高度不变，并且列表显示在导航文本正下方的导航元素之外？

这是我的意思的截图: http://i.imgur.com/lNQEMKk.jpg

CSS:

#navTrigger {
    display: none;
}
nav {
    margin-bottom: 10px;
    margin-left: 0px;
    background: url(../images/wood_dark.png);
    -webkit-box-shadow: 10px 2px 10px;
    box-shadow: 0px -5px 5px 0px rgba(0, 0, 0, 1), inset 0px 5px 10px 0px rgba(255, 255, 255, .3);
    border: 1px solid #555;
    border-bottom-color: #888;
    position: absolute;
    z-index: 0;
    width: 960px;
}
nav ul {
    list-style-type: none;
    margin-top: 0;
    margin-right: 35px;
    margin-left: 73px;
    margin-bottom: 0;
}
nav ul li {
    float: left;
    display: inline;
    border-right: 1px solid #888888;
    border-left: 1px solid #444444;
    margin: 0;
    padding: 0;
}

nav ul li a {
    color: #FFFFFF;
    text-decoration: none;
    font-size: 1.25em;
    padding: 10px 15px;
    display: block; 
}
@media only screen and (max-width:790px){
    #navTrigger {
        display: block;
        color: #fff;
        margin-left: 124px;
        padding: 10px 15px;
        font-size: 1.25em;
    }
    nav ul {
        display: none;
    }
    nav ul li {
        display: block;
        border-top: 1px solid rgba(255, 255, 255, .2);
        float: none;
    }
}

HTML:

<nav>
      <span id="navTrigger">Navigation</span>
      <ul>
        <li><a href="index.html" title="Home Page">Home</a></li>
        <li><a href="products.html" title="Our Products">Products</a></li>
        <li><a href="services.html" title="Our Services">Services</a></li>
        <li><a href="about.html" title="About Us">About</a></li>
        <li><a href="support.html" title="Help and Support">Support</a></li>
        <li><a href="contact.html" title="Contact Us">Contact</a></li>
      </ul>
    </nav>

Answer 1

“@media only screen and...”并不总是有效...

尝试，@media(max-width: 790px)