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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    css noob help (drop down menu content)

    Hi guys,

    I'm a total noob! please help me out!!!

    Here is what i'm trying to do.
    sample pic

    1. orange line above the box
    2. non fixed width drop down box

    And this is what i have so far
    sample link
    (don't mind my peculiar way of making web, i'm learning 960 grid system right now, and i'll get to that after mock up is done)

    it's pretty close except there is a problem. currently the drop down box has a fixed width which is set at 228px. i don't want that. but if i remove width:228px, everything gets screwed up(forming 2 columns, and which rows have different width). and because of the fixed width, the orange border-bottom is all screwed up...



    please help me out!! thanks in advance!

    here is the CSS code, I found the script at cssplay.

    Code:
    .menu5 {
    	text-align:left;
    	font-family: arial, sans-serif;
    	font-weight:bold;
    	position:relative;
    	font-size:14px;
    	background: #119647; 
    	padding:0;
    	margin:0 0 0 37px;
    	
    	list-style-type:none;
    	z-index: 100;
    }
    .menu5 ul {
    padding:0; margin:0; list-style-type:none; /* for Firefox */
    }
    .menu5 li {
    float:left; position:relative;  background: #e6e6e5; 
    }
    
    
    .menu5 li a, .menu5 li a:visited {
    display:block; text-decoration:none; color:#52271f; float:left;   padding: 6px 26px 6px 26px;   height:1em; line-height:1em; 
    }
    * html .menu5 li a, .menu5 li a:visited {
     /* hack for IE5.5 */
    }
    .menu5 li a.drop, .menu5 li a.drop:visited {
    font-weight:bold;
    }
    .menu5 li ul {
    visibility:hidden; position:absolute;  left:0; height:0; overflow:hidden; 
    }
    
    /* fist line style for IE7 and non-IE browsers and the second line for IE5.5 and IE6 */
    
    .menu5  li.current a {
    text-decoration:none; border:0; color:#f26522; background: #e6e6e5; 
    }
    
    .menu5 li:hover a,
    .menu5 li a:hover {
    text-decoration:none; border: none; color:#f26522;  background: #e6e6e5; border-bottom: 2px solid #fc5f12;
    }
    .menu5 li:hover ul,
    .menu5 li a:hover ul {
    visibility:visible; height:auto; left:0; top: 2.4em; overflow:visible; color:#0f8e43;  font-size:12px;
    opacity: .9;
    	/* For IE 5-7 */
    	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=90);
    	/* For IE 8 */
    	-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    	
    }
    
    
    .menu5 li ul li{border:none !important;}
    
    
    
    .menu5 li:hover ul li a,
    .menu5 li a:hover ul li a {
    display:block; font-weight:normal;  text-decoration:none; height:auto; color:#52271f;  line-height:1em; padding:5px 7px 5px 7px; background:#e6e6e5;  font-size:11px; width:228px; border:none;
    }
    * html .menu5 li a:hover ul li a {
     /* hack for IE5.5 */
    }
    .menu5 li:hover ul li a.drop,
    .menu5 li a:hover ul li a.drop {
    font-weight:bold;
    }
    .menu5 li:hover ul li ul,
    .menu5 li a:hover ul li a ul {
    visibility:hidden; position:absolute; top:0;  height:0; overflow:hidden;
    }
    .menu5 li:hover ul li a:hover,
    .menu5 li a:hover ul li a:hover {
    text-decoration:none; color:#f26522; background:#e6e6e5;
    }
    .menu5 li:hover ul li:hover ul,
    .menu5 li a:hover ul li a:hover ul {
    visibility:visible; color:#f26522;  height:auto; 
    } 
    .menu5 li:hover ul li:hover ul.left,
    .menu5 li a:hover ul li a:hover ul.left {
    visibility:visible; color:#f26522;  height:auto; 
    }
    .menu5 li:hover ul li:hover ul li a,
    .menu5 li a:hover ul li a:hover ul li a {
    display:block; height:auto; 
    }
    .menu5 li:hover ul li:hover ul li:hover a,
    .menu5 li a:hover ul li a:hover ul li a:hover {
    text-decoration:none;
    }
    
    .menu5 li ul li a:before{ content:"> ";}
    Last edited by Bones_Jones; 06-11-2012 at 10:09 PM.

  • #2
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    anybody?

    maybe i should use a different css source?


  •  

    Posting Permissions

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