...

View Full Version : css noob help (drop down menu content)



Bones_Jones
06-11-2012, 10:07 PM
Hi guys,

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

Here is what i'm trying to do.
sample pic (http://tinyurl.com/7zxjutf)

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

And this is what i have so far
sample link (http://tinyurl.com/7236ome)
(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.



.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:"> ";}

Bones_Jones
06-12-2012, 05:15 AM
anybody?

maybe i should use a different css source?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum