Results 1 to 9 of 9

Thread: I just want a sub-menu...

  1. #1
    Join Date
    Apr 2014
    Posts
    16
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default I just want a sub-menu...

    I don't know why this code is giving me so many problems. It's like I change one thing and EVERYTHING stops working. Ugh. Okay, so I gave up on the slider but I want sub-navigation menus on my nav bar without losing the styling of the existing navigation menu.

    Here's my style sheet:
    Code:
    /* Global properties ======================================================== */
    html, body {width:100%; padding:0; margin:0;}
    body {font:14px/25px Arial,Helvetica,sans-serif;color:#939393;min-width:1264px;background:#131313}
    .ic {border:0;float:right;background:#fff;color:#f00;width:50%;line-height:10px;font-size:10px;margin:-220% 0 0 0;overflow:hidden;padding:0}
    .main {width:100%; background:#272727;}
    /***********************************************************************/
    a {text-decoration:none; cursor:pointer;}
    a:hover {text-decoration:none;}
    a.button {background:#2098f5; font-size:20px; line-height:24px; color:#fff; display:inline-block; padding:5px 23px 5px 23px; }
    a.button:hover {background:#131313; }
    a.link {text-decoration:none; cursor:pointer; color:#2098f5; }
    a.link:hover {text-decoration:underline;}
    .color-1 { color:#fff;}
    a.color-1:hover {text-decoration:underline;}
    .font-3 {font-size:17px; line-height:33px; color:#292929;}
    h2 { font-size:36px; line-height:45px; color:#fff; font-weight:normal; letter-spacing:-1px;}
    h3 { font-size:24px; line-height:30px; color:#fff; font-weight:normal; }
    ul {margin:0; padding:0;list-style-image:none;}
    ul.list-1 li {padding:0px 0 0px 11px; line-height:25px; background:url(../images/marker.gif) 0 10px no-repeat;}
    ul.list-1 li a { font-size:14px; color:#fff; line-height:25px;}
    ul.list-1 li a:hover {color:#2098f5;}
    /******************************************************************/
    .clear {clear:both; line-height:0; font-size:0; width:100%;}
    .wrapper {width:100%; overflow:hidden; position:relative}
    .wrap {overflow:hidden; position:relative}
    .extra-wrap {overflow:hidden;}
    .fleft {float:left;}
    .fright {float:right;}
    .img-indent {float:left; margin:3px 30px 17px 0;}	
    .last {margin-right:0px !important;}
    .img-radius {border-radius:4px;}
    
    .top-1 {margin-top:37px;}
    .top-2 {margin-top:29px;}
    .top-3 {margin-top:21px;}
    .top-4 {margin-top:31px;}
    .top-5 {margin-top:12px;}
    
    .left-1 {padding-left:30px;}
    
    .bot-0 {padding-bottom:0 !important; margin-bottom:0 !important;}
    .bot-1 {margin-bottom:39px;}
    .bot-2 {margin-bottom:29px;}
    
    .pad-1 {margin:13px 0px 12px 0px;}
    
    .p1 {padding-bottom:25px;}
    .p2 {padding-bottom:15px;}
    .p3 {padding-bottom:12px;}
    .p4 {padding-bottom:20px;}
    .p5 {padding-bottom:23px;}
    .p6 {padding-bottom:8px;}
    
    
    /*********************************header*************************************/
    header {width:100%; z-index:101; }
    header>div {width:1264px; margin:0 auto; position:relative; }
    
    h1 {position:absolute; left:132px; top:0px; display:inline-block; z-index:100;}
    
    .social-icons {overflow:hidden; text-align:right; padding:17px 162px 13px 0 }
    .social-icons span {display:inline-block; font-size:24px; line-height:28px; color:#fff; margin:-1px 20px 0 0; letter-spacing:-1px;}
    .social-icons a {display:inline-block; width:23px; height:23px; float:right;}
    .icon-1 {background:url(../images/icon-1.png) 0 0 no-repeat;}
    .icon-2 {background:url(../images/icon-2.png) 0 0 no-repeat; margin-left:7px;}
    .icon-3 {background:url(../images/icon-3.png) 0 0 no-repeat; margin-left:7px;}
    .social-icons a:hover {background-color:#1e93f4;}
    
    nav {position:absolute; left:132px; bottom:0; z-index:100; background:url(../images/nav-bg.png) 0 0 repeat;}
    ul.menu {margin:0 29px 0 30px;}
    ul.menu li {float:left; line-height:35px; margin:0px 0 0px 0px; background:transparent;}
    ul.menu li a {font-size:28px; line-height:35px; color:#fff; display:block; padding: 17px 33px 18px 33px; }
    ul.menu li:hover, ul.menu li.current {background:#2098f5;}
    /*********************************content*************************************/
    #content {width:960px; margin:0 auto; padding-bottom:78px;}
    
    .line-1 {background:url(../images/line.png) 0 bottom repeat-x; padding-bottom:29px; margin-bottom:24px;}
    .img-border {border:#fff 4px solid;}
    
    .block-1>div {float:left; width:180px; margin-right:40px;}
    .block-1>div h3 {margin:14px 0 4px 0;}
    .block-1>div a.button {margin:18px 0 0px 0;}
    
    .form-1 {}
    .form-1 label {font:14px/25px Arial, Helvetica, sans-serif; color:#939393; padding-bottom:5px; }
    .form-1 input {overflow-x:visible; font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#535353; background:#131313; padding:8px 10px 9px 15px;outline: medium none; width: 245px; float:left; margin-bottom:12px;}
    .select-1 {width:290px; margin-bottom:12px; overflow-x:visible;}
    .form-1 .select-2 {width:128px; margin-right:14px; float:left;}
    .form-1>a.button {margin-top:30px; padding-left:36px; padding-right:37px;}
    
    .lists {overflow:hidden;}
    .lists ul {float:left; margin-right:15px; width:120px;}
    .lists-2 {margin:23px 0 23px 0; overflow:hidden;}
    .lists-2 ul {float:left; margin-right:40px; width:180px;}
    
    .block-2>a {float:left; margin-right:20px; display:inline-block;}
    
    /****************************footer************************/
    footer { width:100%; position:relative; overflow:hidden; text-align:center; padding:32px 0 45px 0; background:#131313;}
    footer p, footer a {color:#939393;}
    footer a:hover {text-decoration:underline;}
    Here's the navigation section of the body:
    Code:
    <header>
        <div>
            <h1><a href="http://apriljoanne.myitworks.com/shop/"><img src="images/logo.jpg" alt=""></a></h1>
            <div class="social-icons">
            	<span>Follow Us:</span>
                <a href="#" class="icon-3"></a>
                <a href="#" class="icon-2"></a>
                <a href="#" class="icon-1"></a>
            </div>
            <div id="slide">		
                <div class="slider">
                    <ul class="items">
                        <li><img src="images/slider-1.jpg" alt="" /></li>
                        <li><img src="images/slider-2.jpg" alt="" /></li>
                        <li><img src="images/slider-3.jpg" alt="" /></li>
                    </ul>
                </div>	
                <a href="#" class="prev"></a><a href="#" class="next"></a>
            </div>
            <nav>
                <ul class="menu">
                    <li class="current"><a href="index.html">Home</a></li>
                    <li><a href="about.html">About</a></li>
                    <li><a href="https://apriljoanne.myitworks.com/join/" target="_blank">Join</a></li>
                    <li><a href="http://apriljoanne.myitworks.com/shop/" target="_blank">Products</a></li>
    <ul><li><a href="index.html">Skinny Wraps</a></li>
    <li><a href="test">Hair Skin & Nails</a></li>
    </ul>			
    <li><a href="about.html#whywrap">Why Wrap?</a></li>
                    <li><a href="contact.html">Contact</a></li>
                </ul>
            </nav>
    </div></header>
    A live version can be seen at aprilwraps.com/test
    As you can see in the code the skinny wraps and hair skin and nails are what I want as sub-menus but as you can see on the live version it doesn't work. What is the simplest way to update this? I tried adding the display block to the ul.menu:hover but it didn't work. I didn't write the style sheet code, so maybe I didn't type it in right... I don't know. Please help!

  2. #2
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    687
    Thanks
    1
    Thanked 113 Times in 111 Posts

    Default

    Hi there apriljoanne,

    try it like this...
    Code:
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
    
    <meta charset="utf-8">
    
    <title>untitled document</title>
    
    <style>
    body {
        font:14px/25px Arial,Helvetica,sans-serif;
        color:#939393;
        min-width:1264px;
        background:#131313
     }
    ul.menu {
        margin:0 29px 0 30px;
        padding:0;
        list-style-type:none;
     }
    ul.menu li {
        float:left; 
        line-height:35px; 
        margin:0px 0 0px 0px; 
        background:transparent;
     }
    ul.menu ul {
        position:absolute;
        padding:0;
        margin:0;
        list-style-type:none;
        display:none;
     }
    ul.menu ul li {
        float:none;
     }
    ul.menu li a {
        font-size:28px; 
        line-height:35px; 
        color:#fff; 
        display:block; 
        padding: 17px 33px 18px 33px; 
        text-decoration:none;
     }
    ul.menu li:hover, ul.menu li.current {
        background:#2098f5;
     }
    ul.menu li:hover ul {
        display:block;
     }
    </style>
    
    </head>
    <body>
    
    
    <ul class="menu">
     <li class="current"><a href="index.html">Home</a></li>
     <li><a href="about.html">About</a></li>
     <li><a href="https://apriljoanne.myitworks.com/join/" target="_blank">Join</a></li>
     <li><a href="http://apriljoanne.myitworks.com/shop/" target="_blank">Products</a>
      <ul class="sub-menu">
       <li><a href="index.html">Skinny Wraps</a></li>
       <li><a href="test">Hair Skin & Nails</a></li>
      </ul></li>			
     <li><a href="about.html#whywrap">Why Wrap?</a></li>
     <li><a href="contact.html">Contact</a></li>
    </ul>
    
    
    </body>
    </html>

    coothead

  3. #3
    Join Date
    Apr 2014
    Posts
    16
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default

    Darn, it didn't work. I tried putting it in the style sheet first, then I also tried putting it in the <head> section like you typed. I even took out the other styling around it. I'm stumped.

  4. #4
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    687
    Thanks
    1
    Thanked 113 Times in 111 Posts

    Default

    Hi there apriljoanne,

    you must replace your code that you have between the "nav tags" with mine...
    Code:
    
    <ul class="menu">
     <li class="current"><a href="index.html">Home</a></li>
     <li><a href="about.html">About</a></li>
     <li><a href="https://apriljoanne.myitworks.com/join/" target="_blank">Join</a></li>
     <li><a href="http://apriljoanne.myitworks.com/shop/" target="_blank">Products</a>
      <ul class="sub-menu">
       <li><a href="index.html">Skinny Wraps</a></li>
       <li><a href="test">Hair Skin & Nails</a></li>
      </ul></li>			
     <li><a href="about.html#whywrap">Why Wrap?</a></li>
     <li><a href="contact.html">Contact</a></li>
    </ul>

    coothead

  5. #5
    Join Date
    Apr 2014
    Posts
    16
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default

    Thanks for your help. So now the positioning is right, but it's not a link and if I try to click it it goes away.

  6. #6
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    687
    Thanks
    1
    Thanked 113 Times in 111 Posts

    Default

    Hi there apriljoanne,

    I brief look at you page suggests the need for the "z-index attribute.

    try this amendment...
    Code:
    
    ul.menu ul {
        position:absolute;
        z-index:1;
        padding:0;
        margin:0;
        list-style-type:none;
        display:none;
     }

    coothead

  7. The Following User Says Thank You to coothead For This Useful Post:

    apriljoanne (04-14-2014)

  8. #7
    Join Date
    Apr 2014
    Posts
    16
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default

    So now I'm trying to edit the text for the sub-menu. I want the font smaller and the box smaller as well. I tried adding a ul.submenu but the styling didn't stick. Any suggestions?

  9. #8
    Join Date
    Apr 2014
    Posts
    16
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default

    Nevermind! Figured soemthing out on my own this time haha Thanks for the help

  10. #9
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    687
    Thanks
    1
    Thanked 113 Times in 111 Posts

    Default


    No problem, you're very welcome.

    coothead

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
  •