最小和最大宽度不起作用

Question

我正在创建一个水平子菜单，但宽度不会延伸检查请

CSS

nav{
    width:62px;
    height:409px;
    float:left;
    margin-left:0;
    margin-top:25px;    
}
nav a:link,nav a:visited{
    width:59px;
    height:67px;
    float:left;
    display:block;
    background:#ccc;
    margin-bottom:19px;
    font-family:tahoma;
    font-weight:bold;
    font-size:9px;
    text-transform:uppercase;
    color:#fff;
    line-height:62px;
    text-align:center;  
}
nav .menu{
    width:59px;
    height:67px;
    float:left;
    position:relative;  
    margin-bottom:19px;
}
nav .submenu{
    position:absolute;
    top:0;
    left:59px;
    background:#f78f1e;
    height:40px;
    min-width: 20px;
    max-width: 600px;
}
nav .submenu a{
    display:block;
    float:left;
    height:40px;
    line-height:40px;
    width:50px;
}

HTMLnav{
    width:62px;
    height:409px;
    float:left;
    margin-left:0;
    margin-top:25px;    
}
nav a:link,nav a:visited{
    width:59px;
    height:67px;
    float:left;
    display:block;
    background:#ccc;
    margin-bottom:19px;
    font-family:tahoma;
    font-weight:bold;
    font-size:9px;
    text-transform:uppercase;
    color:#fff;
    line-height:62px;
    text-align:center;  
}
nav .menu{
    width:59px;
    height:67px;
    float:left;
    position:relative;  
    margin-bottom:19px;
}
nav .submenu{
    position:absolute;
    top:0;
    left:59px;
    background:#f78f1e;
    height:40px;
    min-width: 20px;
    max-width: 600px;
}
nav .submenu a{
    display:block;
    float:left;
    height:40px;
    line-height:40px;
    width:50px;
}

HTML

<nav>
<a href="#">contact</a>
<a href="#">works</a>
<a href="#">partners</a>
<div class="menu">
<a href="#">about us</a>
<div class="submenu">
  <a href="#">audio</a>
  <a href="#">video</a>
    <div style="clear:both"></div>
</div>
</div>
<a href="#">services</a>
</nav>

小提琴

http://jsfiddle.net/7D9hV/

Answer 1

尝试使用backgournd:inherit作为锚定样式

nav .submenu a{
background:inherit;
display:block;
float:left;
height:40px;
line-height:40px;
width:50px;
}

Answer 2

抱歉，抓住之前的评论。它是background: none;上的nav .submenu a。删除它，它们出现。您将背景设置为none，以便在文字为白色时无法看到它们：

http://jsfiddle.net/7D9hV/7/

Answer 3

这对我有用。试试吧

nav .submenu a {
    background: inherit;  /// remove 'none'
    display: block;
    float: left;
    height: 40px;
    line-height: 40px;
    width: 50px;
}

nav .submenu {
    position: absolute;
    top: 0;
    left: 59px;
    background: #f78f1e;
    height: 40px;
    width: 100px;    // assign width
    min-width: 20px;
    max-width: 600px;
}