css下拉菜单大小和图像问题

我创建了一个css下拉菜单，下面的图像被修复了。此刻我无法使图像与下拉菜单的大小相同，并且让菜单成为屏幕大小或填充条形图。任何帮助都将不胜感激。css下拉菜单大小和图像问题

继承人的CSS：

#nav{ 
 
    list-style:none; 
 
    font-weight:bold; 
 
    margin-bottom:10px; 
 
    float:left; 
 
    width:100%; 
 
    position:relative; 
 
    z-index:5; 
 
    margin: 0; 
 
    padding: 0; 
 
    background-color: #333; 
 
    
 
         
 
} 
 

 
#nav li{ 
 
    float:left; 
 
    margin-right:10px; 
 
    position:relative; 
 
} 
 
#nav a{ 
 
    display:inline-block; 
 
    padding:5px; 
 
    color:#fff; 
 
    background:#333; 
 
    text-decoration:none; 
 
} 
 
#nav a:hover { 
 
    color:#fff; 
 
    background:#6b0c36; 
 
    text-decoration:none; 
 
} 
 

 

 
#nav ul{ 
 
    background:#fff; 
 
    background:rgba(255,255,255,0); 
 
    list-style:none; 
 
    position:absolute; 
 
    left:-9999px; 
 

 
} 
 
     
 
#nav ul li{ 
 
    padding-top:1px; 
 
    float:none; 
 
    text-align: center; 
 
} 
 
#nav ul a{ 
 
    white-space:nowrap; 
 
    padding: 14px 16px; 
 
} 
 
#nav li:hover ul{ 
 
    left:0; 
 
} 
 
#nav li:hover a{ 
 
    background:#6b0c36; 
 
    text-decoration:none; 
 
    background-color: blue; 
 
} 
 
#nav li:hover ul a{ 
 
    text-decoration:none; 
 
} 
 
#nav li:hover ul li a:hover{ 
 
    background:#333; 
 
}

<ul id="nav"> 
 
    <li> 
 
     <a href="#">HOME</a> 
 
    </li> 
 

 
    <li> 
 
     <a href="#">ABOUT</a> 
 
     <ul> 
 
      <li><a href="#">OUR STORY</a></li> 
 

 
      <li><a href="#">OUR COMMITMENT TO YOU</a></li> 
 
     </ul> 
 
    </li> 
 
    <li> 
 
     <a href="#">LOCATIONS</a> 
 

 
     <ul> 
 
      <li><a href="#">AUSTIN, TX</a></li> 
 
      <li><a href="#">ATLANTA, GA</a></li> 
 

 
      <li><a href="#">SEATTLE, WA</a></li> 
 
      <li><a href="#">PORTLAND, OR</a></li> 
 
     </ul> 
 

 
    </li> 
 
    <li> 
 
     <a href="#">PRODUCT</a> 
 
     <ul> 
 
      <li><a href="#">NEW ARRIVALS</a></li> 
 

 
      <li><a href="#">FEATURED</a></li> 
 
      <li><a href="#">TOP RATED</a></li> 
 
      <li><a href="#">HIS</a></li> 
 

 
      <li><a href="#">HERS</a></li> 
 
      <li><a href="#">ACCESSORIES</a></li> 
 
      <li><a href="#">SPRING CATALOG</a></li> 
 

 
      <li><a href="#">THE ESSENTIALS</a></li> 
 
      <li><a href="#">SALES</a></li> 
 
     </ul> 
 
    </li> 
 
    
 
<li> 
 
      <a href="#">BLOG</a> 
 
      </li> 
 
<li> 
 
      <a href="#">CONTACT</a> 
 
      </li> 
 

 
     </ul> 
 
    </li> 
 
</ul> 
 
<img class="alignnone size-full wp-image-24" src="https://montaviustech.files.wordpress.com/2016/11/death_to_stock_photography_vibrant-10-of-10.jpg" alt="death_to_stock_photography_vibrant-10-of-10" width="absolute" height="" />

来源

2016-11-30 M.Walton

林不知道这是你寻找什么。

#nav{ 
 
    list-style:none; 
 
    font-weight:bold; 
 
    margin-bottom:10px; 
 
    float:left; 
 
    width:100%; 
 
    position:relative; 
 
    z-index:5; 
 
    margin: 0; 
 
    padding: 0; 
 
    background-color: #333;     
 
} 
 

 
#nav li{ 
 
    float:left; 
 
    margin-right:10px; 
 
    position:relative; 
 
} 
 
#nav a{ 
 
    display:inline-block; 
 
    padding:5px; 
 
    color:#fff; 
 
    background:#333; 
 
    text-decoration:none; 
 
} 
 
#nav a:hover { 
 
    color:#fff; 
 
    background:#6b0c36; 
 
    text-decoration:none; 
 
} 
 

 

 
#nav ul{ 
 
    background:#fff; 
 
    background:rgba(255,255,255,0); 
 
    list-style:none; 
 
    position:absolute; 
 
    left:-9999px; 
 

 
} 
 
     
 
#nav ul li{ 
 
    padding-top:1px; 
 
    float:none; 
 
    text-align: center; 
 
} 
 
#nav ul a{ 
 
    white-space:nowrap; 
 
    padding: 14px 16px; 
 
} 
 
#nav li:hover ul{ 
 
    left:0; 
 
} 
 
#nav li:hover a{ 
 
    background:#6b0c36; 
 
    text-decoration:none; 
 
    background-color: blue; 
 
} 
 
#nav li:hover ul a{ 
 
    text-decoration:none; 
 
} 
 
#nav li:hover ul li a:hover{ 
 
    background:#333; 
 
}

<ul id="nav"> 
 
    <li> 
 
     <a href="#">HOME</a> 
 
    </li> 
 

 
    <li> 
 
     <a href="#">ABOUT</a> 
 
     <ul> 
 
      <li><a href="#">OUR STORY</a></li> 
 

 
      <li><a href="#">OUR COMMITMENT TO YOU</a></li> 
 
     </ul> 
 
    </li> 
 
    <li> 
 
     <a href="#">LOCATIONS</a> 
 

 
     <ul> 
 
      <li><a href="#">AUSTIN, TX</a></li> 
 
      <li><a href="#">ATLANTA, GA</a></li> 
 

 
      <li><a href="#">SEATTLE, WA</a></li> 
 
      <li><a href="#">PORTLAND, OR</a></li> 
 
     </ul> 
 

 
    </li> 
 
    <li> 
 
     <a href="#">PRODUCT</a> 
 
     <ul> 
 
      <li><a href="#">NEW ARRIVALS</a></li> 
 

 
      <li><a href="#">FEATURED</a></li> 
 
      <li><a href="#">TOP RATED</a></li> 
 
      <li><a href="#">HIS</a></li> 
 

 
      <li><a href="#">HERS</a></li> 
 
      <li><a href="#">ACCESSORIES</a></li> 
 
      <li><a href="#">SPRING CATALOG</a></li> 
 

 
      <li><a href="#">THE ESSENTIALS</a></li> 
 
      <li><a href="#">SALES</a></li> 
 
     </ul> 
 
    </li> 
 
    
 
<li> 
 
      <a href="#">BLOG</a> 
 
      </li> 
 
<li> 
 
      <a href="#">CONTACT</a> 
 
      </li> 
 

 
     </ul> 
 
    </li> 
 
</ul> 
 
<img class="alignnone size-full wp-image-24" src="https://montaviustech.files.wordpress.com/2016/11/death_to_stock_photography_vibrant-10-of-10.jpg" alt="death_to_stock_photography_vibrant-10-of-10" width="100%" height="" />

我所做的是从绝对图像的宽度更改为100％：

<img class="alignnone size-full wp-image-24" src="https://montaviustech.files.wordpress.com/2016/11/death_to_stock_photography_vibrant-10-of-10.jpg" alt="death_to_stock_photography_vibrant-10-of-10" width="absolute" height="" />

到

<img class="alignnone size-full wp-image-24" src="https://montaviustech.files.wordpress.com/2016/11/death_to_stock_photography_vibrant-10-of-10.jpg" alt="death_to_stock_photography_vibrant-10-of-10" width="100%" height="" />

来源

2016-11-30 02:06:28 Blezx

正是我在找的谢谢 –

的图像的宽度只要设定为100％。这将对齐菜单栏和图像。

来源

2016-11-30 02:03:04 junkfoodjunkie

真棒它总有一些事情你比外表谢谢 –

css下拉菜单大小和图像问题

回答

相关问题