Question

我有一个由图像制作的导航菜单，我无法通过屏幕收缩，当屏幕调整大小时我希望整个菜单调整大小，但列表项只是跳转到下一行。

我尝试过宽度/高度以及最大宽度/高度我尝试过使用不同的单位％和vh，也试过显示块和不同的位置但是我不能让它工作，我找不到我要去的地方错误。非常感谢任何帮助。谢谢。

codePen：http://codepen.io/mikegr/pen/YNYjLJ

HTML

<div class="ground">
    <img src="http://res.cloudinary.com/ddoewrnb0/image/upload/v1485620608/ground_dhn37w.png" />  

    <!--nav menu-->
    <ul id="menu">
        <li id="home"><a  class="current" href="index.html">Home</a></li>
        <li id="about"><a href="about.html">About</a></li>
        <li id="audio"><a  href="audio.html">Audio</a></li>
        <li id="art"><a  href="design.html">Art</a></li>
        <li id="threed"><a  href="modeling.html">3d</a></li>
        <li id="coding"><a href="coding.html">Programming</a></li>
    </ul>
</div>

CSS

.ground {
    position:fixed;
    left:0px;
    bottom:-1%;
    height:auto;
    width:100%;
    background:#999;
}
ul {
    list-style: none;
}

/* nav menu */
#menu {
    position: absolute;
    top: 6vh;
    z-index: 2;
    width:60%;
    overflow: hidden;
    margin: 0 auto;
    left: 0;
    right: 0;
    max-width: 100%;
    height: auto;
}

#menu li {
    float:left;  /*--- Make the list go horizontal ---*/
    margin:auto;
    padding-right: 2vh;
}

#menu li a {
    display:block;
    text-indent: -9999px; /*--- Push the text off screen to hide text---*/

}
#menu li#home a {
    background: url(http://res.cloudinary.com/ddoewrnb0/image/upload/v1485620607/home_menu_svyjuj.png) no-repeat;
    width:150px;
    height: 75px;
}
#menu li#home a:hover {
    background: url(http://res.cloudinary.com/ddoewrnb0/image/upload/v1485620607/home_menu_hover_g4rwhe.png) no-repeat;
}
#menu li#home a.current {
    background: url(http://res.cloudinary.com/ddoewrnb0/image/upload/v1485620607/home_menu_hover_g4rwhe.png) no-repeat;
    cursor:default;  /*--- Show pointer instead of hand cursor for the current page ---*/
}

/* About */
#menu li#about a {
    background: url(http://res.cloudinary.com/ddoewrnb0/image/upload/v1485620607/about_menu_jcz8yx.png) no-repeat;   
    width:150px;
    height: 75px;
}

#menu li#about a:hover {
    background: url(http://res.cloudinary.com/ddoewrnb0/image/upload/v1485620607/about_menu_hover_uurcba.png) no-repeat; 
}

#menu li#about a.current {
    background: url(http://res.cloudinary.com/ddoewrnb0/image/upload/v1485620607/about_menu_hover_uurcba.png) no-repeat;
    cursor:default;  
}

/* Graphic design */
#menu li#art a {
    background: url(http://res.cloudinary.com/ddoewrnb0/image/upload/v1485620607/art_menu_mbywzq.png) no-repeat; 
    width:150px;
    height: 75px;
}

#menu li#art a:hover {
    background: url(http://res.cloudinary.com/ddoewrnb0/image/upload/v1485620607/art_menu_hover_afaypq.png) no-repeat;   
}

#menu li#art a.current {
    background: url(http://res.cloudinary.com/ddoewrnb0/image/upload/v1485620607/art_menu_hover_afaypq.png) no-repeat;
    cursor:default;  
}

/* Modeling/Animation */
#menu li#threed a{
    background: url(http://res.cloudinary.com/ddoewrnb0/image/upload/v1485620607/3d_menu_dptfpv.png) no-repeat;  
    width:150px;
    height: 75px;
}

#menu li#threed a:hover {
    background: url(http://res.cloudinary.com/ddoewrnb0/image/upload/v1485620607/3d_menu_hover_pqnxfs.png) no-repeat;    
}

#menu li#threed a.current {
    background: url(http://res.cloudinary.com/ddoewrnb0/image/upload/v1485620607/3d_menu_hover_pqnxfs.png) no-repeat;
    cursor:default;  
}

/*Programming*/
#menu li#coding a {
    background: url(http://res.cloudinary.com/ddoewrnb0/image/upload/v1485620608/programming_hzslwa.png) no-repeat;  
    width:170px;
    height: 75px;
}

#menu li#coding a:hover {
    background: url(http://res.cloudinary.com/ddoewrnb0/image/upload/v1485620608/programming_hover_crywht.png) no-repeat;    
}

#menu li#coding a.current{
    background: url(.http://res.cloudinary.com/ddoewrnb0/image/upload/v1485620608/programming_hover_crywht.png) no-repeat;
    cursor:default;  
}

/* Audio */
#menu li#audio a {
    background: url(http://res.cloudinary.com/ddoewrnb0/image/upload/v1485620607/audio_vvgdur.png) no-repeat;    
    width:150px;
    height: 75px;
}

#menu li#audio a:hover {
    background: url(http://res.cloudinary.com/ddoewrnb0/image/upload/v1485620607/audio_hover_bnrvb0.png) no-repeat;  
}

#menu li#audio a.current {
    background: url(http://res.cloudinary.com/ddoewrnb0/image/upload/v1485620607/audio_hover_bnrvb0.png) no-repeat;
    cursor:default;  
}

Answer 1

好的我自己修好了，抱歉这是典型的事情。

我刚刚将宽度更改为vh，问题是我需要添加

background-size:     cover;                     
background-repeat:   no-repeat;
background-position: center center;

Answer 2

您正在为图像设置宽度（以像素为单位）。这将阻止他们按照您的意愿调整大小。

如何使图像列表项目菜单缩小屏幕

HTML

CSS

2 个答案: