SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    SitePoint Addict Synaesthesiac's Avatar
    Join Date
    Aug 2004
    Posts
    359
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Need help with a CSS drop-down menu

    You can view my CSS drop-down menu here:

    http://www.digitalstrife.com/test/dropdown.htm

    The first menu is the actual menu. The one below it is a graphic demonstrating how I'd like the menu to look. Basically what I need to do is make the sub-menu items look slightly different that the main menu items (as demonstrated in the graphic in the above URL). Because the menu is simply an unordered list fancied up by CSS, I'm having trouble differentiating the main menu li's from the submenu li's.

    Here's the code I'm using to acheive the drop-down menu, which I got from A List Apart (customized slightly to fit my design):

    Code:
    <html>
    <head>
    <title>CSS Drop Down Menu</title>
    <style>
    body {
    font: normal 13px trebuchet ms,verdana,tahoma,arial,sans-serif;
    }
     
    ul {
    margin: 0;
    padding: 0;
    list-style: none;
    width: 134px;
    border-bottom: 1px solid #fff;
    }
    li:hover ul, li.over ul { 
    display: block; }
    ul li {
    position: relative;
    }
    li ul {
    position: absolute;
    left: 133px;
    top: 0;
    display: none;
    }
    ul li a {
    display: block;
    text-decoration: none;
    color: #fff;
    background-image: url(images/link_bg.gif);
    padding-left:25px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-right: 5px;
    border: 1px solid #fff;
    border-bottom: 0;
    }
     
    ul li a:hover { color: #fff; background-image: url(images/link_bg2.gif) } /* Hover Styles */
    /* Fix IE. Hide from IE Mac \*/
    * html ul li { float: left; }
    * html ul li a { height: 1%; }
    /* End */
    /* Fix IE. Hide from IE Mac \*/
    * html ul li { float: left; height: 1%; }
    * html ul li a { height: 1%; }
    /* End */
     
    </style>
    <script>
    startList = function() {
    if (document.all&&document.getElementById) {
    navRoot = document.getElementById("nav");
    for (i=0; i<navRoot.childNodes.length; i++) {
    node = navRoot.childNodes[i];
    if (node.nodeName=="LI") {
    node.onmouseover=function() {
    this.className+=" over";
    }
    node.onmouseout=function() {
    this.className=this.className.replace (" over", "");
    }
    }
    }
    }
    }
    window.onload=startList;
     
    </script>
    </head>
    <body>
    <ul id="nav">
    	<li><a href="#">Services</a></li> 
    	<li><a href="#">Ask a Question</a> 
    	</li> 
    	<li><a href="#">Contact Us</a> 
    	</li>
    	<li><a href="#">Logon</a> 
    	 <ul> 
    		<li><a href="#">Engineers</a></li> 
    		<li><a href="#">Administrators</a></li> 
    		<li><a href="#">Forgotten Password</a></li> 
    	 </ul> 
    	</li> 
    </ul>
     
    </body>
    </html>
    Would anyone like to take a stab at it? Seems like it should be pretty easy...
    Danielion
    Imagine a world without hypothetical scenarios...

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You can just target the sublist like this.
    Code:
     li ul li a {background:blue;padding-left:5px}
     li ul li a:hover {background:red}
    Change the background colors and images to suit.

    Paul

  3. #3
    SitePoint Addict Synaesthesiac's Avatar
    Join Date
    Aug 2004
    Posts
    359
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Perfect Thanks!
    Danielion
    Imagine a world without hypothetical scenarios...


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
  •