homepage Welcome to WebmasterWorld Guest from 54.226.43.155
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
CSS Navigation
basic question im sure
tonynoriega




msg:4053978
 8:54 pm on Jan 4, 2010 (gmt 0)

im creating from scratch, my first attempt.

im tired of cutting and pasting code and then i have to figure out how to modify it to my liking....so...

ive made a drop down menu.

when i hover over the UL LI A in the drop down, the main navigation background image dissapears, obviously becuase im not hovering over it...

how do i keep that background image persistent?

 

rocknbil




msg:4053992
 9:25 pm on Jan 4, 2010 (gmt 0)

Navigation image in whole menu?

#menu {
margin:0;
padding:6px;
background: url(/path/to/image.jpg) top left no-repeat;
}

#menu li {
margin:0;
padding:0;
list-style:none;
}

#menu li a {
margin:0;
padding:6px 12px 6px 12px;
list-style:none;
}

#menu li a:link {
color: #ff0000;
/* and so on, for all link states */
}
....

<ul id="menu">
<li><a href="about.html">About</a></li>
<li><a href="contacthtml">Contact</a></li>
<!-- etc -->
</ul>

Or, navigation image for each link state?

#menu {
margin:0;
padding:6px;
}

#menu li {
margin:0;
padding:0;
list-style:none;
}

#menu li a {
margin:0;
padding:6px 12px 6px 12px;
list-style:none;
background: url(/path/to/no-hover.jpg) top left no-repeat;
}

#menu li a:link, #menu li a:active #menu li a:visited {
color: #ff0000;
background: url(/path/to/no-hover.jpg) top left no-repeat;
/* a:link may not be needed */
}

#menu li a:hover {
color: #00ff00;
background: url(/path/to/hover.jpg) top left no-repeat;
/* may not be needed */
}

tonynoriega




msg:4054026
 10:20 pm on Jan 4, 2010 (gmt 0)

The background image for each navigation link state...

i tried what you provided, but did not seem to work, here was what i left off with


#nav{
width:995px;
height:113px;
margin:0 auto;
background:#fff url(images/nav-bg.jpg) 0 0 no-repeat;
font-family: Arial, sans-serif;
}

.menu {
width:740px;
margin-top:41px;
height:43px;

}

.menu ul {
width:100%;

}

.menu ul li {
width:185px;
float:left;
position:relative;
}

.menu ul li a.topnav:link, .menu ul li a.topnav:visited{
display:block;
height:43px;
width:184px;
color:#000;
text-align:center;

}
.menu ul li a.topnav:hover, .menu ul li a.topnav:active {
background:url(images/tab-bg.png) 19px 0 no-repeat;

}

.menu ul li ul {
visibility:hidden;
width:467px;
height:122px;
background:#0068b3;
padding:10px;
position:relative;
left:19px;

}

.menu ul ul li{
width:155px;
height:40px;
float:left;
margin:0 1px 1px 0;
padding:0;
}

.menu ul ul li a{
color:#fff;
text-decoration:underline;
font-size:13px;
font-weight:bold;
padding:15px 0 0 9px;
width:146px;
height:25px;
background:#1375bc url(images/arrow-off.png) 2px 17px no-repeat;
display:block;
}

.menu ul ul li a:hover{
color:#0068b3;
text-decoration:none;
background:#fff url(images/arrow-on.png) 0 0 no-repeat;

}

.menu ul li:hover ul, .menu ul li a:hover ul{
visibility:visible;
}

HTML


<div id="nav">

<div class="menu">

<ul>

<li><a href="#" class="topnav">Members</a></li>
<ul>
<li><a href="#">Health Insurance</a></li>
<li><a href="#">Behavioral Health</a></li>
<li><a href="#">Discount Services</a></li>
<li><a href="#">Dental Insurance</a></li>
<li><a href="#">Decision Support</a></li>
<li><a href="#">Health Library</a></li>
<li><a href="#">Medicare Insurance</a></li>
<li><a href="#">Wellness Support</a></li>
<li><a href="#">Disease Management</a></li>
</ul>

<li><a href="#" class="topnav">Brokers</a></li>
<li><a href="#" class="topnav">Employers</a></li>
<li><a href="#" class="topnav">Providers</a></li>

</ul>

</div>

</div><!--/nav-->

again, what is happening is that when i hover over the drop down menu selections, the main topnav background image dissapears...

rocknbil




msg:4055441
 8:20 pm on Jan 6, 2010 (gmt 0)

Well, there's a couple things going on, you'll need to resolve these first. The link sent via PM doesn't work at all in FireFox (no drop down menus at all) but I think I might know why.

I don't have your images so I substituted background colors in the code below. First problem is this:

<ul>
<li><a href="#" class="topnav">Members</a></li>
<ul>

You have the ul "bare" between <li>'s, which is invalid and is probably why it's broken in FF. You need to nest that <ul> inside the <li>, like

<ul>
<li><a href="#" class="topnav">Members</a>
<ul>
<!-- the other li's for the nested URL -->
</ul>
</li>

Note how the first li "encapsulates" the nested li.

This, of course, changes everything. :-) you'll now need to modify your selectors like so:

.menu ul ul li{ <-- ul ul invalid

.menu ul li ul li{

.menu ul ul li a{ <-- ul ul invalid

.menu ul li ul li a{

.menu ul ul li a:hover{ <-- ul ul invalid

.menu ul li ul li a:hover{

As for the disappearing BG, you just need to add the :link selector:

.menu ul li a.topnav:link,.menu ul li a.topnav:hover, .menu ul li a.topnav:active {
/*background:url(images/tab-bg.png) 19px 0 no-repeat;*/
background:#ff0000; /*red */
}

I say "changes everything" because after making these changes it may not be the layout you expect, but here is what I have. It's definately hosed up in FF, the sub-menus are flowing down to the next lines.


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=ISO-8859-1">
<title>Untitled</title>
<style type="text/css">
#nav{
width:995px;
height:113px;
margin:0 auto;
/*background:#fff url(images/nav-bg.jpg) 0 0 no-repeat;*/
background:#c0c0c0; /*gray*/
font-family: Arial, sans-serif;
}
.menu {
width:740px;
margin-top:41px;
height:43px;
}
.menu ul {
width:100%;
}
.menu ul li {
width:185px;
float:left;
position:relative;
}
.menu ul li a.topnav:link, .menu ul li a.topnav:visited{
display:block;
height:43px;
width:184px;
color:#000;
text-align:center;
}
.menu ul li a.topnav:link,.menu ul li a.topnav:hover,
.menu ul li a.topnav:active {
/*background:url(images/tab-bg.png) 19px 0 no-repeat;*/
background:#ff0000; /*red */
}
.menu ul li ul {
visibility:hidden;
width:467px;
height:122px;
background:#0068b3;
padding:10px;
position:relative;
left:19px;
}
.menu ul li ul li{
width:155px;
height:40px;
float:left;
margin:0 1px 1px 0;
padding:0;
}
.menu ul li ul li a{
color:#fff;
text-decoration:underline;
font-size:13px;
font-weight:bold;
padding:15px 0 0 9px;
width:146px;
height:25px;
/*background:#1375bc url(images/arrow-off.png) 2px 17px no-repeat;*/
background:#e1ffe1; /*green */
display:block;
}
.menu ul li ul li a:hover{
color:#0068b3;
text-decoration:none;
/*background:#fff url(images/arrow-on.png) 0 0 no-repeat;*/
background:#d7ebff; /*lt blue */
}
.menu ul li:hover ul, .menu ul li a:hover ul{
visibility:visible;
}
</style>
</head>
<body>
<div id="nav">
<div class="menu">
<ul>
<li><a href="#" class="topnav">Members</a>
<ul>
<li><a href="#">Health Insurance</a></li>
<li><a href="#">Behavioral Health</a></li>
<li><a href="#">Discount Services</a></li>
<li><a href="#">Dental Insurance</a></li>
<li><a href="#">Decision Support</a></li>
<li><a href="#">Health Library</a></li>
<li><a href="#">Medicare Insurance</a></li>
<li><a href="#">Wellness Support</a></li>
<li><a href="#">Disease Management</a></li>
</ul>
</li> <!-- note the nesting changes, so do your selectors -->
<li><a href="#" class="topnav">Brokers</a></li>
<li><a href="#" class="topnav">Employers</a></li>
<li><a href="#" class="topnav">Providers</a></li>
</ul>
</div>
</div><!--/nav-->
</body>
</html>

[edited by: alt131 at 8:28 pm (utc) on Jan 24, 2012]
[edit reason] Side Scroll [/edit]

tonynoriega




msg:4055461
 8:48 pm on Jan 6, 2010 (gmt 0)

Schweet. With those small tweaks it looks good in IE8 and i checked FF on a MAC and all is well.

Now, my thinking may be infantile here... with the selector a:link i added...

that put the background image on all of the main UL links, which i was trying to avoid.

i only want the background tab image to show up when you hover over the main UL LI, and when you are hover overing the nested UL LI A's they still keep the tab...

so if you arent necessarily hovering over the main UL LI, but you are hovering over the nested UL LI A, it still shows the tab..

if that makes sense...

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved