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 4 of 4
  1. #1
    New Coder
    Join Date
    May 2007
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS dropdown menu - where to style lower level items?

    Hi all.

    Many thanks for your input into the queries I have posted before. I've worked out most things using various online tutorials, but I'm a bit stuck with the styling of the dropdown items in my menu.

    http://www.thunderin.co.uk/shaun/v3/

    I have a working (in FF) standards compliant horizontal menu. The items in the menu are styled. The basics of the dropdowns are in place, but they are using the same style as the top level items.

    I'm unsure of the syntax for styling these drop items. This is my menu CSS so far.

    1. Where do I put (and what is the syntax of) the second level styling This isn't right...

    Code:
    #ul_nav_toplevel li ul li		/*Second level menus List Item declarations.*/
    {
    	width: 200em;
    	color: #00ff00;
    }
    2. Can anyone take the time to say if I have any obvious design flaws I can learn about or just generally comment about it?


    Code:
    /***************************************************************
    These are declarations for the horizontal menu
    ***************************************************************/
    
    #ul_nav_toplevel,		/*For the UL which is the main menu*/
    #ul_nav_toplevel ul		/*For the UL's which are the second level menus*/
    { 
    	margin: 0; 
    	padding: 0; 
    	width: 750px; 
    	list-style-type: none;		/*ensures no bullets are shown in the menu list*/
    } 
    
    #ul_nav_toplevel li		/*LI's for the top level UL. Home, Links etc.*/
    {
    	float: left;		/*Keep em against the left of the page*/
    	padding: 0px; 
    	margin: 0;
    	width: 10em;		/*Must have a width here as it helps Opera, somehow*/
    }
    
    #ul_nav_toplevel li ul		/*Second level of menus stored in a second UL.*/
    {
    	position:absolute;
    	width: 10em;
    	color: #00ff00;
    	left:-999em;		/*Initial position is off page out of sight*/
    }
    
    #ul_nav_toplevel li:hover ul
    {
    	left: auto;		/*Brings second level menu into sight*/
    	padding-top: 7px;
    	top: 140px;
    }
    
    #ul_nav_toplevel li ul li		/*Second level menus List Item declarations.*/
    {
    	width: 200em;
    	color: #00ff00;
    }
    
    #ul_nav_toplevel a:link,
    #ul_nav_toplevel a:visited,
    #ul_nav_toplevel a:active
    {
    	display: block;
    	text-decoration: none;
    	font: bold 1.3em Arial;
    	color: #ffffff;
    	width: 100px;
    	height: 30px;
    	margin-right: 4px;
    	margin-top: 6px;
    	background-image:url(menubutton.gif);
    	background-repeat: no-repeat;
    	padding-top: 4px;
    	text-align:center;
    }
    
    #ul_nav_toplevel a:hover
    {
    	background-image: url("menubuttonhover.gif");
    	color: yellow;
    }
    
    /***************************************************************
    And this bit makes one item in the horizontal menu a 'sticky' one, showing the current page.
    ***************************************************************/
    /*How this works.
    AFTER the menu CSS above alows the normal menu actions, this CSS forces a particular menu item
    to have the styles below.
    
    Each page must have a unique id in it's body section.  <body id="unique name">
    
    As the CSS is parsed it looks at the following list.  IF the name of the body of the current page is
    found in the list then the "listitem a" is set to the style following.
    
    I think.*/
    
    #atsshome #lihome a,
    #courses #licourses a,
    #sales #lisales a,
    #dl #lidownloads a,
    #links #lilinks a,
    #contact #licontactus a,
    #staff #listaff
    {
    color: #66ff66;								/*bright green to indicate the current page.*/
    font: bold 1.3em Arial;
    }
    Thanks, again.
    --
    Newbie, learning.
    Regards from the UK.

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Read this article. I think it will help understand the menu better. http://alistapart.com/articles/dropdowns/
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    New Coder
    Join Date
    May 2007
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi.

    Quote Originally Posted by _Aerospace_Eng_ View Post
    Read this article. I think it will help understand the menu better. http://alistapart.com/articles/dropdowns/
    Thanks for this. It seems to be a rehash of this article...

    http://www.htmldog.com/articles/suckerfish/dropdowns/

    ...which I have already been reading. Or maybe its the other way round? Anyway, my problem is in understanding the syntax behind this sort of thing...

    If I wanted to apply a style to the list items in the third drop down list (Because I want the text in green and the font different in JUST this one UL, maybe), would I use...

    Code:
    #id ul li ul li ul li
    {
    Styleit
    }
    or

    Code:
    #id ul ul ul li
    {
    Styleit
    }
    Or what?

    Thanks.
    --
    Newbie, learning.
    Regards from the UK.

  • #4
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by Collywobbles View Post
    Code:
    #id ul li ul li ul li
    {
    Styleit
    }
    or
    Code:
    #id ul ul ul li
    {
    Styleit
    }
    They should both work for selecting level-3 list-items. Only difference is specificity. You have 1 id-attribute + 6 elements in your first selector, while in the second one you have 1 id-attribute + 4 elements in the selector. Styles specified using the first selector are given higher priority than styles specified by the second one no matter what sequence the selectors come in.

    But specificity is irrelevant if there are no conflicting styles. So just use the simplest one which is the second selector.


  •  

    Posting Permissions

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