Jump to content

Drop down menu help.

UrbanDweller

By UrbanDweller
in CSS Help

 Share

Recommended Posts

UrbanDweller Member

UrbanDweller

Posted
Posted

Hey all,

 

Im trying to edit a css/html drop down menu I got off the net, one thing I had to change was making classes for the main menubar buttons to allow for different editing for text etc.

 

This issue is that the drop down menu on Unit Converters doesnt come down when hovered over, maybe due to the new class.

If you could have a look and see where i made a mistake would be awesome!!

 

Thanks a lot.

 

HTML CODE:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--[if IE]>
<style type="text/css" media="screen">
body {
behavior: url(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;
}
</style>
<![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="Untitled-2.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="menu">
<ul>
	<li class="header"><a href="hs4.html">HOME</a></li>
</ul>
<ul>
	<li class="header"><a href="hs4.html">UNIT CONVERTERS</a></li>
	<ul>
      		<li><a href="hs4.html">Length</a></li>
		<li><a href="hs5.html">Weight</a></li>			
		<li><a href="hs6.html">Volume</a></li>
	</ul>
</ul>
<ul>
    <li class="header"><a href="hs4.html">CALCULATORS</a></li>
        <ul>
            <li><a href="">Age Calculator</a></li>
        </ul>
    </ul>
    <ul>
        <li class="header"><a href="hs4.html">SEND EQUATION</a></li>
    </ul>
    <ul>
        <li class="header"><a href="hs4.html">FAQ'S</a></li>
    </ul>
    <ul>
        <li class="header"><a href="hs4.html">CONTACT US</a></li>
    </ul>						
</div>
</body>
</html>

 

CSS CODE:

@charset "utf-8";
/* CSS Document */

#menu {
background: #eee;
float: left;
}
#menu ul {
list-style: none;
margin: 0;
padding: 0;
width: auto;
float: left;
}
#menu a, .header a{
font: 11px/16px Verdana, Geneva, sans-serif;
text-align: center;
display: block;
margin: 0;
text-transform:uppercase;
text-decoration: none;
}

#menu .header a{
font-weight: bold;
padding: 8px 10px 0 10px;
border-right: 1px solid #C7E0FC;
height: 26px;
color: #666;
background-image: url(styles/menubar/menuline.gif);
background-repeat:repeat-x;
text-transform:uppercase;
}

#menu .header a:hover{
font-weight: bold;
padding: 8px 10px 0 10px;
text-align: center;
height: 26px;
color: #333;
background-image: url(styles/menubar/menuline1.gif);
background-repeat:repeat-x;
text-transform:uppercase;
color: #000;
text-decoration: none;
width:auto;
}

#menu ul ul li a {
color: #000;
background-image:url(styles/menubar/bg_04%5B3%5D.gif);
}

#menu ul ul li a:hover {
color: #a00;
background-image: url(styles/menubar/bg_04%5B2%5D.gif);
}

#menu li {position: relative;}

#menu ul ul {
position: absolute;
z-index: 500;
}

div#menu ul ul,
div#menu ul .header a:hover ul ul,
{display: none;}

div#menu ul .header a:hover ul,
div#menu ul ul li:hover ul,
{display: block;}

Link to comment
Share on other sites
Frank P Newbie

Frank P

Posted
Posted

I haven't looked at the CSS yet, because you did something really weird with the HTML list. That's not the way to do it. Here is how to do it: Create a Drop-down/Fly-out Menu with CSS. I don't wanna claim that my tutorial is better (I will leave that judgment up to others), but I only offer forum support for that tut. And it offers the shortest and most simple code that I've seen so far, that's a simple fact.  You should have it up and running in 10 to 20 minutes.

Link to comment
Share on other sites
Frank P Newbie

Frank P

Posted
Posted

For some strange reason the Modify button has become unavailable in a matter of minutes rather than hours, so I have to do this in a new post.

 

I had a look at your CSS in the meantime, but that is really strange as well, perhaps as a result of the strange HTML. I would really urge you to read my tut, because the code can be much, much simpler. To set you up, here's the correct HTML list code for such a menu (= universal code):

 

<div id="navDiv">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Unit Converters</a>
            <ul>
                <li><a href="#">Length</a></li>
                <li><a href="#">Weight</a></li>
                <li><a href="#">Volume</a></li>
            </ul>
        </li>
        <li><a href="#">Calculators</a>
            <ul>
                <li><a href="#">Age Calculator</a></li>
            </ul>
        </li>
        <li><a href="#">Send Equation</a></li>
        <li><a href="#">FAQs</a></li>
        <li><a href="#">Contact Us</a></li>
    </ul>
</div>

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.