css menu

Discussion in 'CSS' started by demons-halo, May 6, 2011.

  1. #1
    right this is my html

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title></title>
    <link rel="stylesheet" href="menu_style.css" type="text/css" media="screen" />
    </head>
    <body>
    <br>
    <br>
    <center>
    <ul id="menu">
    <li><a href="#" title="" class="current">Home</a></li>
    <li><a href="#" title="">Products</a></li>
    <li><a href="#" title="">Contact</a></li>
    <li><a href="#" title="">Label 4</a></li>
    <li><a href="#" title="">Label 5</a></li>
    </ul>
    
    
    <ul id="enu">
    <li><a href="#" title="">Home</a></li>
    <li><a href="#" title="">Products</a></li>
    <li><a href="#" title="">Contact</a></li>
    <li><a href="#" title="">Label 4</a></li>
    <li><a href="#" title="">Label 5</a></li>
    </ul>
    
    </body>
    </html>
    
    HTML:
    and this is my css

    ul#menu { width: 60%; height: 43px; background: #FFF url("images/menu-bg.gif") top left repeat-x; font-size: 0.8em; font-family: "Lucida Grande", Verdana, sans-serif; font-weight: bold; list-style-type: none; margin: 0; padding: 0; }
    ul#menu li { display: block; float: left; margin: 0 0 0 0; }
    ul#menu li a { height: 43px; color: #777; text-decoration: none; display: block; float: left; line-height: 200%; padding: 8px 15px 0; }
    ul#menu li a:hover { color: #333; }
    ul#menu li a.current{ color: #FFF; background: #FFF url("images/current-bg.gif") top left repeat-x; padding: 0px 15px 0; }
    ul#enu { width: 60%; height: 25px; background: #FFF url("images/bottom2.gif") top left repeat-x; font-size: 0.8em; font-family: "Lucida Grande", Verdana, sans-serif; font-weight: bold; list-style-type: none; margin: 0; padding: 0; }
    ul#enu li { display: block; float: left; margin: 5px 0 0 0; }
    ul#enu li a { height: 0px; color: #FFF; text-decoration: none; display: block; float: left; padding: 0px 0px 10px 10px; }
    ul#enu li a:hover { color: #333; }
    
    HTML:

    can anyone help me, because my submenu links keep aligning to the right, no idea why...
     
    demons-halo, May 6, 2011 IP
  2. Cash Nebula

    Cash Nebula Peon

    Messages:
    1,197
    Likes Received:
    67
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Add overflow:hidden; to the menu list.
    That makes a container expand to contain the floated elements inside it.

    You can also fix it by reducing the height of the menu anchors. That seems to be keeping the lower ones from moving across.
     
    Last edited: May 6, 2011
    Cash Nebula, May 6, 2011 IP
  3. sburst

    sburst Peon

    Messages:
    39
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Get rid of the <center> dude.

    Here's my way of creating a dropdown CSS menu that works on all browsers (not ie6 ofc).

    Make container for menu, usually spanning the full width of your page.

    
    
    #menu {
    	background: #000033;
    	width: 980px;
    	height: 43px;
    	margin: 0px auto 0px;
    	padding: 0px 0px 0px 0px;
    	overflow: hidden;
    	float: left;
    	}
    
    
    Code (markup):
    Style the UL list:

    
    
    #nav {
    	font-size: 12px;
    	font-family: Arial, san-serif;
    	margin: 0px 0px 0px 0px;
    	padding: 0px 0px 0px 0px;
    	}
    
    #nav ul {
    	list-style: none;
    	margin: 0px;
    	padding: 0px;
    	}
    
    
    Code (markup):
    Now style the LI elements:

    	
    
    #nav li {
            float: left;
            list-style: none;
    	margin: 0px;
    	padding: 0px;
    	}
    
    #nav li a, #nav li a:link, #nav li a:visited {
            color: #ffffff;
    	display: block;
            font-weight: bold;
            text-decoration: none;
            margin: 0px 0px 0px 0px;
            padding: 13px 11px 14px 11px;
    	}
    
    
    
    #nav li a:hover, #nav li a:active {
        background: #0000cc;
    	color: #ffffff;
    	display: block;
        font-weight: bold;
        text-decoration: none;
        margin: 0px 0px 0px 0px;
    	padding: 13px 11px 14px 11px;
    	}
    
    
    Code (markup):
    Now it's the dropdowns turn:

    
    
    #nav li li a, #nav li li a:link, #nav li li a:visited {
    	background: #040436;
        color: #DDE2F0;
    	width: 150px;
    	float: none;
    	font-size: 10px;
    	text-transform: none;
    	margin: 0px 0px 0px 0px;
    	padding: 4px 10px 4px 10px;
    	text-decoration: none;
    	}
    
    #nav li li a:hover, #nav li li a:active {
    	color: #ffffff;
    	padding: 4px 10px 4px 10px;
    	text-decoration: underline;
    	}
    
    
    #nav li {
    	float: left;
    	padding: 0px;
    	}
    
    #nav li ul {
    	z-index: 9999;
    	position: absolute;
    	left: -999em;
    	height: auto;
    	width: 174px;
    	margin: 0px;
    	padding: 0px;		
    	}
    
    #nav li li { 
    	}
    
    #nav li ul a { 
    	width: 140px;
    	}
    
    #nav li ul a:hover, #nav li ul a:active { 
    	}
    
    #nav li ul ul {
    	width: 174px;
    	margin: -24px 0 0 167px;
    	}
    
    #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
    	left: -999em;
    	}
    
    
    #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
    	left: auto;
    	}
    
    #nav li:hover, #nav li.sfhover { 
    	position: static;
    
    	}
    
    
    Code (markup):
    The HTML:

    Just make a standard list like:

    <div id="menu">
       <ul id="nav">
         <li><a href="#">Menu Item</a></li>
         <li><a href="#">Menu Item</a></li>
         <li><a href="#">Menu Item</a></li>
         <li><a href="#">Menu Item</a>
            <ul>
               <li><a href="#">Menu Item</a></li>
               <li><a href="#">Menu Item</a></li>
               <li><a href="#">Menu Item</a></li>
            </ul>
          </li>
          <li><a href="#">Menu Item</a></li>
          <li><a href="#">Menu Item</a></li>
          <li><a href="#">Menu Item</a></li>
       </ul>
    </div>
    Code (markup):
     
    sburst, May 11, 2011 IP
  4. demons-halo

    demons-halo Active Member

    Messages:
    243
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    55
    #4
    lmao!! i didnt even notice the <center>!!

    cheers for the menu script! amazing
     
    demons-halo, May 11, 2011 IP
  5. sburst

    sburst Peon

    Messages:
    39
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Your very welcome, I hope you managed to make something from it :)
     
    sburst, May 11, 2011 IP