SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Horizontal navigation bar with horizontal sub menu's "onhover"

    HI all, I am trouble trying to build a horizontal navigation bar the will have sub menu's that will appear underneath and across the second row horizontally when "onhover'ing" over the main menu item, the sub menu will remain available to click on, I am using an unordered list from a hodgepodge of tutorials, and I have made a pig's breakfast of it.

    CSS

    .navigation ul {
    margin:0px;
    padding:0px;
    }
    .navigation li {
    display:inline;
    height:30px;
    list-style:none;
    margin-left:15px;
    margin-right:15px;
    }
    .navigation li a {
    text-decoration:none;
    }
    .navigation li a:hover {
    text-decoration:underline;
    }
    .navigation li ul {
    margin:0px;
    padding:0px;
    display:none;
    display:inline-block;
    height:30px;
    float:left;
    list-style:none;
    margin-left:15px;
    position:relative;
    }
    .navigation li:hover ul
    {
    display:block;
    width:160px;
    }
    .navigation li li {
    list-style:none;
    display:list-item;
    }

    HTML

    <div class="navigation"><ul>
    <li><a href="index.html">menu1</a>
    <ul>
    <li>sub menu item 1</li>
    <li>sub menu item 2</li>
    <li>sub menu item 3</li>
    <li>sub menu item 4</li>
    </ul>
    </li>

    <li><a href="menu2.html">menu2</a>
    <ul>
    <li>sub menu item 1</li>
    <li>sub menu item 2</li>
    <li>sub menu item 3</li>
    <li>sub menu item 4</li>
    </ul>
    </li>

    <li><a href="menu3.html">menu3</a>
    <ul>
    <li>sub menu item 1</li>
    <li>sub menu item 2</li>
    <li>sub menu item 3</li>
    <li>sub menu item 4</li>
    </ul>
    </li>

    <li><a href="menu3.html">menu3</a>
    <ul>
    <li>sub menu item 1</li>
    <li>sub menu item 2</li>
    <li>sub menu item 3</li>
    <li>sub menu item 4</li>
    </ul>
    </li>

    <li><a href="menu4.html">menu4</a>

    <ul>
    <li>sub menu item 1</li>
    <li>sub menu item 2</li>
    <li>sub menu item 3</li>
    <li>sub menu item 4</li>
    </ul>
    </li></ul></div>

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,114
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Try something more like this:

    Code:
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
    
    <meta charset="utf-8">
    
    <title>Experiment</title>
    	
    <style media="all">
    .navigation ul {
    margin:0px;
    padding:0px;
    list-style: none;
    }
    .navigation li {
    float: left;
    height:30px;
    margin-left:15px;
    margin-right:15px;
    position: relative;
    }
    .navigation li a {
    text-decoration:none;
    }
    .navigation li a:hover {
    text-decoration:underline;
    }
    .navigation li ul {
    margin:0px;
    padding:0px;
    position: absolute;
    left: -9999px;
    height:30px;
    }
    .navigation li:hover ul
    {
    left: 0;
    width:160px;
    }
    
    </style>
    	
    </head>
    
    <body>
    
    
    <div class="navigation"><ul>
    <li><a href="index.html">menu1</a>
    <ul>
    <li>sub menu item 1</li>
    <li>sub menu item 2</li>
    <li>sub menu item 3</li>
    <li>sub menu item 4</li>
    </ul>
    </li>
    
    <li><a href="menu2.html">menu2</a>
    <ul>
    <li>sub menu item 1</li>
    <li>sub menu item 2</li>
    <li>sub menu item 3</li>
    <li>sub menu item 4</li>
    </ul>
    </li>
    
    <li><a href="menu3.html">menu3</a>
    <ul>
    <li>sub menu item 1</li>
    <li>sub menu item 2</li>
    <li>sub menu item 3</li>
    <li>sub menu item 4</li>
    </ul>
    </li>
    
    <li><a href="menu3.html">menu3</a>
    <ul>
    <li>sub menu item 1</li>
    <li>sub menu item 2</li>
    <li>sub menu item 3</li>
    <li>sub menu item 4</li>
    </ul>
    </li>
    
    <li><a href="menu4.html">menu4</a>
    
    <ul>
    <li>sub menu item 1</li>
    <li>sub menu item 2</li>
    <li>sub menu item 3</li>
    <li>sub menu item 4</li>
    </ul>
    </li></ul></div> 
    
    
    </body>
    
    </html>
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."


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
  •