Log in

View Full Version : 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:


/* 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


<!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: 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...


<!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:

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...


/* 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