#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2013
    Posts
    9
    Rep Power
    0

    Problems with ul tags


    I've been playing around with a simple dropdown menu for last couple of days and its now ready to be put into my website.

    The problem I have is when i paste the code into the website the generic tags like ul and ul li are applied to every tag in the site.

    i have tried every permitaation i can think of so it only affects the said menu, but frustratingly none have worked, does anyone have any idea how i can fix this.

    I have tried:

    #menu ul
    ul#menu

    using a new div
    using a class

    please help, code is below:-


    <body>


    <ul id="menu" >
    <li><a href="">Home</a></li>
    <li><a href="">Events</a>
    <ul>
    <li><a href="">Schedule</a></li>
    <li><a href="">Previous Events</a></li>
    </ul>
    </li>
    <li><a href="">Gallery</a></li>

    <li><a href="">Music</a>
    <ul>
    <li><a href="">Album</a></li>
    <li><a href="">Songs</a></li>
    <li><a href="">Buy Now</a></li>
    </ul>
    </li>
    <li><a href="">Follow Dai</a>
    <ul>
    <li><a href="">Dais Blog</a></li>
    <li><a href="">Latest News</a></li>
    <li><a href="">Links</a></li>
    </ul>
    </li>
    </ul>



    </body>
    </html>


    ---------------------------------------------------------


    body {
    background-color:#060;

    }


    #menu {
    height:35px;
    width:936px;
    background-image:url(../images/background/navbar_large.png);
    background-repeat:no-repeat;

    }

    ul {
    height:35px;
    padding: 0;
    list-style: none;
    }

    ul li {
    margin-left:20px;
    display: block;
    position: relative;
    float: left;

    }

    li ul {
    display: none;
    font-weight:normal;
    }

    ul li a {
    display: block;
    text-decoration: none;
    font-weight:bold;
    color: #000;
    padding: 7px 20px 8px ;
    margin-left: 1px;
    white-space: nowrap;
    }

    ul li a:hover {
    background: #2D681C;
    color: #fff;
    }

    #menu li a:hover,
    #menu li a:active{
    background:url(../images/background/navbar_hover.png);
    color: #fff;

    }
    li:hover ul {
    display: block;
    position: absolute;
    margin-left:-20px;
    }
    li:hover li {
    float: none;
    font-size: 12px;
    }

    li:hover a {
    background:url(../images/background/navbar_hover_dark.png);
    height:20px;


    }

    li:hover li a:hover {
    background:url(../images/background/navbar.png);
    }
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2012
    Posts
    194
    Rep Power
    76
    In what way are you trying to copy the code?

    Normally you highlight the code, right click and copy then paste were its needed or use the keyboard shortcut keys
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2013
    Posts
    9
    Rep Power
    0
    There's no problem with copying the code over......

    The problem is if I leave ul tags in my css then it will apply all the attributes to all the ul tags and I dont want that, I only want it to apply it to my menu ul's so they need to unique to the menu but everything i usually do to combat this problem isn't working
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2012
    Posts
    194
    Rep Power
    76
    To fix this just add #menu to all of your CSS rules on li's and ul's so that those rules are only applied to your menu
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2013
    Posts
    9
    Rep Power
    0
    yeah thas whats confusing me i have tried that and it doesnt work ???
  10. #6
  11. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2012
    Posts
    194
    Rep Power
    76
    Originally Posted by Random_Guy_A
    yeah thas whats confusing me i have tried that and it doesnt work ???
    Code:
    <html>
    <head>
    <style type="text/css">
    
    body {
    background-color:#060;
    }
    
    #menu {
    height:35px;
    width:936px;
    background-image:url(../images/background/navbar_large.png);
    background-repeat:no-repeat;
    padding: 0;
    list-style: none;
    }
    
    #menu li {
    margin-left:20px;
    display: block;
    position: relative;
    float: left;
    }
    
    #menu li ul {
    display: none;
    font-weight:normal;
    }
    
    #menu li a {
    display: block;
    text-decoration: none;
    font-weight:bold;
    color: #000;
    padding: 7px 20px 8px ;
    margin-left: 1px;
    white-space: nowrap;
    }
    
    #menu li ul li a:hover {
    background: #2D681C;
    color: #fff;
    }
    
    #menu li ul li a:hover,
    #menu li ul li a:active {
    background:url(../images/background/navbar_hover.png);
    color: #fff;
    }
    
    #menu li:hover ul {
    display: block;
    position: absolute;
    margin-left:-20px;
    }
    
    #menu li:hover ul li {
    float: none;
    font-size: 12px;
    }
    
    #menu li:hover a {
    background:url(../images/background/navbar_hover_dark.png);
    height:20px;
    }
    
    #menu li:hover, li a:hover {
    background:url(../images/background/navbar.png);
    }
    </style>
    </head>
    <body>
    
    <ul id="menu" >
      <li><a href="">Home</a></li>
      <li><a href="">Events</a>
        <ul id="menu">
          <li><a href="">Schedule</a></li>
          <li><a href="">Previous Events</a></li>
        </ul>
      </li>
      <li><a href="">Gallery</a></li>
      <li><a href="">Music</a>
        <ul id="menu">
          <li><a href="">Album</a></li>
          <li><a href="">Songs</a></li>
          <li><a href="">Buy Now</a></li>
        </ul>
      </li>
      <li><a href="">Follow Dai</a>
        <ul id="menu">
          <li><a href="">Dais Blog</a></li>
          <li><a href="">Latest News</a></li>
          <li><a href="">Links</a></li>
        </ul>
      </li>
    </ul>
    
    <br /><br />
    <ul>
      <li>Test, will be normal</li>
      <li>
        <ul>
          <li>Nested test, will be normal</li>
        </ul>
      </li>
    </ul>
    
    </body>
    </html>
    I revised both your HTML and CSS code, mostly the CSS



    You new to CSS?
    Last edited by jack13580; April 1st, 2013 at 01:46 PM.
  12. #7
  13. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2013
    Posts
    9
    Rep Power
    0
    No I'm not new to css

    you've just added what I told you doesn't work??

    this does not resolve the problem

    if you run my original code you will see the difference the layout is uniform and all in bold and setup how i want it.

    when you add the #menu to the ul tags you lose all of that because the attributes aren't being picked up by the tags
  14. #8
  15. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2012
    Posts
    194
    Rep Power
    76
    Originally Posted by Random_Guy_A
    No I'm not new to css

    you've just added what I told you doesn't work??

    this does not resolve the problem

    if you run my original code you will see the difference the layout is uniform and all in bold and setup how i want it.

    when you add the #menu to the ul tags you lose all of that because the attributes aren't being picked up by the tags
    go to http://the-test.comoj.com/files/Testing-HTML.html, it will show the code I revised

    it is working like it should

    at http://the-test.comoj.com/files/original-html.html is your original unchanged code
  16. #9
  17. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2013
    Posts
    9
    Rep Power
    0
    Thanks jack, I actually found a another solution i surrounded the tags with a <nav> and added nav ul etc to the css.

    that code works online but not on my editor, so im guessing that might be out of date and thats why its causing the problems

    cheers.
  18. #10
  19. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2012
    Posts
    194
    Rep Power
    76
    by the way your menu code does not work for IE 8 and below
  20. #11
  21. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2013
    Posts
    9
    Rep Power
    0
    Originally Posted by jack13580
    by the way your menu code does not work for IE 8 and below
    Do people still use IE 8, do people still use IE? lol
  22. #12
  23. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2012
    Posts
    194
    Rep Power
    76
    Originally Posted by Random_Guy_A
    Do people still use IE 8, do people still use IE? lol
    You would be surprised with how many people still use IE, and the newest version of IE is actually quite good

IMN logo majestic logo threadwatch logo seochat tools logo