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,219
    Mentioned
    457 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>


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
  •