Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Vertical Navigation Menu Problem

    Hey everyone if someone could help me out, having some problems with a basic nav bar.

    http://prntscr.com/jk4qm (basic nav bar looks like)
    http://prntscr.com/jk4te (sub menu)

    what it should start looking like however when i resize the browser the submenu moves around.
    when i tried to make it display block, it appear underneath it but blocks the rest of the menu and there was 1 other thing i tried but it makes it so when you hover over the menu a large empty space appears under the "other services" ul

    Thanks for the Help its greatly appreciated.

    my html is this:

    <nav>
    <ul>
    <li style="cursor: pointer;" onclick="document.location.href='index.html';">HOME</li>
    <li style="cursor: pointer;" onclick="document.location.href='aboutus.html';">ABOUT US</li>
    <li style="cursor: pointer;" onclick="document.location.href='courses.html';">COURSES</li>
    <li>OTHER SERVICES
    <ul id="dropdown">
    <li style="cursor: pointer;" onclick="document.location.href='courses.html';">AGENCY</li>
    <li style="cursor: pointer;" onclick="document.location.href='courses.html';">MAKEUP MECCA</li>
    </ul>
    </li>
    <li style="cursor: pointer;" onclick="document.location.href='gallery.html';">GALLERY</li>
    <li style="cursor: pointer;" onclick="document.location.href='faq.html';">FAQ</li>
    <li style="cursor: pointer;" onclick="document.location.href='contactus.html';">CONTACT US</li>

    and the CSS is:



    * {
    margin: 0;
    }
    html, body {
    padding-top:15px;
    height: 100%;
    background-color:#000;
    }
    li, a{text-decoration:none; color:#FFF; font-family: "BebasNeue-webfont", Arial, Helvetica, sans-serif; font-size:24px;}
    ul{text-decoration:none; list-style:none;}
    nav li #dropdown{ position:absolute; left:27%}
    nav li #dropdown li{color:#FFF; min-width:150px;}
    nav li #dropdown li:hover{color:#F90;}
    nav li:hover{margin-right:0px;}
    a:hover{color:#F60;}
    nav li{
    background-color:#333;
    border-bottom:3px ridge #000;
    border-left:10px groove #FFF;
    padding:15px;
    margin-left:-40px;
    margin-top:1px;
    }
    nav li:hover{
    color: #ff9933;
    }
    nav ul ul {
    display: none;
    }

    nav ul li:hover > ul {
    display: block;
    }
    </ul>
    </nav>

    Tried several different ways this was the last one before i completely couldnt figure it out T__T

  • #2
    New to the CF scene
    Join Date
    Oct 2012
    Location
    USA
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Tell the url of website.

  • #3
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    dont have the website link yet, still building it. wont have the link till the domain is transferred from a previous host (which is a different website which is being scrapped for this new one)

    whats the normal way to make a nav menu like this?
    what parameters would normally be used?

    normal dropdowns are fairly easy its just these one that have a sub menu appear horizontal to the parent that seem to give me issues.


  •  

    Posting Permissions

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