Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 1 of 1
  1. #1
    Junior Member
    Join Date
    Mar 2014
    Posts
    1
    Member #
    38817

    NavMenu help please!

    So I was following a tutorial on creating a drop down nav menu that sits horizontal with hover affects from and I NEED HELP!!!! my dropdown link items want to be horizontal in stead of in a column. the only vertical column organized link items is under the product to the furthest right because it runs out of screen to sit horizontal. How do I get it so instead of
    "link item" "link item" link item"

    i get

    "link item"
    "link item"
    "link item"

    here is my html and my css.
    HTML

    <div id="wrapper">
    <div id="navMenu">

    <ul>
    <li><a href="#">Events</a>
    <ul>
    <li><a href="#">Link Item</a></li>
    <li><a href="#">Link Item</a></li>
    <li><a href="#">Link Item</a></li>
    <li><a href="#">Link Item</a></li>
    <li><a href="#">Link Item</a></li>
    <li><a href="#">Link Item</a></li>


    </ul> <!-- end inner Ul -->

    </li> <!-- end main LI -->
    </ul> <!-- end main UL -->
    </div>
    </div>

    CSS

    @charset"utf-8";


    #navMenu {
    margin: 10px;
    padding: 0;
    }

    #navMenu ul {
    margin:0;
    padding:0;
    line-height:30px;
    }

    #navMenu li {
    margin: 0;
    padding: 0;
    list-style: none;
    float: left;
    postion: relative;
    background: #000;
    }

    #navMenu ul li a {
    text-align:center;
    font-family:"Comic Sans MS", cursive;
    text-decoration:none;
    height:30px;
    width:125px;
    display:block;
    color:#FFF;
    border:1px solid #FFF;
    text-shadow: 1px 1px 1px #000;

    }

    #navMenu ul ul {
    position: absolute;
    visibility: hidden;
    top: 290px;
    }

    #navMenu ul li:hover ul {
    visibility:visible;

    }

    /**********************************/


    #navMenu li:hover {
    background-color:#F63;
    }


    #navMenu ul li:hover ul li a:hover {
    background:CCC;
    Color:#000;
    }

    #navMenu a:hover {
    color:#000;
    }

    .clearFloat {
    clear:both;
    margin:0;
    padding:0;
    }

  2.  


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 10:41 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com