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

时间：2016-11-30 01:59:30

标签： javascript jquery html css wordpress

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

2 个答案:

答案 0 :(得分：0)

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

答案 1 :(得分：0)

我不确定这是不是你想要的。

#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="" />
相关问题
最新问题