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

    Join Date
    Feb 2011
    Posts
    4
    Rep Power
    0

    Smile Css menu problem


    I have this problem that the first level sub-menus don't stretch properly can anybody tell me where in the code to correct this
    thanks

    image:
    h ttp://img4.imageshack.us/i/77512707.png/ (can't post links so just join the h and t)

    css:
    Code:
    @charset "UTF-8";
    
    
    /*------------------------------------------------------------------------------------------------------/
    	@section	Style Framework  */
    
    
    	/* First-level expected directory tag - li */
    
    	ul.dropdown li {
    	 padding: 5px;
    	}
    
    	ul.dropdown *.dir {
    	 padding-right: 20px;
    	 background-image: none;
    	 background-position: 100% 50%;
    	 background-repeat: no-repeat;
    	
    	}
    
    		/* Non-first level */
    		ul.dropdown ul *.dir {
    		 padding-right: 15px;
    		 background-image: url(images/nav-arrow-right.png);
    		 background-position: 100% 50%;
    		 background-repeat: no-repeat;
    		 
    		}
    
    		ul.dropdown ul ul *.dir {
    		 background-image: url(images/nav-arrow-right2.png);
    		}
    
    
    	/* Components override */
    
    	ul.dropdown-vertical *.dir {
    	 background-image: url(images/nav-arrow-right.png);
    	}
    
    	ul.dropdown-vertical-rtl *.dir {
    	 padding-right: 15px;
    	 background-image: url(images/nav-arrow-left.png);
    	 background-position: 0 50%;
    	
    	}
    
    
    
    /*------------------------------------------------------------------------------------------------------/
    	@section	Base Drop-Down Styling  */
    
    
    
    	/* ALL LEVELS (incl. first) */
    
    	ul.dropdown {
    	 font:  16px/normal Verdana, Arial, Sans-serif;
    	 letter-spacing:-1.5px;
    	}
    
    		ul.dropdown li {
    		 background-color: #333;
    		 color: #fff;
    		}
    
    		ul.dropdown li.hover,
    		ul.dropdown li:hover {
    		}
    
    		/* Links */
    
    		ul.dropdown a:link,
    		ul.dropdown a:visited { color: #fff; text-decoration: none;}
    		ul.dropdown a:hover {
    		 border-top-color: #6a6969 !important;
    		 border-left-color: #6a6969;
    		 background-color: #6a6969;
    		 color: #fff;
    		}
    
    		ul.dropdown ul a.dir:hover { /* proposal */
    		 background-color: #6a6969;
    		 background-image: url(images/comnav-arrowon.png);
    		 color: #fff;
    		}
    
    		ul.dropdown a:active {
    	background: #6a6969 url(images/nav-sub-press.png) 0 0 repeat-x !important;
    	color: #fff;
    	font-family: "Myriad Pro";
    		}
    
    
    		/* NON-FIRST LEVEL */
    	ul.dropdown ul {
    		
    		 margin-top: -1px;
    		 border-top: 1px solid #1a1a1a;
    		 border-left: solid 1px #4c4c4c;
    		 width: 100%;
    		 font: bold 11px/1em Verdana, Geneva, Tahoma, sans-serif;
    		}
    	
    
    			ul.dropdown ul li {
    			 background-color: #3a3a3a;
    			}
    
    		ul.dropdown ul ul {
    		 top: 0;
    		 right: auto;
    		 left: 100%;
    		 margin-top: 0;
    		 border-top: none;
    		 border-left: none;
    		 font-weight: normal;
    		}
    
    			ul.dropdown ul ul li {
    			 background-color: #4c4c4c;
    			}
    
    		ul.dropdown ul ul ul li {
    		 background-color: #595959;
    		}
    
    
    
    /* Mixed */
    
    ul.dropdown li a,
    ul.dropdown *.dir {
     border-style: solid;
     border-width: 1px;
     border-color: #404040 #1a1a1a #1a1a1a #505050;
    }
    
    ul.dropdown ul li a,
    ul.dropdown ul *.dir { border-color: #4a4a4a #242424 #242424; border-left: none; }
    
    ul.dropdown ul ul li a,
    ul.dropdown ul ul *.dir { border-color: #595959 #333 #333; }
    
    ul.dropdown ul ul ul li a,
    ul.dropdown ul ul ul *.dir { border-color: #767676 #404040 #404040; }
    
    
    
    /* Custom elements */
    
    #n-movies { width: auto; text-align: center; }
    #n-movies ul { right: auto; left: 0; width: auto; text-align: left; }
    #n-movies ul ul { left: auto; width: auto; }
    #n-movies ul a { width: auto; }
    #n-movies ul a.dir { width: auto; }
    #n-movies ul ul a { width: auto; }
    #n-movies ul ul a.dir { width: auto; }
    #n-movies ul ul ul { left: 100%; }
    Last edited by Kravvitz; February 7th, 2011 at 01:52 AM. Reason: added [code] tags
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    Welcome to DevShed Forums, frozenreality.

    Please post the HTML for that menu too.

    As you found out new users are restricted from posting URLs until they have made 5 posts. You may need to get around this by leaving out the "http://" and putting a space before each ".". Yes this rule is annoying, but the administrators say it's necessary for limiting spam.

    P.S. It would be helpful if you put your code between [code][/code] tags in the future. I added them for you this time.
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2011
    Posts
    4
    Rep Power
    0
    Thanks for the suggestions

    I managed to find the culprit after searching for it for a long time, but now I have a second problem img715.imageshack.us/img715/1391/secondproblem.png any help would be greatly appreciated

    html code attached

    Code:
    <html>
    <head>
    <title>web materiales template</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <link href="css/dropdown/themes/default/helper.css" media="screen" rel="stylesheet" type="text/css" />
    
    <link href="css/dropdown/dropdown.vertical.css" media="screen" rel="stylesheet" type="text/css" />
    <link href="css/dropdown/themes/default/default.ultimate.css" media="screen" rel="stylesheet" type="text/css" />
    </head>
    <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
    <!-- Save for Web Slices (web materiales template.psd) -->
    <table id="Table_01" width="951" height="1189" border="0" cellpadding="0" cellspacing="0">
    	<tr>
    		<td colspan="9">
    			<img src="images/web-materiales-template_01.jpg" width="950" height="206" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="1" height="206" alt=""></td>
    	</tr>
    	<tr>
    		<td colspan="9">
    			<ul id="nav" class="dropdown dropdown-horizontal">
    	<li id="n-home"><a href="./">INICIO</a></li>
    	<li id="n-news"><a href="./" class="dir">CONSTRUCCION</a>
    		<ul>
    			<li class="first"><a href="./">Subcategoria</a></li>
    			<li><span class="dir">Subcategoria</span>
    				<ul>
    					<li class="first"><a href="./">Subcategoria1</a></li>
    					<li><a href="./">Subcategoria1</a></li>
    					<li><a href="./">Subcategoria1</a></li>
    					<li><a href="./">Subcategoria1</a></li>
    					<li><a href="./">Subcategoria1</a></li>
    				</ul>
    			</li>
    			<li><a href="./">Subcategoria</a></li>
    			<li><a href="./">Subcategoria</a></li>
    			<li><span class="dir">Subcategoria</span>
    				<ul>
    					<li class="first"><a href="./">Subcategoria</a></li>
    					<li><a href="./">Subcategoria</a></li>
    				</ul>
    			</li>
    			<li><span class="dir">Subcategoria</span>
    				<ul>
    					<li class="first"><a href="./">Subcategoria</a></li>
    					<li><a href="./">Subcategoria</a></li>
    					<li><a href="./">Subcategoria</a></li>
    					<li><a href="./">Subcategoria</a></li>
    					<li><a href="./">Subcategoria</a></li>
    					<li><a href="./">Subcategoria</a></li>
    				</ul>
    			</li>
    			<li><a href="./">Subcategoria</a></li>
    			<li><a href="./">Subcategoria</a></li>
    			<li><a href="./">Subcategoria</a></li>
    			<li><a href="./">Subcategoria</a></li>
    		</ul>
    	</li>
    	<li id="n-shows"><a href="./" class="dir">HOGAR</a>
    		<ul>
    			<li class="first"><a href="./"><strong>Subcategoria</strong></a></li>
    			<li><a href="./">Subcategoria</a></li>
    			<li><a href="./">Subcategoria</a></li>
    			<li><a href="./">Subcategoria</a></li>
    			<li><a href="./"
    			target="_blank">Subcategoria</a></li>
    		</ul>
    	</li>
    	<li id="n-news"><a href="./" class="dir">ELECTRICIDAD</a>
    		<ul>
    			<li class="first"><a href="./">Subcategoria</a></li>
    			<li><span class="dir">Subcategoria</span>
    				<ul>
    					<li class="first"><a href="./">Subcategoria</a></li>
    					<li><a href="./">Subcategoria</a></li>
    					<li><a href="./">Subcategoria</a></li>
    					<li><a href="./">Subcategoria</a></li>
    					<li><a href="./">Subcategoria</a></li>
    				</ul>
    			</li>
    			<li><a href="./">Subcategoria</a></li>
    			<li><a href="./">Subcategoria</a></li>
    			<li><span class="dir">Subcategoria</span>
    				<ul>
    					<li class="first"><a href="./">Subcategoria</a></li>
    					<li><a href="./">Subcategoria</a></li>
    				</ul>
    			</li>
    			<li><span class="dir">Subcategoria</span>
    				<ul>
    					<li class="first"><a href="./">Subcategoria</a></li>
    					<li><a href="./">Subcategoria</a></li>
    					<li><a href="./">Subcategoria</a></li>
    					<li><a href="./">Subcategoria</a></li>
    					<li><a href="./">Subcategoria</a></li>
    					<li><a href="./">Subcategoria</a></li>
    				</ul>
    			</li>
    			<li><a href="./">Subcategoria</a></li>
    			<li><a href="./">Subcategoria</a></li>
    			<li><a href="./">Subcategoria</a></li>
    			<li><a href="./">Subcategoria</a></li>
    		</ul>
    	</li>
        	<li id="n-news"><a href="./" class="dir">FERRETERIA</a>
    		<ul>
    			<li class="first"><a href="./">Subcategoria</a></li>
    			<li><span class="dir">Subcategoria</span>
    				<ul>
    					<li class="first"><a href="./">Subcategoria</a></li>
    					<li><a href="./">Subcategoria</a></li>
    					<li><a href="./">Subcategoria</a></li>
    					<li><a href="./">Subcategoria</a></li>
    					<li><a href="./">Subcategoria</a></li>
    				</ul>
    			</li>
    			<li><a href="./">Subcategoria</a></li>
    			<li><a href="./">Subcategoria</a></li>
    			<li><span class="dir">Subcategoria</span>
    				<ul>
    					<li class="first"><a href="./">Subcategoria</a></li>
    					<li><a href="./">Subcategoria</a></li>
    				</ul>
    			</li>
    			<li><span class="dir">Subcategoria</span>
    				<ul>
    					<li class="first"><a href="./">Subcategoria</a></li>
    					<li><a href="./">Subcategoria</a></li>
    					<li><a href="./">Subcategoria</a></li>
    					<li><a href="./">Subcategoria</a></li>
    					<li><a href="./">Subcategoria</a></li>
    					<li><a href="./">Sway</a></li>
    				</ul>
    			</li>
    			<li><a href="./">Subcategoria</a></li>
    			<li><a href="./">Subcategoria</a></li>
    			<li><a href="./">Subcategoria</a></li>
    			<li><a href="./">Subcategoria</a></li>
    		</ul>
    	</li>
    
    </ul>
    </td>
    		<td>
    			<img src="images/spacer.gif" width="1" height="40" alt=""></td>
    	</tr>
    	<tr>
    		<td colspan="2" rowspan="2" bgcolor="#333333">
    			<ul id="nav" class="dropdown dropdown-vertical">
    	<li id="n-news"><a href="./">ANGULOS</a></li>
    	<li id="n-home"><a href="./">BARRAS</a></li>
    	<li id="n-home"><a href="./">CABILLAS Y ALAMBRONES</a></li>
        <li id="n-home"><a href="./" >CELDAS ELECTROSOLDADAS</a></li> 
        <li id="n-home"><a href="./">CUBIERTAS PARA TECHOS</a></li>
         <li id="n-home"><a href="./">LAMINAS Y BOBINAS</a></li>
          <li id="n-home"><a href="./">LOSASERO</a></li>
           <li id="n-home"><a href="./">MALLAS ELECTROSOLDADAS</a></li>
            <li id="n-home"><a href="./">MANTO</a></li>
             <li id="n-home"><a href="./">PAVCO</a></li>
              <li id="n-home"><a href="./">PLETINAS</a></li>
               <li id="n-home"><a href="./">PRODUCTOS ASFALTICOS</a></li>
                <li id="n-home"><a href="./">PRODUCTOS VICSON</a></li>
                 <li id="n-home"><a href="./">PROPERCA</a></li>
                  <li id="n-home"><a href="./">TUBERIAS DE ACERO</a></li>
                   <li id="n-home"><a href="./">TUBERIA Y PERFILERIA</a></li>
                    <li id="n-home"><a href="./">VENCEMOS</a></li>
                     <li id="n-home"><a href="./">VIGAS</a></li>
                     <li id="n-home"><a href="./">REGRESAR</a></li></td>
    		<td>
    			<img src="images/web-materiales-template_04.jpg" width="1" height="1" alt=""></td>
    		<td colspan="6" rowspan="2" background="images/web-materiales-template_05.png" width="714" height="813">
    			</td>
    		<td>
    			<img src="images/spacer.gif" width="1" height="1" alt=""></td>
    	</tr>
    	<tr>
    		<td>
    			<img src="images/web-materiales-template_06.png" width="1" height="812" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="1" height="812" alt=""></td>
    	</tr>
    	<tr>
    		<td rowspan="4">
    			<img src="images/web-materiales-template_07.png" width="152" height="42" alt=""></td>
    		<td colspan="4" rowspan="4">
    			<img src="images/web-materiales-template_08.png" width="175" height="42" alt=""></td>
    		<td>
    			<img src="images/web-materiales-template_09.png" width="184" height="1" alt=""></td>
    		<td colspan="2" rowspan="2">
    			<img src="images/web-materiales-template_10.png" width="203" height="40" alt=""></td>
    		<td rowspan="2">
    			<img src="images/web-materiales-template_11.png" width="236" height="40" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="1" height="1" alt=""></td>
    	</tr>
    	<tr>
    		<td rowspan="3">
    			<img src="images/web-materiales-template_12.png" width="184" height="41" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="1" height="39" alt=""></td>
    	</tr>
    	<tr>
    		<td>
    			<img src="images/web-materiales-template_13.png" width="198" height="1" alt=""></td>
    		<td colspan="2" rowspan="3">
    			<img src="images/web-materiales-template_14.jpg" width="241" height="89" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="1" height="1" alt=""></td>
    	</tr>
    	<tr>
    		<td rowspan="2">
    			<img src="images/web-materiales-template_15.png" width="198" height="88" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="1" height="1" alt=""></td>
    	</tr>
    	<tr>
    		<td colspan="4">
    			<img src="images/web-materiales-template_16.png" width="237" height="87" alt=""></td>
    		<td colspan="2">
    			<img src="images/web-materiales-template_17.png" width="274" height="87" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="1" height="87" alt=""></td>
    	</tr>
    	<tr>
    		<td>
    			<img src="images/spacer.gif" width="152" height="1" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="83" height="1" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="1" height="1" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="1" height="1" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="90" height="1" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="184" height="1" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="198" height="1" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="5" height="1" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="236" height="1" alt=""></td>
    		<td></td>
    	</tr>
    </table>
    <!-- End Save for Web Slices -->
    </body>
    </html>
  6. #4
  7. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    It looks like you may have a "left:0" where you don't want it. Please post your updated stylesheet.

    IDs should be unique within a document. You could use a class instead.

    Did you remove the doctype because it includes a URL or are you really not using one?

    ImageReady and Photoshop produce horrible HTML code. I recommend you write your own code.
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2011
    Posts
    4
    Rep Power
    0
    Hi thanks for those comments I just got out of school in multimedia so I know how to use the whole master collection but mastered none, that code was made by Photoshop, I will add the doctype that is missing and modify the tags, this drop down menu was from a tutorial I just modified for it to work on this page,


    Code:
    @charset "UTF-8";
    
    
    
    /*------------------------------------------------------------------------------------------------------/
    	@section	Style Framework  */
    
    
    	/* First-level expected directory tag - li */
    
    	ul.dropdown li {
    	 padding: 5px;
    	}
    
    	ul.dropdown *.dir {
    	 padding-right: 20px;
    	 background-image: none;
    	 background-position: 100% 50%;
    	 background-repeat: no-repeat;
    	
    	}
    
    		/* Non-first level */
    		ul.dropdown ul *.dir {
    		 padding-right: 15px;
    		 background-image: url(images/nav-arrow-right.png);
    		 background-position: 100% 50%;
    		 background-repeat: no-repeat;
    		 
    		}
    
    		ul.dropdown ul ul *.dir {
    		 background-image: url(images/nav-arrow-right2.png);
    		}
    
    
    	/* Components override */
    
    	ul.dropdown-vertical *.dir {
    	 background-image: url(images/nav-arrow-right.png);
    	}
    
    	ul.dropdown-vertical-rtl *.dir {
    	 padding-right: 15px;
    	 background-image: url(images/nav-arrow-left.png);
    	 background-position: 0 50%;
    	
    	}
    
    
    
    /*------------------------------------------------------------------------------------------------------/
    	@section	Base Drop-Down Styling  */
    
    
    
    	/* ALL LEVELS (incl. first) */
    
    	ul.dropdown {
    	 font:  16px/normal Verdana, Arial, Sans-serif;
    	 letter-spacing:-1.5px;
    	}
    
    		ul.dropdown li {
    		 background-color: #333;
    		 color: #fff;
    		}
    
    		ul.dropdown li.hover,
    		ul.dropdown li:hover {
    		}
    
    		/* Links */
    
    		ul.dropdown a:link,
    		ul.dropdown a:visited { color: #fff; text-decoration: none;}
    		ul.dropdown a:hover {
    		 border-top-color: #6a6969 !important;
    		 border-left-color: #6a6969;
    		 background-color: #6a6969;
    		 color: #fff;
    		}
    
    		ul.dropdown ul a.dir:hover { /* proposal */
    		 background-color: #6a6969;
    		 background-image: url(images/comnav-arrowon.png);
    		 color: #fff;
    		}
    
    		ul.dropdown a:active {
    	background: #6a6969 url(images/nav-sub-press.png) 0 0 repeat-x !important;
    	color: #fff;
    	font-family: Verdana, Geneva, sans-serif;
    		}
    
    
    		/* NON-FIRST LEVEL width problem*/
    	ul.dropdown ul {
    		
    		 margin-top: -1px;
    		 border-top: 1px solid #1a1a1a;
    		 border-left: solid 1px #4c4c4c;
    		 width: 100%;
    		 font: bold 11px/1em Verdana, Geneva, Tahoma, sans-serif;
    		}
    	
    
    			ul.dropdown ul li {
    			 background-color: #3a3a3a;
    			}
    
    		ul.dropdown ul ul {
    		 top: 0;
    		 right: auto;
    		 left: 100%;
    		 margin-top: 0;
    		 border-top: none;
    		 border-left: none;
    		 font-weight: normal;
    		}
    
    			ul.dropdown ul ul li {
    			 background-color: #4c4c4c;
    			}
    
    		ul.dropdown ul ul ul li {
    		 background-color: #595959;
    		}
    
    
    
    /* Mixed */
    
    ul.dropdown li a,
    ul.dropdown *.dir {
     border-style: solid;
     border-width: 1px;
     border-color: #404040 #1a1a1a #1a1a1a #505050;
    }
    
    ul.dropdown ul li a,
    ul.dropdown ul *.dir { border-color: #4a4a4a #242424 #242424; border-left: none; }
    
    ul.dropdown ul ul li a,
    ul.dropdown ul ul *.dir { border-color: #595959 #333 #333; }
    
    ul.dropdown ul ul ul li a,
    ul.dropdown ul ul ul *.dir { border-color: #767676 #404040 #404040; }
    
    
    
    /* Custom elements */
    
    #n-movies { width: auto; text-align: center; }
    #n-movies ul { right: auto; width: auto; text-align: left; }
    #n-movies ul ul { left: auto; width: auto; }
    #n-movies ul a { width: auto; }
    #n-movies ul a.dir { width: auto; }
    #n-movies ul ul a { width: auto; }
    #n-movies ul ul a.dir { width: auto; }
    #n-movies ul ul ul { left: 100%; }
  10. #6
  11. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    It seems some of the styles for that menu are in another stylesheet.

    Do you have a copy of this page on a public web server by any chance?
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  12. #7
  13. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2011
    Posts
    4
    Rep Power
    0
    no I am sorry I don't have it online yet but I uploaded to www . megaupload . com/?d=KCR9EWYJ thanks

IMN logo majestic logo threadwatch logo seochat tools logo