Can someone please fix this CSS menu?

D

davidlem

Gawd
Joined
Jul 26, 2005
Messages
670
I'm implementing a CSS menu in a Drupal site and it's giving me fits. I've been trying to chase the demons with FireBug but I can't take it anymore - white flag! Included HTML and CSS that I've hacked up trying to chase the issue. The goal is to have the child drop down when you hover over the parent link like you see on basically every site. I can tweak the colors and such, but I would appreciate fresh working CSS to get me on the right track again.

Thanks

HTML: 
<div class="head-menu">
	<ul class="menu menulist">
		<ul>
			<li><a href="/">Home</a></li>
			<li><a href="/">Link 1</a></li>
			<li><a href="/">Link 2</a></li>
			<li><a href="/">Parent</a>
				<ul>
					<li><a href="/">Child</a></li>
				</ul>
			</li>
			<li><a href="/">Link 3</a></li>
			<li><a href="/">Link 4</a></li>
		</ul>
	</ul>
</div>

Code: 
.head-menu { border:none; border:0px; margin:0px; padding:0px; font: 70% Verdana; font-size:12px; font-weight:bold; }
    /* Main BG */
    .head-menu ul { /*background:#a10000;*/ height:25px; /*list-style:none;*/ margin:0px 0px 0px 1px; /*padding:0;*/ background:url(images/header-nav-left.gif) no-repeat 0 0 #A10000; position:relative; overflow:hidden; border:0 none; border-collapse:collapse; }
    .head-menu li { float:left; padding:0px; }
    .head-menu li a { text-transform:uppercase; background:#a10000 center right no-repeat; color:white; display:block; font-weight:normal; line-height:25px; margin:0px; padding:0px 25px; text-align:center; text-decoration:none; }
    .head-menu ul ul li ul li a:hover { background:white center right no-repeat; margin:0px; position:relative; }
    .head-menu ul li:hover a{ background: scroll silver bottom center no-repeat; color:black; text-decoration:none; display:block; }
    .head-menu li ul { background:silver; display:none; height:auto; padding:0px; margin:0px; border:0px; position:absolute; width:175px; z-index:999999; }
    .head-menu li:hover ul { display:block; }
 
It's a property of 'background-attachment', not 'background'. At any rate, it looks like your thinking the scroll property actually creates an action. If you want something to dynamically happen on hover, you'll need JS or some type of DHTML.
 
SUPERGT said:
It's a property of 'background-attachment'
Click to expand...

indeed, which is a component of 'background' - the way I have it written is using shorthand method.

anyway, I fixed it last night. in case it helps anyone else, no JS necessary;

Code: 
.head-menu{ border:none; border:0px; margin:0px; padding:0px; font: 70% Arial, Helvetica, sans-serif; font-size:12px; font-weight:bold;}
.head-menu ul{ background:#A10000; height:30px; list-style:none; margin:0; padding:0; }
    .head-menu li{ float:left; padding:0px; }
    .head-menu li a{ text-transform:uppercase; background:#A10000; color:white; display:block; font-weight:normal; line-height:30px; margin:0px; padding:0px 20px; text-align:center; text-decoration:none; }
        .head-menu li a:hover, .head-menu ul li:hover a{ background: gray url("images/hover.gif") bottom center no-repeat; color:white; text-decoration:none; }
    .head-menu li ul{ background:#A10000; display:none; height:auto; padding:0px; margin:0px; border:0px; position:absolute; width:225px; z-index:200; }
    .head-menu li:hover ul{ display:block; }
    .head-menu li li { background:url('images/sub_sep.gif') bottom left no-repeat; display:block; float:none; margin:0px; padding:0px; width:225px; }
    .head-menu li:hover li a{ background:none; }
    .head-menu li ul a{ display:block; height:35px; font-size:12px; font-style:normal; margin:0px; padding:0px 10px 0px 15px; text-align:left; }
        .head-menu li ul a:hover, .head-menu li ul li:hover a{ background:silver url('images/hover_sub.gif') center left no-repeat; border:0px; color:black; text-decoration:none; }
 
You must log in or register to reply here.
Back
Top