css - 垂直菜单响应

Question

我有一个布局 960gs，容器左侧有一个垂直菜单。我希望它适用于所有分辨率的 PC(我不喜欢智能手机或平板电脑)。

这是我的代码菜单 HTML

<ul>
      <li class='<?php echo $class2 ?>'><a href='index.php'><img src='<?php echo base_url();?>resources/img/home.png'><br>Home</a></li>
      <li class='<?php echo $class1 ?>'><a href='<?php echo base_url();?>mind'><img src='<?php echo base_url();?>resources/img/user.png'><br>Profile</a></li>
      <li class='<?php echo $class3 ?>'><a href='<?php echo base_url();?>search'><img src='<?php echo base_url();?>resources/img/searching.png'><br>Search</a></li>
      <li class='<?php echo $class4 ?>'><a href='index.php'><img src='<?php echo base_url();?>resources/img/contact.png'><br>Contacts</a></li>
      <li class='<?php echo $class5 ?>'><a href='<?php echo base_url();?>page'><img src='<?php echo base_url();?>resources/img/book.png'><br>Personal Page</a></li>
      <li class='<?php echo $class6 ?>'><a href='index.php'><img src='<?php echo base_url();?>resources/img/company.png'><br>Personal Page</a></li>

    </ul>

这是我的 menù CSS:

/*menu */


  .laterale ul {

    margin-top:-1px;
    display: inline-block;
    z-index: 20;
    margin-left:20px;
    float: left;


    }



  .laterale li {

    width:88px;
    height:60px;
    list-style: none;
    padding-top:15px;
    margin-top:5px;
    font-size:10px;
    text-align: center !important; 

    display: block;

    }

  .laterale a {

    text-decoration: none;
    padding: 15px 0px;
  color: #aaa;
  text-shadow: 0px 1px 0px #fff;
  border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
  border-left: none;
  border-right: none;
    background: transparent;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
   border-radius: 0px;
   opacity:0.8;

  }

我认为这主要是通过响应式 CSS 完成的，但我可能是错的。非常感谢!

Answer 1

如果我没听错，垂直菜单项的宽度应根据屏幕分辨率而定。

.menu li{
    display: block;
    margin:5px;
    padding: 5px;
    background-color: red;
    white-space: nowrap;
    overflow: hidden; 
   text-overflow: ellipsis;
}