Thread: CSS Menu

    #1
  1. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2011
    Location
    The Pleiades
    Posts
    294
    Rep Power
    8

    CSS Menu


    Hello,

    I downloaded a drop-down menu from a website but it doesn't seem to be showing the right-arrows and down-arrows.

    I sent the CSS file to the validator, which returned no errors.

    Here is the relative CSS:
    Code:
    #pad {height:140px;}
    
    #menu_div {width: 60em;
              height: 2.5em;
    		  margin: auto;
    		  border: 1px solid #000;
    		  border-top: 0;}
    		  
    #menu {padding:0; margin:0; list-style:none; height:40px; position:relative; z-index:500; font-family:arial, verdana, sans-serif; float: left;}
    #menu li {float:left; margin-right:1px;}
    #menu li a {display:block; float:left; height:40px; line-height:40px; background:#333; color:#ccc; text-decoration:none; font-size:11px; font-weight:bold; padding:0 30px 0 20px;}
    
    
    #menu table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;}
    
    /* Default link styling */
    
    /* Style the list OR link hover. Depends on which browser is used */
    
    #menu li a:hover {z-index:200; position:relative;color:#fff; background-color:#c60;}
    #menu li:hover {position:relative; z-index:200;}
    
    #menu li:hover > a {color:#fff; background:#c60;}
    #menu li:hover > a.sub {color:#fff; background-color:#c60;}
    
    #menu li.current a {color:#fff; background:#840;}
    
    #menu li a.sub {background: #333 url("images/arrow_down.png") no-repeat right center;}
    #menu li.current a.sub {color:#fff; background:#840 url("images/arrow_down.png") no-repeat right center;}
    
    #menu :hover ul {left:0; top:40px; width:120px; background:#444;}
    
    /* keep the 'next' level invisible by placing it off screen. */
    #menu ul, 
    #menu :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}
    
    #menu :hover ul :hover ul
    {left:120px; top:-1px; background:#222; white-space:nowrap; width:100px; z-index:200; height:auto;}
    
    #menu :hover ul li {margin:0; border-top:1px solid #666;}
    #menu :hover ul li a {width:120px; padding:0; text-indent:10px; background:#333; color:#ccc; height:30px; line-height:30px;}
    #menu :hover ul li a.fly {background:#333 url("images/arrow_down.png") no-repeat right center;}
    
    #menu :hover ul :hover {background-color:#c60; color:#fff;}
    #menu :hover ul :hover a.fly {background-color:#c60; color:#fff;}
    
    #menu :hover ul li.currentsub a {background:#840; color:#fff;}
    #menu :hover ul li.currentsub a.fly {background:#840 url("images/arrow_right.png") no-repeat right center;}
    
    #menu :hover ul :hover ul li a {width:100px; padding:0; text-indent:10px; background:#3e3e3e; color:#ccc;}
    #menu :hover ul :hover ul :hover {background-color:#d70; color:#fff;}
    
    #menu :hover ul :hover ul li.currentfly a,
    #menu :hover ul :hover ul li.currentfly a:hover {background:#840; color:#fff;}
    Regards,

    Nanomech.
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Oct 2009
    Location
    Nebraska, USA
    Posts
    828
    Rep Power
    275
    Do you have the "arrow_down.png" and the "arrow_right.png" files?
    And, if so, are they located in a subfolder called "images"?
    You either need to have those images in a subdirectory called "images" [in relation to where the CSS file is located] or you need to edit the location to those images in the CSS file to point to where they are located in relation to where the CSS file is located.
  4. #3
  5. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2011
    Location
    The Pleiades
    Posts
    294
    Rep Power
    8
    Oh dear, what a stupid mistake.

    The images are in a subfolder called "images" but my css file is in a subfolder called "css".

    I forgot to change the paths to:
    Code:
    background: url("../images/arrow_down.png");
    Damnit, thank you for that post though because it was that that reminded me!



    Regards,

    Nanomech

    Comments on this post

    • DonR agrees : sometimes its those simplest things that can get you..glad to help.

IMN logo majestic logo threadwatch logo seochat tools logo