#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2008
    Posts
    10
    Rep Power
    0

    Need to distinguish CSS Drop-Down menu lists from one another


    Hello all,

    I have a site up with a menu that I need to replace. Before I do this, i need a bit more control over the different lists that make up the drop down menus.

    My goal is to have a unique ID for each list, that allows me to change the width and the position relative to its parent, or trigger. I am not sure what the CSS rules would be to call out each particular list after it has been given a unique identifier.

    Please see the code below which provides 2 menu lists and what i feel is the related CSS Code. If this code is not all that is needed, please let me know and I can post more of it. Thanks in advance, i know its a simple thing, but after experimenting, i have not been able to get the results I need.

    Menu Code

    Code:
     <ul id="p7menubar">
                
        <li id="about"><a  class="trigger" href="../about/index.html">About Us</a>
        <ul>
        
            	<li><a href="../about/distinctions.html">Distinctions</a></li>
            	<li><a href="../about/whytmg.html">Why Choose The Monitor Group</a></li>
            	<li><a href="../about/corevalues.html">Mission + Core Values</a></li>
            	<li><a href="../about/qualifications.html">Unique Qualifications</a></li>
            	<li><a href="../about/ourclients.html">Our Clients</a></li>
            	<li><a href="../about/professionals.html">Our Professionals</a></li>
            	<li><a href="../about/faq.html">FAQ's</a></li>
            	<li><a href="../about/careers.html">Careers</a></li>
           		<li><a href="../about/contact.html">Contact</a></li></ul></li>
                
        <li id="services"><a class="trigger" href="../clientservices/index.html">Client Services</a>
        <ul>
          		<li><a href="../clientservices/IWMP.html">Integrative Wealth Management</a></li>
         		<li><a href="../clientservices/invplanning.html">Investment Management</a></li>
          		<li><a href="../clientservices/blueprint.html" >Personal Financial Blueprint</a></li>
           		<li><a href="../clientservices/estateplanning.html">Wealth Transfer + Estate Planning</a></li>
          		<li><a href="../clientservices/taxplanning.html">Wealth Enhancement, Tax Planning and Reporting</a></li>
           		<li><a href="../clientservices/protection.html">Wealth Protection</a></li>
           		<li><a href="../clientservices/philanthropy.html">Philanthropic Giving</a></li>
          		<li><a href="../clientservices/fees.html">Fee Schedule</a></li></ul></li>
    CSS Code:

    Code:
    /*Class assigned to those Root-Level links that have associated Sub-Menus. The top and bottom padding assigned this element must be the same as that assigned to the p7menubar a element. The right padding is increased
    to accomodate the display of background image depicting a downward pointing arrow.*/
    
    #p7menubar a.trigger {
    	padding: 5px 16px 5px 10px;
    	background-image: url(../p7_cssexpress/p7exp/images/p7PM_dark_south.gif);	background-repeat: no-repeat;
    	background-position: right center;	
    }
    
    
    /*The Root-Level list items. Floating left allows
    them to appear horizontally. Width is for IE5 Mac. The last rule in this style sheet will set the width for this element to auto for all other browsers - hiding it from IE5 Mac. The width is proportional.As you add and edit root menu items, you will need to test this width to ensure it is wide enough to accomodate all text.*/
    
    #p7menubar li {	float: left;
    	width: 8em;
    }
    
    
    
    /*Sets width for Sub-Menu box and the List Items inside - in proportional em units. This allows the sub-menu width to expand if users resize the text in their browsers.
    */
    
    #p7menubar li ul, #p7menubar ul li  {
    	width: 16em;
    	text-align: left;}
    
    /*
    The sub-menu links. We set color and turn off the right border, which would otherwise be inherited from the root link rule. We set top and bottom padding less than the root items and increas the left padding to indent the sub-menu links a small amount in from the root links.*/
    
    
    #p7menubar ul li a  {
    	color: #006600;
    	border-left: 1px solid #333;
    	padding: 3px 12px 3px 15px;
    	border-right: 0px;
    	border-bottom: 1px solid #333333;
    }
    
    
    /*
    Sub-Menu Unordered Lists describes each dropdown sub-menu grouping. Positioned Absolutely to allow them to appear below their root trigger. Set to display none to hide them until trigger is moused over.Background Color must be set or problems will be encountered in MSIE. Right and bottom borders are set to simulate a raised look. A gradient background image is assigned.*/
    
    #p7menubar li ul {
    	position: 
    
    absolute;
    	display: none;
    	background-color: #ffffff;
    	border-right: 1px solid #333333;
    	border-bottom: 1px solid #333333;
    	color: #006600;
    }
  2. #2
  3. Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Jun 2001
    Location
    Right now? On my chair.
    Posts
    1,777
    Rep Power
    258
    You are doing stuff like #p7menu bar ul li, which gets all li's from the parent element which has an id of p7menubar. Reference the ul#services, for example, in the CSS and set your styles there. What you have now will change both menus. Good day.
    Use markup the semantic way. You wouldn't want your dog answering the phone for you, would you?
    HTML Validator || CSS Validator -- HTML / CSS Main forums. JavaScript and PHP...maybe
    Bones: HTML; Skin: CSS; Muscle: JavaScript; Brains: PHP; Memory: MySQL
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2008
    Posts
    10
    Rep Power
    0

    Not sure I follow Compeletly


    Originally Posted by groundscape
    You are doing stuff like #p7menu bar ul li, which gets all li's from the parent element which has an id of p7menubar. Reference the ul#services, for example, in the CSS and set your styles there. What you have now will change both menus. Good day.
    I am pretty fuzzy on what all the nested elements refer to (and affect) in a complex css call like I have here. In a related note, what would be the difference between (#p7menubar li ul) and (#p7menubar ul li) in the stylesheet? i appreciate your response and have given it a shot, however there seems to be a problem.

    I have created the rule
    Code:
    ul#about {
    width: 10em;
    }
    and have tried putting the ID value both in the LI (<li id="about">) as the code showed originally, as well as part of the UL (<ul id="about">) and there is a styling change, however the width is not affected at all. It just removes the styling for borders that i specified in a previous rule, also shown in my original post.
  6. #4
  7. Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Jun 2001
    Location
    Right now? On my chair.
    Posts
    1,777
    Rep Power
    258
    You can only have one instance of an ID per document. Change them to classes and it should work.ul li decloration finds the nesting <ul><li> and does changes there. li ul finds <li><ul> nesting. Does that make sense?
    Use markup the semantic way. You wouldn't want your dog answering the phone for you, would you?
    HTML Validator || CSS Validator -- HTML / CSS Main forums. JavaScript and PHP...maybe
    Bones: HTML; Skin: CSS; Muscle: JavaScript; Brains: PHP; Memory: MySQL
  8. #5
  9. No Profile Picture
    tcosmas
    Guest
    Devshed Newbie (0 - 499 posts)

    One way to do it...


    The following code will display each section's links and hide the other one. I assumed that the About Us and Client Services pages would be answered by the items in their respective sections and so I dropped the href to them. Otherwise, you can add a LI and put them at the top of the submenu. Hope this is helpful!

    Code:
    <?xml version="1.0" encoding="utf-8"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
    	<title>An XHTML 1.0 Strict standard template</title>
    	<meta http-equiv="content-type" 
    		content="text/html;charset=utf-8" />
    	<meta http-equiv="Content-Style-Type" content="text/css" />
    
    <style type="text/css" media="all">
    A:link {text-decoration: none}
    A:visited {text-decoration: none}
    A:active {text-decoration: none}
    A:hover {text-decoration: underline; color: red;}
    
    /*Class assigned to those Root-Level links that have associated Sub-Menus. The top and bottom padding assigned this element must be the same as that assigned to the p7menubar a element. The right padding is increased
    to accomodate the display of background image depicting a downward pointing arrow.*/
    
    .p7menubar a.trigger {
    	padding: 5px 16px 5px 10px;
    	background-image: url(../p7_cssexpress/p7exp/images/p7PM_dark_south.gif);	background-repeat: no-repeat;
    	background-position: right center;	
    }
    
    
    /*The Root-Level list items. Floating left allows
    them to appear horizontally. Width is for IE5 Mac. The last rule in this style sheet will set the width for this element to auto for all other browsers - hiding it from IE5 Mac. The width is proportional.As you add and edit root menu items, you will need to test this width to ensure it is wide enough to accomodate all text.*/
    
    .p7menubar {	
    	float: left;
    	width: 8em;
    }
    
    
    
    /*Sets width for Sub-Menu box and the List Items inside - in proportional em units. This allows the sub-menu width to expand if users resize the text in their browsers.
    */
    
    .p7menubar li ul, #p7menubar ul li  {
    	width: 22em;
    	text-align: left;
    }
    
    /*
    The sub-menu links. We set color and turn off the right border, which would otherwise be inherited from the root link rule. We set top and bottom padding less than the root items and increas the left padding to indent the sub-menu links a small amount in from the root links.*/
    
    
    .p7menubar ul li a  {
    	color: #006600;
    	border-left: 1px solid #333;
    	padding: 3px 12px 3px 15px;
    	border-right: 0px;
    }
    
    
    /*
    Sub-Menu Unordered Lists describes each dropdown sub-menu grouping. Positioned Absolutely to allow them to appear below their root trigger. Set to display none to hide them until trigger is moused over.Background Color must be set or problems will be encountered in MSIE. Right and bottom borders are set to simulate a raised look. A gradient background image is assigned.*/
    
    .services {
    	position: absolute;
    	display: none;
    	background-color: #ffffff;
    	border-right: 1px solid #333333;
    	border-bottom: 1px solid #333333;
    	color: #006600;
    }
    </style>
    <script>
    function toggle(tag1,tag2) {
    /* alert(tag1,tag2); */
    var tag1 = document.getElementById(tag1);
    var tag2 = document.getElementById(tag2);
    if (tag1.style.display=='none') {
    tag1.style.display='';
    tag2.style.display='none';
    } else {
    tag1.style.display='none';
    tag1.style.display='';
    }
    }
    function hide_em(tag1,tag2) {
    var tag1 = document.getElementById(tag1);
    var tag2 = document.getElementById(tag2);
    if (tag1.style.display=='') {
    tag1.style.display='none';
    tag2.style.display='none';
    }
    if (tag2.style.display=='') {
    tag1.style.display='none';
    tag2.style.display='none';
    }
    }
    </script>
    
    </head>
    <body>
    
    <ul class="p7menubar">
                
        <li><a class="trigger" onClick="toggle('about','services');">About Us</a>
        <ul name="about" id="about" style="display:none;">
            	<li><a href="../about/distinctions.html">Distinctions</a></li>
            	<li><a href="../about/whytmg.html">Why Choose The Monitor Group</a></li>
            	<li><a href="../about/corevalues.html">Mission + Core Values</a></li>
            	<li><a href="../about/qualifications.html">Unique Qualifications</a></li>
            	<li><a href="../about/ourclients.html">Our Clients</a></li>
            	<li><a href="../about/professionals.html">Our Professionals</a></li>
            	<li><a href="../about/faq.html">FAQ's</a></li>
            	<li><a href="../about/careers.html">Careers</a></li>
           		<li><a href="../about/contact.html">Contact</a></li>
    	</ul>
    	</li>
                
        <li><a class="trigger" onClick="toggle('services','about');">Client Services</a>
        <ul name="services" id="services" style="display:none;">
          		<li><a href="../clientservices/IWMP.html">Integrative Wealth Management</a></li>
         		<li><a href="../clientservices/invplanning.html">Investment Management</a></li>
          		<li><a href="../clientservices/blueprint.html" >Personal Financial Blueprint</a></li>
           		<li><a href="../clientservices/estateplanning.html">Wealth Transfer + Estate Planning</a></li>
          		<li><a href="../clientservices/taxplanning.html">Wealth Enhancement, Tax Planning and Reporting</a></li>
           		<li><a href="../clientservices/protection.html">Wealth Protection</a></li>
           		<li><a href="../clientservices/philanthropy.html">Philanthropic Giving</a></li>
          		<li><a href="../clientservices/fees.html">Fee Schedule</a></li>
    	</ul>
    	</li>
    	<li><a name="Hide Em" class="trigger" onClick="hide_em('about','services');">Hide Submenus</a></li>
    </ul>
    
    </body>
    </html>
  10. #6
  11. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2008
    Posts
    10
    Rep Power
    0
    re: tcosmas: Thanks for the thought, however I need the menu to function as a drop down and allow the top level items to be links. I am trying to keep the java to a minnimum at this point, mainly because I have almost no understanding of it.

    re: Groundscape: I feel pretty dumb, but I cannot get any attributes to affect the UL items (menu drop-down). I believe the direction we are going is the correct approach for what i need, but my syntax is not working.

    Am i supposed to use
    Code:
    <li class="about"><ul>
    or
    Code:
    <li><ul class="about">
    ?

    What would the call be for the CSS rule? Is it
    Code:
    ul.about {
    width: 12em;
    }
    or
    Code:
    il.about {
    width: 12em;
    }
    Maybe I need something more complex, like
    Code:
    ul.about li {
    width: 12em;
    }
    ; this is the kind of situation i was referring to when I mentioned I do not have a good understanding of nested lists and how to call nested elements in the style sheet. Thanks a ton for all your help; it seems like you are running this CSS forum, responding to everyone, glad you found the time to help me out too.
  12. #7
  13. Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Jun 2001
    Location
    Right now? On my chair.
    Posts
    1,777
    Rep Power
    258
    Originally Posted by scottdan
    Am i supposed to use
    Code:
    <li class="about"><ul>
    or
    Code:
    <li><ul class="about">
    ?
    Whichever fits what you are trying to do

    Originally Posted by scottdan
    What would the call be for the CSS rule? Is it
    Code:
    ul.about {
    width: 12em;
    }
    ul.about is for <ul class="about">.

    Originally Posted by scottdan
    or
    Code:
    il.about {
    width: 12em;
    }
    Originally Posted by scottdan
    Maybe I need something more complex, like
    Code:
    ul.about li {
    width: 12em;
    }
    ;
    That's not complicated nesting, to you maybe. <ul class="about"><li> is the HTML to go with that CSS. I would use a premade script and look at how they do it to get a feel for nesting technique.

    Originally Posted by scottdan
    this is the kind of situation i was referring to when I mentioned I do not have a good understanding of nested lists and how to call nested elements in the style sheet. Thanks a ton for all your help; it seems like you are running this CSS forum, responding to everyone, glad you found the time to help me out too.
    I seem to be one of the few regulars who post here so I'll take that as a compliment. You will learn how to nest elements with time (or rather, learn how to read it). Cheers.
    Use markup the semantic way. You wouldn't want your dog answering the phone for you, would you?
    HTML Validator || CSS Validator -- HTML / CSS Main forums. JavaScript and PHP...maybe
    Bones: HTML; Skin: CSS; Muscle: JavaScript; Brains: PHP; Memory: MySQL
  14. #8
  15. No Profile Picture
    tom_cos
    Guest
    Devshed Newbie (0 - 499 posts)

    Can you post a link to a mock up?


    Hello scottdan:

    I think you may need to post a link to a mock up of the menu.

    1. Do you want all of the menu and submenu choices showing?
    2. Are you trying to set it so that the "top" menu items show and when clicked on show the submenu items?

    If the first, my suggested solution (or a variant on it) should work. If the second, once you click on the "top" menu item wouldn't they navigate the user away from the page and therefore the user would never see the submenu items.

    Back to groundscape's comments about ids and classes. For any single occurrance of an item, you would be able to declare an id. However, a group of items which you want to apply the same style to would be a class. A Google search on "css parent child" yeilds several web pages that explain this in some depth with good examples.

    Hope this is helpful and gets you pointed in the right direction.

    Best wishes.

    Comments on this post

    • groundscape agrees : Professional, smart, and to the point!
  16. #9
  17. Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Jun 2001
    Location
    Right now? On my chair.
    Posts
    1,777
    Rep Power
    258
    Why did you switch accounts tom_cos...?
    Use markup the semantic way. You wouldn't want your dog answering the phone for you, would you?
    HTML Validator || CSS Validator -- HTML / CSS Main forums. JavaScript and PHP...maybe
    Bones: HTML; Skin: CSS; Muscle: JavaScript; Brains: PHP; Memory: MySQL
  18. #10
  19. No Profile Picture
    tom_cos
    Guest
    Devshed Newbie (0 - 499 posts)

    Maybe I'm Not Me!


    Originally Posted by groundscape
    Why did you switch accounts tom_cos...?
    Apparently, I registered twice. Once on one computer and a second time on this one. Each with a different "user" saved on it which is automatically logged in when I come to devshed!

    Well, as they say: On the web, nobody knows you're a dog.

    Guess I aught to use just the one account so that my post count will get me high enough to earn the right to use an avatar. :-)

    Thanks.
  20. #11
  21. Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Jun 2001
    Location
    Right now? On my chair.
    Posts
    1,777
    Rep Power
    258
    Stick to tom_cos since I repped it and I like it better . You need 100 posts for avatar I believe.
    Use markup the semantic way. You wouldn't want your dog answering the phone for you, would you?
    HTML Validator || CSS Validator -- HTML / CSS Main forums. JavaScript and PHP...maybe
    Bones: HTML; Skin: CSS; Muscle: JavaScript; Brains: PHP; Memory: MySQL
  22. #12
  23. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2008
    Posts
    10
    Rep Power
    0

    Thanks


    Hey guys, thanks for the tips, I will work on them today and let you know how it turned out. If you want to see the two versions of the menu (the old which is styled correctly, and the new which is what we are adjusting here) please visit these links:

    (www.themonitorgroup.com) and (www.themonitorgroup.com/Archive) respectively. the goal is to allow the top menu itmes be links to a particular page when clicked, and to show the drop-down when hovered. Thanks again and I will catch up with you guys soon.
  24. #13
  25. Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Jun 2001
    Location
    Right now? On my chair.
    Posts
    1,777
    Rep Power
    258
    Really isn't all that hard what you want to do...On drop downs, I prefer to set a background color on that other then the background color for the document, otherwise it's hard to distinguish what actually dropped down, if you know what I mean. On the <a> you have for the drop down, the one where if you hover, it drop downs some items, just put a href on there other then # or whatever you have it as. Cheers.
    Use markup the semantic way. You wouldn't want your dog answering the phone for you, would you?
    HTML Validator || CSS Validator -- HTML / CSS Main forums. JavaScript and PHP...maybe
    Bones: HTML; Skin: CSS; Muscle: JavaScript; Brains: PHP; Memory: MySQL
  26. #14
  27. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2008
    Posts
    10
    Rep Power
    0

    All Good


    Thanks for the help guys, I was able to adjust the position of the last menu, which was the most important goal. I was unable to adjust the menu width, it seems like there must be some styling that is interfering with my attempts to change the widths of the menus separately.

    You can see the resulting menu at (www.themonitorgroup.com). Thanks to all, this is a great resource, cant wait to become a more active member.

    Scott
  28. #15
  29. Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Jun 2001
    Location
    Right now? On my chair.
    Posts
    1,777
    Rep Power
    258
    Ok, join us more in the HTML and CSS part, noone really posts there except for me and Arem, possibly Akh..
    Use markup the semantic way. You wouldn't want your dog answering the phone for you, would you?
    HTML Validator || CSS Validator -- HTML / CSS Main forums. JavaScript and PHP...maybe
    Bones: HTML; Skin: CSS; Muscle: JavaScript; Brains: PHP; Memory: MySQL

IMN logo majestic logo threadwatch logo seochat tools logo