CODEWITHSUNDEEP
htmlcssdrop-down-menu
vishal
vishal

Reputation: 17

Align dropdown menu with parent

enter image description hereI'm not very experienced on web development and have run across some issue,i am aligning the menu but it not starting from its parent. I am searched and experimented every possible way but i cant figure out where is the problem. Following is the css

.drop {
z-index: 9;
max-width: 361px;
padding-top: 1px;
position: absolute;
display: none;
float: left;
min-width: 200px;
margin: 22px;
padding: 1.2em 0;
font-size: 12px;
list-style: none;
background: #02709be6;
}

.com:hover .drop {
display: block;
}

li.com .drop>li ul {
align-items: center;
top: 22px;
}

.drop li {
width: 100%;
padding-left: 41px;
padding-right: 51px;
display: block;
clear: both;
padding: 1px 1.6em;
line-height: 1.8;
white-space: nowrap;
color: #333;
-webkit-transition: none;
transition: none;
}

nav {
border: 1px solid #000;
border-width: 0 0 1px;
list-style: none;
text-align: center;
font-size: 21px;
}

nav li {
display: inline-block;
padding: 21px;
padding-right: 35px;
padding-left: 35px;
border-left: 1px solid rgba(255, 255, 255, 0.1);
text-align-last: left;
}

.nav {
margin-top: 25px;
color: #000000;
text-align: left;
left: 0;
width: 960px;
height: 24px;
color: #ffffff;
}

expected result be should like thiss

Upvotes: 0

Views: 400

Answers (1)

Mak0619
Mak0619

Reputation: 660

Try this code:

nav li{
    display: inline-block;
    padding: 21px;
    padding-right: 35px;
    padding-left: 35px;
    border-left: 1px solid rgba(255,255,255,0.1);
    text-align-last: left;
    position: relative;
}
.drop{
    z-index: 9;
    max-width: 415px;
    padding-top: 1px;
    display: none;
    float: left;
    min-width: 200px;
    padding: 1.2em 0;
    font-size: 12px;
    list-style: none;
    background: #02709be6;
    position: absolute;
    left: 0;
    margin: 0;
    top: 100%;
}

Remove this code:

li #drop-about {
    left: 56vw;
    max-width: 304px;
    min-width: 242px; }

li #drop-dt {
    left: 22.7vw;
}

Upvotes: 1

Related Questions