SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2004
    Location
    Albany, N.Y.
    Posts
    67
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    indent sub list in navigation

    I created a navigation from css that has sub menus.

    http://nucitytech.com/test/

    The problem I'm having is that when I click on one of the main links called Group# that shows the sub menu the sub list are the same size as the main links. I want to style the sub list that have a class name of "show" indented from the main list and smaller font. I was able to get a smaller from but not the indent. Any ideas, thanks



    Code:
    body {font-family: Verdana, Arial, Helvetica, sans-serif;}
    
    
    h1 {font-size: 24px;}
    .cat 
    {
    font-size: 14px; 
    margin: .2em 0; 
    color: #0d2474;
    font-weight: bold;
    text-align: left;
    }
    
    .nav {font-size: 12px; font-weight:bold;}
    a:link, a:visited, a img {text-decoration: none; border: none;} 
    ul {list-style:none; margin: 0 0;}
    
    
    .nav li a:hover {color: red;}
    .nav li a
    {
    height: 2em;
    line-height: 2em;
    width: 10em;
    display: block;
    border: 0.1em solid #dcdce9;
    color: #0d2474;
    text-align: center;
    }
    
    .show {display:inline; margin: 0 0; padding: 0 0;}
    .hide {display:none;}

  2. #2
    SitePoint Enthusiast
    Join Date
    Jul 2004
    Location
    Albany, N.Y.
    Posts
    67
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I got it to work by making the following change ".show { position: relative; margin-left: 10px; padding: 0 0;}". I have another issue I'm trying to make the list heading "list one" the same size as the main navigation links which is 10em.

    When I look at it in IE the <li class="cat"></li> that is the heading span the whole length of the <TD> element that's it's enclosed in. I tried putting width: 10em; in the class cat but that didn't work. I'm a little lost as to why that is not working and what is controling it's width. Any ideas would be helpful.

    Thanks

    new code

    Code:
    h1 {font-size: 24px;}
    .cat 
    {
    font-size: 14px; 
    margin: .2em 0; 
    color: #FFFFFF;
    font-weight: bold;
    background-color: blue;
    }
    
    .nav {font-size: 12px; font-weight:bold;}
    a:link, a:visited, a img {text-decoration: none; border: none;} 
    ul {list-style:none; margin: 0 0;}
    
    
    .nav li a:hover {color: red;}
    .nav li a
    {
    height: 2em;
    line-height: 2em;
    width: 10em;
    display: block;
    border: 0.1em solid #dcdce9;
    color: #0d2474;
    }
    
    .show { position: relative; margin-left: 10px; padding: 0 0;}
    .show li a{text-align: left; border: none;}
    .hide {display:none;}
    .group {text-align: left;}


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
  •