Results 1 to 8 of 8

Thread: CSS horizontal drop down menu

  1. #1
    Join Date
    Jun 2012
    Posts
    33
    Thanks
    16
    Thanked 0 Times in 0 Posts

    Red face CSS horizontal drop down menu

    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:	154 
Size:	1.6 KB 
ID:	5177


    Thank You.

  2. #2
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    690
    Thanks
    1
    Thanked 113 Times in 111 Posts

    Default

    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

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

    gemzilla (08-07-2013)

  4. #3
    Join Date
    Jun 2012
    Posts
    33
    Thanks
    16
    Thanked 0 Times in 0 Posts

    Default

    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!

  5. #4
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,998
    Thanks
    16
    Thanked 315 Times in 313 Posts
    Blog Entries
    12

    Default

    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.
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

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

    gemzilla (08-07-2013)

  7. #5
    Join Date
    Jun 2012
    Posts
    33
    Thanks
    16
    Thanked 0 Times in 0 Posts

    Default

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

  8. #6
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    690
    Thanks
    1
    Thanked 113 Times in 111 Posts

    Default

    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

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

    gemzilla (08-07-2013)

  10. #7
    Join Date
    Jun 2012
    Posts
    33
    Thanks
    16
    Thanked 0 Times in 0 Posts

    Default

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

    Gemzilla

  11. #8
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    690
    Thanks
    1
    Thanked 113 Times in 111 Posts

    Default


    No problem, you're very welcome.


    coothead

Similar Threads

  1. Centering Horizontal Drop Down Menu Help
    By kbanta11 in forum CSS
    Replies: 0
    Last Post: 04-26-2011, 12:39 PM
  2. Horizontal drop down menu
    By madhavaram123 in forum CSS
    Replies: 3
    Last Post: 08-05-2009, 04:41 PM
  3. Replies: 21
    Last Post: 01-26-2009, 01:17 AM
  4. Replies: 2
    Last Post: 04-10-2008, 06:54 PM
  5. Horizontal CSS/dhtml menu with drop down?
    By acctman in forum Looking for such a script or service
    Replies: 2
    Last Post: 04-09-2007, 03:32 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •