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
    USB
    USB is offline
    New Coder
    Join Date
    Jan 2012
    Posts
    29
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Sub same start position and width as parent.

    Hi, Im trying to get the sub menu to appear right under the parent with the same width but I can't get it to work.

    http://46.28.203.245/index.php

    as you can see the sub menu starts some pixels at the right side.
    I want to get rid of the empty area. How can I do this?

    HTML
    Code:
    <div id="wrapper">
    
    <ul id="nav">
      <li><a href="#">Item 1</a>
        <ul id="sub">
          <li><a href="#">Sub-Item 1 a</a></li>
          <li><a href="#">Sub-Item 1 b</a></li>
          <li><a href="#">Sub-Item 1 c</a></li>
        </ul>
      </li>
      <li><a href="#">Item 2</a>
        <ul id="sub">
          <li><a href="#">Sub-Item 2 a</a></li>
          <li><a href="#">Sub-Item 2 b</a></li>
        </ul>
      </li>
      <li><a href="#">Item 3</a>
        <ul id="sub">
          <li><a href="#">Sub-Item 3 a</a></li>
          <li><a href="#">Sub-Item 3 b</a></li>
          <li><a href="#">Sub-Item 3 c</a></li>
          <li><a href="#">Sub-Item 3 d</a></li>
        </ul>
      </li>
      <li><a href="#">Item 4</a>
        <ul id="sub">
          <li><a href="#">Sub-Item 4 a</a></li>
          <li><a href="#">Sub-Item 4 b</a></li>
          <li><a href="#">Sub-Item 4 c</a></li>
        </ul>
      </li>
    </ul>
    </div>
    jQuery
    PHP Code:
    $(document).ready(function () {
      $(
    '#nav > li > a').click(function(){
        if ($(
    this).attr('class') != 'active'){
          $(
    '#nav li ul').slideUp();
          $(
    this).next().slideToggle();
          $(
    '#nav li a').removeClass('active');
          $(
    this).addClass('active');
        }
      });
    }); 
    CSS
    Code:
    #wrapper {
    	
    }
    
    #nav {
        float: left;
        width: 280px;
    	font-family: Myriad Pro;
    	list-style-type: none;
    }
    #sub {
    	list-style-type: none;
    }
    #nav li a {
        display: block;
        padding: 10px 15px;
        background: #157BE8;
        border-top: 1px solid #fff;
        text-decoration: none;
        color: #000;
    }
    #nav li a:hover, #nav li a.active {
        background: #157BE8;
        color: #fff;
    }
    #nav li ul {
        display: none; // used to hide sub-menus
    	position:relative;
    }
    #nav li ul li a {
        padding: 10px 25px;
        background: #157BE8;
    }

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    That's coming from the default padding/margin applied to a ul element.
    Have a try with:

    Code:
    #sub {
        list-style-type: none;
        margin-left: 0;
        padding-left: 0;
    }
    Use the W3C HTML Validator and CSS Validator to check your code and Firebug to see what css is applied to an element
    Read Steve Krug's book Don't Make Me Think - essential reading on web usability
    I don't recommend much, but I do recommend Clook for UK web hosting

  • Users who have thanked SB65 for this post:

    USB (06-27-2013)

  • #3
    USB
    USB is offline
    New Coder
    Join Date
    Jan 2012
    Posts
    29
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Works prefectly! thanks alot.


  •  

    Posting Permissions

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