CSS hover Drop Down Menu Question

Discussion in 'CSS' started by tdd1984, May 1, 2008.

0
  1. #1
    Hey guys if you look at the code below everything works fine, but on the nav-menu.php I'm trying to create drop down menu for the Services link located in the <LI></LI> tag how can I do that? The home, blog, about us, contact us will stay the same just a direct link, but for the services link I want a drop down menu. 

    
// nav menu below.
<ul class="glossymenu">
	<li <?PHP if ($_SERVER['PHP_SELF'] == "/index.html") { echo "class='current'"; } ?>><a href="/"><b>Home</b></a></li>
	<li><a href="#"><b>Services</b></a></li>

	<li><a href="/quote.html"><b>Quote</b></a></li>	
	<li><a href="/seo-blogs/"><b>Blog</b></a></li>	
	<li><a href="/about-us.html><b>About Us</b></a></li>	
	<li><a href="/contact-us.php"><b>Contact Us</b></a></li>	
</ul>
    HTML:

    CSS below
    
.glossymenu{
	position: relative;
	padding: 0 0 0 34px;
	margin-left:275px;
	background: url(media/menur_bg.gif) repeat-x; /*tab background image path*/
	height: 55px;
	list-style: none;
}

.glossymenu li{
	float:left;
	margin-left:5px;
	margin-rigth:5px;
}

.glossymenu li a{
	float: left;
	display: block;
	color:#fff;
	text-decoration: none;
	font-family: sans-serif;
	font-size: 13px;
	font-weight: bold;
	padding:0 0 0 16px; /*Padding to accomodate left tab image. Do not change*/
	height: 40px;
	line-height: 40px;
	text-align: center;
	cursor: pointer;	
}

.glossymenu li a b{
	float: left;
	display: block;
	padding: 0 24px 0 8px; /*Padding of menu items*/
}

.glossymenu li.current a, .glossymenu li a:hover{
	color: #000;
	background: url(/images/background-nav-left.png) no-repeat; /*left tab image path*/
	background-position: left;
}

.glossymenu li.current a b, .glossymenu li a:hover b{
	color: #000;
	background: url(/images/background-nav-right.png) no-repeat right; /*right tab image path*/
}






body {
behavior: url('/csshover.htc');
}

<!--[if IE]>

body {
behavior: url(/administration/csshover.htc);
font-size: 100%;
}

#menu ul li {float: left; width: 100%;}
#menu ul li a {height: 1%;} 

#menu a, #menu h2 {
font: bold 0.7em/1.4em arial, helvetica, sans-serif;
}

<![endif]-->
    HTML:

     
    tdd1984, May 1, 2008 IP
  2. amazingcodes

    amazingcodes Peon

    Messages:
    173
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Sorry not sure.

    Im not sure if its meant to do that.
     
    amazingcodes, May 1, 2008 IP
  3. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Take a look at Sons of Suckerfish at HTML dog. Your menu will need to generally follow that format to have a dropdown menu. IE6 can't dropdown by itself so you either need the Suckerfish Javascript, PeterNed's whatever:hover .htc file, or Stu Nichols' invisible tables.

    http://www.htmldog.com/articles/suckerfish/dropdowns/

    Keep the li's floated but make the a's just display: block.

    The subs are children of the li, not the a. The width and position of the submenu depends on the li.

    The suckerfish is not IE7-friendly. You may want to trigger Haslayout or give it a "push" with a seperate declaration for the li:

    .glossymenu li {
    position: relative;
    z-index: 1;
    }
     
    Stomme poes, May 6, 2008 IP