Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 1 of 1
  1. #1
    Regular Coder
    Join Date
    Jan 2013
    Location
    Australia
    Posts
    109
    Thanks
    21
    Thanked 0 Times in 0 Posts

    Creating Vertical Nav Menu Help.

    I am trying to get my vertical nav menu st www.mwbcomputes.com.au/sub to look like the image that I attached.

    Also here is the css code I have been working on nearly got it but just a bit funny looking at the moment. Not quite working properly like image attached my sub categories are funny looking as well

    .boxcategory {
    margin-bottom: 20px;
    }
    .boxcategory .boxcategory-heading {
    border: 1px solid #DBDEE1;
    background: url('../image/background.png') repeat-x;
    padding: 8px 10px 7px 10px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: bold;
    line-height: 14px;
    color: #333;
    }
    .boxcategory .boxcategory-content {
    background: #FFFFFF;
    -webkit-border-radius: 0px 0px 7px 7px;
    -moz-border-radius: 0px 0px 7px 7px;
    -khtml-border-radius: 0px 0px 7px 7px;
    border-radius: 0px 0px 7px 7px;
    padding: 10px;
    }
    ul.box-category > li:nth-child(even) {
    margin-top: 0px;
    background:#1F1F1F;
    min-height: 35px;
    width: 100%;
    overflow: auto;
    margin-left: -10px;
    margin-bottom: 1px;
    line-height: 35px;
    margin-right: 10px;
    }
    ul.box-category > li:nth-child(odd) {
    background: #232323;
    min-height: 35px;
    width: 100%;
    overflow: auto;
    margin-left: -10px;
    margin-bottom: 1px;
    line-height: 35px;
    }
    ul.box-category > li ul > li:nth-child(even) > a {
    background: #1F1F1F;
    min-height: 35px;
    min-width: 100%;
    overflow: auto;
    margin-bottom: 1px;
    border: 1px solid black;
    line-height: 35px;
    margin-left: -5px;
    }
    ul.box-category > li ul > li:nth-child(odd) > a {
    background: #232323;
    min-height: 35px;
    min-width: 100%;
    overflow: auto;
    margin-bottom: 1px;
    border: 1px solid black;
    line-height: 35px;
    margin-left: -5px;
    }
    ul.box-category, ul.box-category ul {
    list-style: none;
    margin: 0;
    padding: 0;
    }
    ul.box-category > li:first-child {
    padding: 0px 8px 8px 0px;
    }
    ul.box-category > li {
    padding: 8px 8px 8px 0px;
    }
    ul.box-category > li + li {
    }
    ul.box-category > li > a {
    text-decoration: none;
    color: #333;
    }
    ul.box-category > li ul {
    display: none;
    }
    ul.box-category > li a.active {
    font-weight: bold;
    }
    ul.box-category > li a.active + ul {
    display: block;
    }
    ul.box-category > li ul > li {
    padding: 5px 5px 0px 10px;
    }
    ul.box-category > li ul > li > a {
    min-height: 20px;
    margin-bottom: 2px;
    text-decoration: none;
    display: block;
    }
    ul.box-category > li ul > li > a.active {
    font-weight: bold;
    }
    Attached Thumbnails Attached Thumbnails Creating Vertical Nav Menu Help.-category.jpg  


 

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •