问有反应的肚脐不会“伸展”

EN

<header class="wrapper clearfix">

    <div id="banner">        
        <div id="logo"><a href="index.html"><img src="images/header.png" alt="logo"></a></div> 
    </div>

    <!-- main navigation -->
    <nav id="topnav" role="navigation">
      <ul class="srt-menu" id="menu-main-navigation">          
          <li class="about"><a href="about.html">About</a></li>
          <li class="gallery"><a href="gallery.html">Gallery</a></li>
          <li class="contact"><a href="contact.html">Contact</a></li>   
      </ul>     
    </nav><!-- end main navigation -->

</header>

#menu-main-navigation{
  display:block;
}

.srt-menu, .srt-menu * {
  margin:           0;
  padding:      0;
  list-style:       none;
}

.srt-menu ul {
  position:     absolute;
  display:none;
  width: 12em; /* left offset of submenus need to match (see below) 
  */
}

.srt-menu ul li {
  width: 20%;
}

.srt-menu li:hover {
  visibility:       inherit; /* fixes IE7 'sticky bug' */
}

.srt-menu li {
  float:            left;
  position:     relative;
  margin-left:1px;
  max-width: 100px;
}

.srt-menu li li {
  margin-left:0px;
}

.srt-menu a {
  display:      block;
  position:     relative;
}

#topnav, .srt-menu {
  float:right;
  margin: 1.2em 0 0 0;
}

.srt-menu a {
  text-decoration:none;
  color: #000000;
}

.srt-menu li a {
  background:#fff;
  margin:0; 
  padding:0px 25px;
  height:45px;
  max-width: 100px;
}

.srt-menu a, .srt-menu a:visited  { /* visited pseudo selector so IE6 applies text colour*/
  color: #000000;   
}

/*LARGER MOBILE DEVICES
This is for mobile devices with a bit larger screens.*/
@media only screen and (min-width: 480px) {
  #banner{
    float:left;
    text-align:left;
    margin-bottom:20px;/*this depends on the height of the logo*/
  }

  .topnav {
    float:left; 
    margin: .2em;
  }

  .srt-menu, ul.srt-menu {
    display: block !important;
  }
}