Treehouse: Grow your CSS skills. Land your dream job.

Problem with two unordered lists

  • # September 7, 2012 at 8:48 am

    Hi there, I’m having a problem with using two unordered lists.
    I have one for my nav which has a jquery background slider behind it, the other I want to use with jquery roundabout to create sort of content slider.
    I have assigned both to a different ul id but can’t get them to both work, when I get roundabout to work my nav is hidden.

    You can see it live at is the nav working and is where my problem area is.

    Any help would be amazing,



    # September 7, 2012 at 9:08 am

    It is possibly because the jQuery you have at the bottom of the slider is targeting all ul’s on the page. Try changing:

    $(document).ready(function() {

    for this:

    $(document).ready(function() {
    $(‘#menu ul’).roundabout();

    Two more things. You are pulling in both roundabout scripts. You only need the jquery.roundabout.min.js one. The other one is the uncompressed production version. Also, you have nested your slider ul inside another ul. Is there a reason for this? You might be better to have a

    with an id of slider and the ul inside it. That way you can target #slider ul in your jQuery.

    Hope this helps.

    # October 29, 2012 at 7:42 am

    hey scotty !

    I got the same problem, but I’ll need a little more explanation.

    You said, jQuery is targeting all the ul’s on the page. This is exactly what Im facing.

    it may be a stupid question but Im stuck with this & can’t make it work even by changing the

    $(‘ul’) to $(‘#package ul’)

    Please I’ll appreciate a quick response…..thanks alot :)

    # October 29, 2012 at 6:03 pm

    @Raza, without an example of what is going on, we would only be guessing at a solution. Can you link to a live page?

    # October 30, 2012 at 4:53 am

    @Josh: oh Im so sorry, forgot to include the link.

    well the code is :

    ul id="packages"

  • Bix Expert

  • ul.packages {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    width: 10em;
    height: 48em;
    li {
    height: 15em;
    width: 10em;
    text-align: center;
    cursor: pointer;
    li img {
    width: 100%;
    li.roundabout-in-focus {
    cursor: default;
    li span {
    display: block;
    padding-top: 0em;

    #carbonads-container .carbonad {
    margin: 50 auto;

    Checkout the 3 images on the right, bizstarter/bizgain/bizexpert. They should be moving like:

    Rest of the page is working fine:

    but this code is still conflicting with one other list you can see in the middle the scrolling “Selling Leads” / “Buying Leads”.

    And I can’t make it execute properly.

    Waiting for quick solution….thanks :)

    # October 30, 2012 at 4:55 am


    Im unable to paste the code here…..can you get an idea by visiting the links I mentioned above ?

    # October 30, 2012 at 5:18 am

    if you have this:

      you have to use $(‘ul#packages’) to target it (no space)

      also in the css
      ul#packages > li{}

    # October 31, 2012 at 8:58 am

    Thanks alot Joni !

    well, after my last post I tried to play with it a little…..& somehow I changed my jquery path from my webhost to :


    now its working better than ever…..anyways still can’t figure out why it happened !

    Now I got another question about H1 tags, will post in a new Topic !

    Thanks again
    bye bye

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.