SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Evangelist
    Join Date
    Apr 2007
    Posts
    398
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    ul and li problem

    Hi Guys,

    I have some CSS code for a menu

    HTML Code:
    ul#nav, ul#nav ul {
        font-weight:bold;
        font-family: arial, helvetica, sans-serif;
        font-size:12px;
    	margin: 0;
    	padding: 0;
    	list-style: none;
    	}
    
    ul#nav  li {
        z-index: 2;
    	position: relative;
    	float: left;
    	width:149px;
    }
    	
    #nav li ul {
    	position: absolute;
    	margin-left: -999em; /* hide menu from view */
    	top: auto;
    	left:0;
    }
    
    /* Styles for Menu Items */
    ul#nav  li a {
    	display: block;
    	text-decoration: none;
    	color: #666666;
    	background: #eeeeee; /* IE6 Bug */
    	padding: 6px;
    	border: 1px solid #eeeeee;
    	margin-bottom:-1px;
    	min-height:0;
    	}
    /* commented backslash mac hiding hack \*/ 
    * html ul#nav  li a {height:1%;	position:relative;}
    /* end hack */ 
    
    /* this sets all hovered lists to red */
    #nav li:hover a,#nav  li.over a,
    #nav li:hover li a:hover,#nav li.over li a:hover {
       color: #666666;
       background-color: #eeeeee;}
    
    /* set dropdown to default */
    #nav li:hover li a,#nav li.over li a {
       color: #333333;
       background-color: #dddddd;
    }
    #nav li ul li a { padding: 8px 5px; } /* Sub Menu Styles */
    #nav li:hover ul,#nav li.over ul {margin-left:0; } /* show menu*/
    Which works great, but then I have a div element called #article with a different set of list elements:

    HTML Code:
    #article ul, li {
      color: #666;
      font-weight: normal;
      list-style:none;
      line-height: 20px;
    }
    
    #article li {
      background: url(../images/little_arrow.gif) no-repeat 0 5px;
      padding-left: 10px;
    }
    However, they interfere with my top menu. Can anyone tell me where i'm going wrong as I just want them to be part of my #article div?

    Thanks

  2. #2
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by chris_stfc View Post
    HTML Code:
    #article ul, li {
      color: #666;
      font-weight: normal;
      list-style:none;
      line-height: 20px;
    }
    
    #article li {
      background: url(../images/little_arrow.gif) no-repeat 0 5px;
      padding-left: 10px;
    }
    I'm pretty sure your problem will be with this bit...

    Code:
    #article ul, li
    This style will be applied to all <ul>'s within #article but they'll also be applied to all <li>'s on the page regardless of where they are. You should just be able to combine the two to leave you with

    Code:
    #article li {
      color: #666;
      font-weight: normal;
      list-style:none;
      line-height: 20px;
      background: url(../images/little_arrow.gif) no-repeat 0 5px;
      padding-left: 10px;
    }


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
  •