...

View Full Version : css drop down menu



space cowboy
12-12-2006, 10:24 AM
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!! :eek: :eek: :mad: :mad:

ronaldb66
12-12-2006, 10:32 AM
It's all about selectors (http://css.maxdesign.com.au/selectutorial/)...

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.

space cowboy
12-12-2006, 10:42 AM
Yea, thats the bit I just cant get my head around!

Here is the CSS of my 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


<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! :thumbsup:

space cowboy
12-12-2006, 08:44 PM
also, am I right in thinking that this code wont work (ie the drop down bit) in IE6?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum