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

【问题标题】：css drop down menu size and image issuescss下拉菜单大小和图像问题
【发布时间】：2016-11-30 10:06:28
【问题描述】：

我正在创建一个 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="" />

【问题讨论】：

标签： javascript jquery html css wordpress

【解决方案1】：

我不确定这是否是您要找的。p>

#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="" />

【讨论】：

【解决方案2】：

只需将图像的宽度设置为 100%。这将对齐菜单栏和图像。

【讨论】：