CSS horizontal drop down menu

**gemzilla** · 08-05-2013, 02:13 PM

Hello,

I am trying to create a navigation bar with one of the buttons having a drop down menu when you hover over it. When I preview it in explorer it only shows part of the drop down and a I preview it in other browsers or live view in any browser I get nothing. Am I missing something? below is the CSS, HTML and the image that I am using.

CSS:

Code:

/* CSS Document */

#menu ul {
	margin:0;
	padding:0;
	height:50px;
	width:1000px;
}

#menu ul li
{
	background-image:url(../Images/menu.fw.png);
	margin:0;
	padding:0;
	list-style-type:none;
	display:inline;
	height:50px;
	width:200px;
	text-align:center;
	float:left;
	line-height:45px;
}

#menu ul ul {
	display:none;
}

#menu ul li:hover > ul {
	display:inline;
	height:210px;
}

#menu ul li ul {
	margin-left:10px;
	width:180px;
	height:210px;
	margin:0;
	padding:0;
	list-style-type:none;
	text-align:center;
	float:left;
	line-height:30px;
}

#menu ul li ul li {
	height:30px;
	width:180px;
	margin-left:10px;
}

#menu ul li ul li, #menu ul li ul li a  {
	background:#CCC;
	color:#000;
	border:#000;
	font-size:14px; 
}

#menu ul li ul li a:hover  {
	background:#999;
	color:#000;
	border:#000 thin;
	font-size:14px; 
}


#menu ul li a
{
	display:block;
	height:50px;
	cursor:pointer;
	font:Arial, Helvetica, sans-serif;
	font-size:16px;
	text-decoration:none;
	color:#000;
	font-weight:bold;
}

#menu ul li a:hover
{
	color:#17477B;
}

HTML

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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<link rel="stylesheet" type="text/css" href="CSS/style.css"/>
<link rel="stylesheet" type="text/css" href="CSS/menu.css"/>

</head>

<body>



<div id="banner">
  
  <div id="logo"><img src="Images/Logo.fw.png" width="700" height="300" /></div>
  
  <div id="menu">
  	<ul>
    	<li><a href="index.html">Home</a></li>
        <li><a href="about.html">About Us</a></li>
        <li><a href="services.html">Services</a></li>
        	<ul>
            	<li><a href="phone.html">Telephone Systems</a></li>
                <li><a href="computers.html">Computers</a></li>
                <li><a href="broadband.html">Lines Calls Broadband</a></li>
                <li><a href="website.html">Website and Email</a></li>
                <li><a href="security.html">Security systems</a></li>
                <li><a href="software.html">Software</a></li>
                <li><a href="client.html">Client Access</a></li>
            </ul>
        <li><a href="shop.html">Online Shop</a></li>
        <li><a href="contact.html">Contact Us</a></li>
    </ul>
  </div>
  
</div>



<div id="content">

	<div id="main"></div>
    
    <div id="footer"></div>

</div>

</body>
</html>

Button image:

Click image for larger version.

Name: menu.fw.jpg
Views: 271
Size: 1.6 KB
ID: 5177

Thank You.

**coothead** · 08-05-2013, 05:51 PM

Hi there gemzilla,

I have highlighted the amendments to your HTML and CSS code in red...

Code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Untitled Document</title>

<link rel="stylesheet" type="text/css" href="CSS/style.css"/>
<link rel="stylesheet" type="text/css" href="CSS/menu.css"/>

<style type="text/css">
#menu ul {
	margin:0;
	padding:0;
	height:50px;
	width:1000px;
 }

#menu ul li {
        position:relative;
	background-image:url(../Images/menu.fw.png);
	margin:0;
	padding:0;
	list-style-type:none;
	display:inline;
	height:50px;
	width:200px;
	text-align:center;
	float:left;
	line-height:45px;
 }

#menu ul ul {
        position:absolute;
	display:none;
}

#menu ul li:hover > ul {
	/*display:inline;*/
        display:block;
	height:210px;
 }

#menu ul li ul {
	margin-left:10px;
	width:180px;
	height:210px;
	margin:0;
	padding:0;
	list-style-type:none;
	text-align:center;
	float:left;
	line-height:30px;
 }

#menu ul li ul li {
	height:30px;
	width:180px;
	margin-left:10px;
 }

#menu ul li ul li, #menu ul li ul li a {
	background:#CCC;
	color:#000;
	border:#000;
	font-size:14px; 
 }

#menu ul li ul li a:hover {
	background:#999;
	color:#000;
	border:#000 thin;
	font-size:14px; 
}


#menu ul li a {
	display:block;
	height:50px;
	cursor:pointer;
	font:Arial, Helvetica, sans-serif;
	font-size:16px;
	text-decoration:none;
	color:#000;
	font-weight:bold;
 }

#menu ul li a:hover {
	color:#17477B;
 }
</style>

</head>
<body>

<div id="banner">
  
<div id="logo"><img src="Images/Logo.fw.png" width="700" height="300"  alt="" /></div>
  
<div id="menu">
<ul>
 <li><a href="index.html">Home</a></li>
 <li><a href="about.html">About Us</a></li>
 <li><a href="services.html">Services</a><!--</li>-->
  <ul>
   <li><a href="phone.html">Telephone Systems</a></li>
   <li><a href="computers.html">Computers</a></li>
   <li><a href="broadband.html">Lines Calls Broadband</a></li>
   <li><a href="website.html">Website and Email</a></li>
   <li><a href="security.html">Security systems</a></li>
   <li><a href="software.html">Software</a></li>
   <li><a href="client.html">Client Access</a></li>
  </ul></li>
 <li><a href="shop.html">Online Shop</a></li>
 <li><a href="contact.html">Contact Us</a></li>
</ul>
</div>
  
</div>

<div id="content">
<div id="main"></div>
<div id="footer"></div>

</div>

</body>
</html>

You should only use a "transitional dtd" when your pages contains legacy code.
Instead use the "html4/strict.dtd" or the HTML5.

coothead

**gemzilla** · 08-07-2013, 10:53 AM

Hi

It is now showing, but now the style has gone funny.

The vertical alignment should be in the middle and the last link is bigger than the others. This is the link: http://www.kent-telephones.ismywebsite.co.uk/

Wonder if you know why it has done this.

Thank you for your help!

**Beverleyh** · 08-07-2013, 11:07 AM

Looks fine to me in IE10 and Chrome - button text is in the middle of the buttons and all text is the same size.

If I have misinterpreted, can you please provide more information - also say which browser does the problem present itself in and maybe with a screen cap of what you see.

**gemzilla** · 08-07-2013, 11:26 AM

I'm using both IE10 and Chrome, plus Firefox. I have done a screen shot below of what I see:

Click image for larger version.

Name: Untitled-1.fw.jpg
Views: 191
Size: 20.5 KB
ID: 5179

In the first shot the actual button size is bigger than the one in the second shot. Also in the second shot the text is at the bottom of the button, rather than in the middle. I have tried changing line height, but is has not made a difference.

Thank You

**coothead** · 08-07-2013, 11:44 AM

Hi there gemzilla,

try this amended code...

Code:


/* CSS Document */

#menu ul {
	margin:0;
	padding:0;
	height:50px;
	width:1000px;
	list-style-type:none;
 }

#menu ul li{
	position:relative;
	background-image:url(../Images/menu.fw.png);
	display:inline;
	height:50px;
	width:200px;
	text-align:center;
	float:left;
	line-height:45px;
 }

#menu ul ul {
	position:absolute;
	display:none;
 }

#menu ul li:hover > ul {
	display:block;
	
 }

#menu ul li ul {
        width:180px;
	margin-left:8px;
	text-align:center;
 }

#menu ul li ul li, #menu ul li ul li a  {
        width:180px;
	background:#FFF;
	color:#000;
	border:#000;
	font-size:14px;
	font-weight:normal; 
 }

#menu ul li ul li a:hover  {
	background:#1A4E7F;
	color:#73FFDC;
	border:#000 thin;
	font-size:14px; 
	font-weight:normal;
 }

#menu ul li a{
	display:block;
	height:50px;
	font:Arial, Helvetica, sans-serif;
	font-size:16px;
	text-decoration:none;
	color:#000;
	font-weight:bold;
 }

#menu ul li a:hover{
	color:#17477B;
 }

coothead

**gemzilla** · 08-07-2013, 12:39 PM

Thank you, worked a treat. I now see that I just put some styles in the wrong places.

Gemzilla

**coothead** · 08-07-2013, 12:54 PM

No problem, you're very welcome.

coothead

Thread: CSS horizontal drop down menu

Thread Tools

Search Thread

CSS horizontal drop down menu

The Following User Says Thank You to coothead For This Useful Post:

The Following User Says Thank You to Beverleyh For This Useful Post:

The Following User Says Thank You to coothead For This Useful Post:

Similar Threads

Centering Horizontal Drop Down Menu Help

Horizontal drop down menu

Got Horizontal drop down menu working...but

A css driven horizontal drop down menu help!

Horizontal CSS/dhtml menu with drop down?

Bookmarks

Bookmarks

Posting Permissions