www.webdeveloper.com
Results 1 to 2 of 2

Thread: Menu Bar in HTML

  1. #1
    Join Date
    Feb 2013
    Posts
    5

    Menu Bar in HTML

    Hello All,

    I have the following code for my menu bar:

    <style>
    #nav ul {padding: 0; margin:;0; list-style-type:none;}
    #nav li {display: inline;}
    #nav li a {font-family: Arial;font-size:15px;text-decoration: none;float:left;padding: 12px;background-color: #FFFFFF;color: #0038A8; border-bottom:0px solid #000;}
    #nav li a:hover {background-color: #BFCDE9; color: #FFFFFF; padding-bottom:12px; border-bottom:0px solid #000; margin:-1px;}
    </style>


    And call it:

    <div id="main-nav">
    <ul id="nav" style="clear:both;">
    <li><a href="#">Home</a></li>
    <li><a href="#">Access ot Information</a></li>
    <li><a href="#">Contact Us</a></li>
    </ul>


    I would like to do something like when sitting the mouse in top of the "Access to Information" tab others tab would show below horizontally not vertically.

    Any idea how?

    Thanks

  2. #2
    Join Date
    Nov 2006
    Location
    Oakland
    Posts
    500
    Are those tabs showing up below subsection of the parent <li>?

    <style>
    #nav ul {padding: 0; margin:;0; list-style-type:none;}
    #nav li {float:left; clear:none; margin:0; padding:0;}
    #nav li a {display:block;font-family: Arial;font-size:15px;text-decoration: none;padding: 12px;background-color: #FFFFFF;color: #0038A8; border-bottom:0px solid #000;}
    #nav li a:hover {background-color: #BFCDE9; color: #FFFFFF; padding-bottom:12px; border-bottom:0px solid #000; margin:-1px;}
    #nav li ul{
    display:none;
    }

    #nav li:hover ul{
    display:block;
    }

    </style>


    And call it:

    <div id="main-nav">
    <ul id="nav" style="clear:both;">
    <li><a href="#">Home</a></li>
    <li><a href="#">Access ot Information</a>
    <ul>
    <li><a href="#">Sub Tab 1</a></li>
    <li><a href="#">Sub Tab 2</a></li>
    <li><a href="#">Sub Tab 3</a></li>
    <li><a href="#">Sub Tab 4</a></li>
    </ul>
    </li>
    <li><a href="#">Contact Us</a></li>
    </ul>

    You can customize the look-and-feel as well as the positioning of the sub tabs with CSS styles.

Thread Information

Users Browsing this Thread

There are currently 2 users browsing this thread. (0 members and 2 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles