0

My menu is like this:

enter image description here

Here is my css code:

 .nav-primary {
    position: absolute;
    display: block;
    margin-top: -85px;
}
.nav-primary li.level0, .nav-primary a.level0 {
    display: inline-block;
}
.nav-primary li {
    position: relative;
}
.nav-primary li.level0 > a {
    color: #70583a;
    margin-top: -5px;
    padding-top: 5px;
    font-family: trebuchet MS;
    font-size: 15px;
}
.nav-primary a {
    position: relative;
    display: block;
    line-height: 30px;
}
.nav-primary li.level0 ul {
    position: absolute;
    display: none;
}
.nav-primary li.level1 {
    padding: 10px;
    float: left;
    font-size: 15px;
    border-right: 1px solid #eae4da;
}
.nav-primary li.level0 li.parent > a {
    position: relative;
}
.nav-primary li.level1 ul {
    display: block;
    position: relative;
}
.nav-primary li.level0 ul {
    position: absolute;
    left: 0;
    z-index: 10;
    display: none;
}
.nav-primary li.level0 li.parent > a {
    position: relative;
}
.nav-primary .menu-active > ul.level0 {
    width: 655px;
    max-width: 740px;
}
.nav-primary .menu-active > ul.level0, .nav-primary li.level0 li.sub-menu-active > ul {
    display: block;
}

I want the submenu8 to be exactly aligned under submenu1.I need that kind of alignment. How to do that Please help.

  • try to set, max-width on <ul>. Or post a website link – Anil Suthar May 21 '16 at 10:02
  • yea i have set max-width:74px. I just want the last element to be displayed from the starting of the ul and not at the middle. – Ramya May 21 '16 at 10:36
  • please post website link, so I can try CSS my way – Anil Suthar May 21 '16 at 10:49
  • am working in my local machine. I have updated my question. kindly help – Ramya May 21 '16 at 11:59
  • can you show a part of HTML also ? – Anil Suthar May 21 '16 at 12:11
1

Use nth-child for clearing floats, like this:

.nav-primary li.level1:nth-child(6n+1) { clear: left; }

You can also use this method for targeting elements after the first row of menu items:

.nav-primary li.level1:nth-child(n+7) { margin-top: 20px; }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.