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 3 of 3
  1. #1
    New Coder
    Join Date
    Jan 2012
    Posts
    22
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS3 Menu Problems

    Hi guys basically I used a program to create a nice CSS menu which you can see here:

    http://gpgrafix.x10.mx/products.html

    Basically I want the top 2 tabs to have a green background to stand out from the rest of the menu!

    heres my products.html file

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <LINK href="style.css" title="compact" rel="stylesheet" type="text/css">
    <title>Gp Grafix - Graphic Design & Print Service - A huge range of products tailored to you</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    </head>
    <body style="background: #212121 url(bg.jpg); background-repeat:no-repeat;
    background-position:top;" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" 
     >
    <!-- Save for Web Slices (2ndslicetryDIVs.psd) -->
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    
    <!-- CONTAINER -->
    <!-- CONTAINER -->
    <!-- CONTAINER -->
    <!-- CONTAINER -->
    
    
    <div id="maindiv" class="maindiv" align="center" width="960" height="885" border="0" cellpadding="0" cellspacing="0">
    
    
    <!-- NAVIGAION -->
    <!-- NAVIGAION -->
    <!-- NAVIGAION -->
    <!-- NAVIGAION -->
    
    
    <div id="nav" align="center" width"960" height="41">
    
    <img src="images/indexdiv_01.png" width="20" height="41" alt=""><a href="index.html"><img src="images/indexdiv_02.png" width="105" height="41" alt=""></a><a href="aboutus.html"><img src="images/indexdiv_03.jpg" width="110" height="41" alt=""></a><a href="products.html"><img src="images/indexdiv_04.jpg" width="105" height="41" alt=""></a><a href="gallery.php"><img src="images/indexdiv_05.jpg" width="96" height="41" alt=""></a><a href="contactus.html"><img src="images/indexdiv_06.jpg" width="125" height="41" alt=""></a><img src="images/indexdiv_07.png" width="399" height="41" alt="">
    
    </div>
    <div id="spacer" align="center" width"960" height="11">
    <img src="images/indexdiv_08.jpg" width="960" height="11" alt="">
    </div>
    
    <!-- RIGHT CONTENT -->
    <!-- RIGHT CONTENT -->
    <!-- RIGHT CONTENT -->
    <!-- RIGHT CONTENT -->
    
    <div id="contentright" class="contentleft2" align="center" width"247" height="786">
    
    <!-- Start css3menu.com BODY section -->
    <link rel="stylesheet" href="CSS3 Menu_files/css3menu1/style.css" type="text/css" /><style>._css3m{display:none}</style>
    
    <ul id="css3menu1" class="topmenu">
    	<li class="topfirst"><a target="productframe" href="/products/wallart.html" style="width:192px;">Wall Art</a></li>
    	<li class="topmenu"><a target="productframe"  href="/products/carstickers.html" style="width:192px;">Car Stickers</a></li>
    	<li class="topmenu"><a href="#" style="width:192px;"><span>Badges</span></a>
    	<ul>
    		<li><a target="productframe" href="/products/namebadges.html">Name Badges</a></li>
    		<li><a target="productframe" href="/products/broochbadges.html">Brooch / Badge</a></li>
    	</ul></li>
    	<li class="topmenu"><a target="productframe" href="/products/banners.html" style="width:192px;">Banners</a></li>
    	<li class="topmenu"><a target="productframe" href="/products/bookmarks.html" style="width:192px;"><span>Bookmarks</span></a>
    	<ul>
    		<li><a target="productframe" href="/products/bookmarks.html">Aluminium</a></li>
    	</ul></li>
    	<li class="topmenu"><a target="productframe" href="/products/businesscards.html" style="width:192px;"><span>Business Cards</span></a>
    	<ul>
    		<li><a target="productframe" href="/products/businesscards.html">Aluminium</a></li>
    	</ul></li>
    	<li class="topmenu"><a href="#" style="width:192px;"><span>Car Accessories</span></a>
    	<ul>
    		<li><a target="productframe" href="/products/carstickers.html">Car Stickers / Decals</a></li>
    		<li><a target="productframe" href="/products/carwindowhanging.html">Car Window Hanging Signs</a></li>
    		<li><a target="productframe" href="/products/carlicense.html">Car License Plates</a></li>
    	</ul></li>
    	<li class="topmenu"><a href="#" style="width:192px;"><span>Clocks</span></a>
    	<ul>
    		<li><a target="productframe" href="/products/deskclocks.html">Desk Clocks</a></li>
    		<li><a target="productframe" href="/products/wallclocks.html">Wall Clocks</a></li>
    	</ul></li>
    	<li class="topmenu"><a href="#" style="width:192px;"><span>Clothing &amp; Accessories</span></a>
    	<ul>
    		<li><a target="productframe" href="/products/caps.html">Baseball Caps</a></li>
    		<li><a target="productframe" href="/products/bags.html">Bags</a></li>
    		<li><a target="productframe" href="/products/tshirts.html">T-Shirts</a></li>
    		<li><a target="productframe" href="/products/ties.html">Ties</a></li>
    	</ul></li>
    	<li class="topmenu"><a target="productframe" href="/products/coasters.html" style="width:192px;"><span>Coasters</span></a>
    	<ul>
    		<li><a target="productframe" href="/products/coasters.html">Aluminium</a></li>
    	</ul></li>
    	<li class="topmenu"><a href="#" style="width:192px;"><span>Cufflinks</span></a>
    	<ul>
    		<li><a target="productframe" href="/products/cuffsilver.html">Silver / Aluminium</a></li>
    		<li><a target="productframe" href="/products/cuffbox.html">Gift / Storage Box</a></li>
    	</ul></li>
    	<li class="topmenu"><a target="productframe" href="/products/doorplaque.html" style="width:192px;">Door Plaques</a></li>
    	<li class="topmenu"><a target="productframe"  href="/products/fridgemags.html" style="width:192px;">Fridge Magnets</a></li>
    	<li class="topmenu"><a target="productframe" href="/products/idtags.html" style="width:192px;">ID / Pet Tags</a></li>
    	<li class="topmenu"><a target="productframe" href="/products/keyrings.html" style="width:192px;"><span>Keyrings</span></a>
    	<ul>
    		<li><a target="productframe" href="/products/keyrings.html">Aluminium</a></li>
    		<li><a target="productframe" href="/products/lkeyrings.html">Leather</a></li>
    	</ul></li>
    	<li class="topmenu"><a target="productframe" href="/products/lighters.html" style="width:192px;"><span>Lighters</span></a>
    	<ul>
    		<li><a target="productframe" href="/products/lighters.html">Zippo Style Lighters</a></li>
    	</ul></li>
    	<li class="topmenu"><a href="#" style="width:192px;"><span>Mugs</span></a>
    	<ul>
    		<li><a target="productframe" href="/products/mugs.html">Mugs</a></li>
    		<li><a target="productframe" href="/products/mugsthermos.html">Thermos Style Mugs</a></li>
    	</ul></li>
    	<li class="topmenu"><a href="#" style="width:192px;"><span>Phone/Gadget Covers &amp; Cases</span></a>
    	<ul>
    		<li><a target="productframe" href="/products/ppouch.html">Phone Pouches</a></li>
    		<li><a target="productframe" href="/products/tcases.html">Tablet Cases</a></li>
    		<li><a target="productframe" href="/products/pcases.html">Phone Cases</a></li>
    	</ul></li>
    	<li class="topmenu"><a href="#" style="width:192px;"><span>Photo Frames / Slates</span></a>
    	<ul>
    		<li><a target="productframe" href="/products/photoslate.html">Rock Slate Photo Plaque</a></li>
    	</ul></li>
    	<li class="toplast"><a href="#" style="width:192px;"><span>Tie Accessories</span></a>
    	<ul>
    		<li><a target="productframe" href="/products/tslide.html"><span>Slide</span></a>
    		<ul>
    			<li><a target="productframe" href="/products/tslide.html">Gold / Aluminium</a></li>
    			<li><a target="productframe" href="/products/tslide.html">Silver / Aluminium</a></li>
    		</ul></li>
    		<li><a target="productframe" href="/products/tpin.html"><span>Pin</span></a>
    		<ul>
    			<li><a target="productframe" href="/products/tpin.html">Silver / Aluminium</a></li>
    		</ul></li>
    		<li><a target="productframe" href="/products/tbrooch.html"><span>Brooch</span></a>
    		<ul>
    			<li><a target="productframe" href="/products/tbrooch.html">Silver / Aluminium</a></li>
    		</ul></li>
    	</ul></li>
    	
    </ul>
    <!-- End css3menu.com BODY section -->
    
    
    </div>
    
    
    <!-- LEFT CONTENT -->
    <!-- LEFT CONTENT -->
    <!-- LEFT CONTENT -->
    <!-- LEFT CONTENT -->
    
    
    <div id="contentleft" class="contentright2" width"713" height="786">
    
    
    
    <iframe align="left" width="690px" frameborder="0" scrolling="auto" height="782px" src="productiframe.html" name="productframe"></iframe>
    
    
    
    </div>
    
    
    <!-- FOOTER -->
    <!-- FOOTER -->
    <!-- FOOTER -->
    <!-- FOOTER -->
    
    
    <div id="footer" align="center" width"960" height="41">
    			<img src="images/indexdiv_14.png" width="960" height="46" alt=""><img src="images/spacer.gif" width="20" height="1" alt=""><img src="images/spacer.gif" width="4" height="1" alt=""><img src="images/spacer.gif" width="101" height="1" alt=""><img src="images/spacer.gif" width="110" height="1" alt=""><img src="images/spacer.gif" width="105" height="1" alt=""><img src="images/spacer.gif" width="96" height="1" alt=""><img src="images/spacer.gif" width="125" height="1" alt=""><img src="images/spacer.gif" width="152" height="1" alt=""><img src="images/spacer.gif" width="13" height="1" alt=""><img src="images/spacer.gif" width="219" height="1" alt=""><img src="images/spacer.gif" width="15" height="1" alt="">
    </div>
    </div>
    
    <!-- End Save for Web Slices -->
    </body>
    </html>
    And heres the menus CSS style

    Code:
    ul#css3menu1,ul#css3menu1 ul{
    	margin:0;list-style:none;padding:0;background-color:#dedede;border-width:1px;border-style:solid;border-color:#5f5f5f;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;}
    ul#css3menu1 ul{
    	display:none;position:absolute;left:100%;top:0;-moz-box-shadow:3.5px 3.5px 5px #000000;-webkit-box-shadow:3.5px 3.5px 5px #000000;box-shadow:3.5px 3.5px 5px #000000;background-color:#424542;border-width:2px;border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px;border-color:#FFF;padding:0 10px 10px;}
    ul#css3menu1 li:hover>*{
    	display:block;}
    ul#css3menu1 li{
    	position:relative;display:block;white-space:nowrap;font-size:0;}
    ul#css3menu1 li:hover{
    	z-index:1;}
    ul#css3menu1 ul ul{
    	position:absolute;left:100%;top:0;}
    ul#css3menu1{
    	font-size:0;z-index:999;position:relative;display:inline-block;zoom:1;
    	*display:inline;}
    ul#css3menu1>li{
    	margin:0;}
    ul#css3menu1 a:active, ul#css3menu1 a:focus{
    	outline-style:none;}
    ul#css3menu1 a{
    	display:block;vertical-align:middle;text-align:left;text-decoration:none;font:bold 14px Trebuchet MS;color:#000;text-shadow:#FFF 0 0 1px;cursor:pointer;padding:10px;background-color:#444444;background-image:url("mainbk.png");background-repeat:repeat;background-position:0 0;border-width:1px 0 0 0;border-style:solid;border-color:#C0C0C0;}
    ul#css3menu1 ul li{
    	float:none;margin:10px 0 0;}
    ul#css3menu1 ul a{
    	text-align:left;padding:4px;background-color:#424542;background-image:none;border-width:0;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;font:14px Tahoma;color:#FFF;text-decoration:none;text-shadow:#FFF 0 0 0;}
    ul#css3menu1 li:hover>a,ul#css3menu1 a.pressed{
    	background-color:#444444;border-color:#C0C0C0;border-style:solid;color:#FFF;text-decoration:none;text-shadow:#FFF 0 0 1px;background-image:url("mainbk.png");background-position:0 100px;}
    ul#css3menu1 img{
    	border:none;vertical-align:middle;margin-right:10px;}
    ul#css3menu1 img.over{
    	display:none;}
    ul#css3menu1 li:hover > a img.def{
    	display:none;}
    ul#css3menu1 li:hover > a img.over{
    	display:inline;}
    ul#css3menu1 li a.pressed img.over{
    	display:inline;}
    ul#css3menu1 li a.pressed img.def{
    	display:none;}
    ul#css3menu1 span{
    	display:block;overflow:visible;background-position:right center;background-repeat:no-repeat;padding-right:0px;}
    ul#css3menu1 ul span{
    	background-image:url("arrowsub.png");padding-right:24px;}
    ul#css3menu1 li:hover>a,ul#css3menu1 li>a.pressed{
    	background-color:#444444;background-image:url("mainbk.png");background-position:0 100px;border-style:solid;border-color:#C0C0C0;color:#FFF;text-decoration:none;text-shadow:#FFF 0 0 1px;}
    ul#css3menu1 ul li:hover>a,ul#css3menu1 ul li>a.pressed{
    	background-color:#424542;background-image:none;color:#F2B20E;text-decoration:none;text-shadow:#FFF 0 0 0;}
    ul#css3menu1 li.topfirst>a{
    	border-width:0;border-radius:4px 4px 0 0 ;-moz-border-radius:4px 4px 0 0 ;-webkit-border-radius:4px;-webkit-border-bottom-right-radius:0;-webkit-border-bottom-left-radius:0;}
    ul#css3menu1 li.toplast>a{
    	border-radius:0 0 4px 4px;-moz-border-radius:0 0 4px 4px;-webkit-border-radius:0;-webkit-border-bottom-right-radius:4px;-webkit-border-bottom-left-radius:4px;}
    I just can seem to figure out how to only change the top 2?

    Any help is REALLY appreciated!

    Thanks a lot
    Ash
    Last edited by Ashkwil; 03-11-2012 at 04:20 PM.

  • #2
    New Coder
    Join Date
    Jan 2012
    Posts
    22
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sorry i included the wrong code, the first post is now updated, hopefully now ti will make more sense to someone!

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello Ashkwil,
    If you add a class to the top two li's it's pretty easy -
    Code:
    <div id="contentright" class="contentleft2" width"247"="" height="786" align="center">
    
    <!-- Start css3menu.com BODY section -->
    <link rel="stylesheet" href="CSS3%20Menu_files/css3menu1/style.css" type="text/css"><style>._css3m{display:none}</style>
    
    <ul id="css3menu1" class="topmenu">
    	<li class="topfirst green"><a target="productframe" href="/products/wallart.html" style="width:192px;">Wall Art</a></li>
    	<li class="topmenu green"><a target="productframe" href="/products/carstickers.html" style="width:192px;">Car Stickers</a></li>
    	<li class="topmenu"><a href="#" style="width:192px;"><span>Badges</span></a>
    	<ul>
    		<li><a target="productframe" href="/products/namebadges.html">Name Badges</a></li>
    		<li><a target="productframe" href="/products/broochbadges.html">Brooch / Badge</a></li>
    	</ul></li>
    ...and a line of css -
    Code:
    ul#css3menu1 li.topfirst>a{
    	border-width:0;border-radius:4px 4px 0 0 ;-moz-border-radius:4px 4px 0 0 ;-webkit-border-radius:4px;-webkit-border-bottom-right-radius:0;-webkit-border-bottom-left-radius:0;}
    ul#css3menu1 li.toplast>a{
    	border-radius:0 0 4px 4px;-moz-border-radius:0 0 4px 4px;-webkit-border-radius:0;-webkit-border-bottom-right-radius:4px;-webkit-border-bottom-left-radius:4px;}
    ul#css3menu1 li.green a {background: #0f0;}
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

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