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
    Jun 2006
    Posts
    30
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation css drop down menu

    argh!!!!!! im going nuts here!

    I want a very simple CSS menu (would be great if the drop down effect worked on IE6, but at this point I just need to get anything working).

    The problem is that everytime I get one to work it messes up all the other standard lists I have in my pages.

    I just dont understand how to get these to seperate and for me to style the menu in CSS without messing up my other lists!!

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,253
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Selectors

    It's all about selectors...

    Could you grant us a peek at your markup (HTML)? Than we can make an informed suggestion about how to use classes and/or ids to seperate out your menus from your ordinary lists.
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #3
    New Coder
    Join Date
    Jun 2006
    Posts
    30
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yea, thats the bit I just cant get my head around!

    Here is the CSS of my code.....

    Code:
    #navHome{width: 124px; height: 22px;}
    #navAboutUs{width: 124px; height: 22px;}
    #nav1{width: 124px; height: 22px;}
    #nav2{width: 124px; height: 22px;}
    #navNews{width: 124px; height: 22px;}
    #navContact{width: 125px; height: 22px;}
    ul {
    	margin: 0px;
    	list-style: none;
    	color:#FFFFFF;
    
    }
    ul li {
    	position: relative;
    	float: left;
    	padding-top:3px;
    	margin-left:1px;
    	margin-right:1px;
    	background-image:url(../images/nav_bg.jpg);
    	color:#FFFFFF;
    	font-size:90%;
    }
    ul li li {
    	position: relative;
    	float: left;
    	width: 110px;
    }
    li ul {
    	position: absolute;
    	left: 0px; /* Set 1px less than menu width */
    	top: 23px;
    	display: none;
    }
    
    /* Styles for Menu Items */
    ul li a {
    	display: block;
    	text-decoration: none;
    	color: #FFFFFF;
    }
    /* commented backslash mac hiding hack \*/ 
    * html ul li a {height:1%}
    /* end hack */ 
    
    /* this sets all hovered lists */
    li:hover a, li.over a,
    li:hover li a:hover, li.over li a:hover {
       color: #152D5a;
    }
    
    /* set dropdown to default */
    li:hover li a, li.over li a {
       color: #FFFFFF;
       background-color:#5C84B8;
       border: outset;
       border-width: 0;
       border-color: #000000;
    }
    li ul li a { padding: 2px 5px; } /* Sub Menu Styles */
    li:hover ul, li.over ul { display: block; text-decoration:underline; } /* The magic */



    And here is the HTML part

    Code:
    <ul id="nav"> 
      <li id="navHome">
        <div align="center"><a href="../index.aspx">Home</a></div>
      </li> 
      <li id="navAboutUs">
        <div align="center"><a href="../about_us.aspx">About Us</a></div>
      </li>
      <li id="nav1">
        <div align="center"><a href="../xx.aspx">Services</a>
              <ul>
                <li><a href="../xx/index.aspx">xx</a></li>
                <li><a href="../xx/index.aspx">xx</a></li>
                <li><a href="../xx/index.aspx">xx</a></li>
                <li><a href="../xx/index.aspx">xx</a></li>
                <li><a href="../xx/index.aspx">xx</a></li>
    	<li><a href="../xx/index.aspx">xx</a></li>
    	<li><a href="../xx/index.aspx">xx</a></li>
    	<li><a href="../xx/index.aspx">xx</a></li>
              </ul>
        </div>
      </li>
      <li id="nav2">
        <div align="center"><a href="../history.aspx">History</a></div>
      </li>
      <li id="navNews"> 
        <div align="center"><a href="../news.aspx">News</a></div>
      </li>
      <li id="navContact">
        <div align="center"><a href="../contact.aspx">Contact</a></div>
      </li>
    </ul>


    prob;em is that when I use this it alters all the other lists in my pages. Can this code be ajusted so that it wont effect the other lists in my pages?

    thanks in advance for your help!
    Last edited by space cowboy; 12-12-2006 at 08:41 PM.

  • #4
    New Coder
    Join Date
    Jun 2006
    Posts
    30
    Thanks
    0
    Thanked 0 Times in 0 Posts
    also, am I right in thinking that this code wont work (ie the drop down bit) in IE6?


  •  

    Posting Permissions

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