CODEWITHSUNDEEP
htmlcss
telis
telis

Reputation: 35

dropdown menu exceeds container width

I'm trying to create a dropdown menu. The problem is that my dropdown menu width exceeds container width. As far as i can see i have no margins or something similar.

CSS

#wrapper {
    width: 1020px;
    height: 1500px; 
    background-color: #CCC;
}
#wrapper1 {
    height: 40px;
    width: 100%;    
    position: relative; 
    color: #FFF;
    font-family: Roboto;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    font-weight: bold;
    background-color: #FFF;
}
.dropdown-menu {
    color: #fff;
    list-style-type: none;
    position: relative;
    background-color: #1a1b20;
    height: 40px;
    width: 100%;
    font-family: Roboto;
    float: left;
    font-weight: bold;  
}
.dropdown-menu > li{
    position: relative;
    float: left;
    line-height: 40px;
    width: 340px;
    text-align: center;
    }

HTML

<div id="wrapper">
    <div id="wrapper1">
        <ul class="dropdown-menu"> 
            <li>A</li>       
            <li>B</li>
            <li>C</li>
        </ul> 
    </div>
</div>

Any idea?

Upvotes: 3

Views: 2065

Answers (2)

Shuvo Shuvo
Shuvo Shuvo

Reputation: 329

Here is the code

CSS

#wrapper {
    position: relative;
    width: 1020px;
    height: 1500px; 
    background-color: #CCC;
}
#wrapper1 {
    height: 40px;
    width: 100%;    
    position: relative; 
    color: #FFF;
    font-family: Roboto;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    font-weight: bold;
    background-color: #FFF;
}
.dropdown-menu {
    color: #fff;
    list-style-type: none;
    position: relative;
    background-color: #1a1b20;
    height: 40px;
    width: 980px;
    font-family: Roboto;
    float: left;
    font-weight: bold;  
}
.dropdown-menu > li{
    position: relative;
    float: left;
    line-height: 40px;
    width: 307px;
    text-align: center;
    }

HTML

<div id="wrapper">
<div id="wrapper1">
    <ul class="dropdown-menu"  id="dropdown-menu"> 
        <li>A</li>       
        <li>B</li>
        <li>C</li>
    </ul> 
</div>
</div>

Upvotes: 0

Kristijan Iliev
Kristijan Iliev

Reputation: 4987

Your ul with class dropdown-menu has default padding/indent that pushes the content out of the container.

Add this css rule to your .dropdown-menu:

padding: 0;

Try it in the snippet:

#wrapper {
    width: 1020px;
    height: 1500px; 
    background-color: #CCC;
}
#wrapper1 {
    height: 40px;
    width: 100%;    
    position: relative; 
    color: #FFF;
    font-family: Roboto;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    font-weight: bold;
    background-color: #FFF;
}
.dropdown-menu {
    color: #fff;
    list-style-type: none;
    position: relative;
    background-color: #1a1b20;
    height: 40px;
    width: 100%;
    font-family: Roboto;
    float: left;
    padding: 0;
    font-weight: bold;  
}
.dropdown-menu > li{
    position: relative;
    float: left;
    line-height: 40px;
    width: 340px;
    text-align: center;
    }
<div id="wrapper">
    <div id="wrapper1">
        <ul class="dropdown-menu"> 
            <li>A</li>       
            <li>B</li>
            <li>C</li>
        </ul> 
    </div>
</div>

Upvotes: 2

Related Questions