[RESOLVED] CSS Only Drop Down Menu Bar

This site is best viewed in a modern browser with JavaScript enabled.

falky

Hello,

For 2 weeks now I have been going all over the internet to try and find a code that will allow me to have a simple drop down menu table display below a menu button.

All im after is a simple CSS function so that I can have the Menu Bar in a Table and each button in a TD. Then control the font size, color etc via CSS and the roll over and have it all just work nice and smoothly but you think I can find a code that will make this happen? Please help

See image attached of what I am trying to do:

[ATTACH]15859[/ATTACH]

The attachments of this post were removed during the platform migration in 2018

coothead

Hi there falky,
[indent]
the use of the "table element" for anything other than the display
of tabular data is considered to be twentieth century methodology.

Modern methodology uses the "ul element" for navigational menus.

Would you like an example that is relevant to your attached image?
[/indent]

coothead

falky

Yes please, I have looked everywhere, even tested a few codes of CSS i found but nothing will let me do what im trying to do with the menu system I have, it also has to be 960px wide which I guess I could put into a table thats 960px and then have all the ul elements but you think i can get this to work haha nope, its just doing my head in.

falky

I might have found a solution from a previous post as I am working on editing their scripts atm, will see how I go and keep you posted

coothead

Hi there falky,

[indent]
why are you so reluctant to drop the "table element"
and use modern methodology instead?
[/indent]

coothead

falky

Ok so I have jumped into CSS Menus lol and glad I did as its a lot easier. I have got a problem though I can't solve on the net and that is how to make it so that if the main menu is class="active" the actual background and text color are the same as if its hovered over, basically so there is no effects and is just an active always hovered over menu.

As you can see "News" is Active using the class, but I dont know how to get it to change the "background-color" from #0061aa to #e4e4e4 & the text "color" from #e4e4e4 to #0061aa without any of the transition effects, just a way to show the user that they are on that specific page when class="active" is on <li>. I will use PHP script to echo the class="active" code for which ever page they are on but the CSS i cant seem to get it to work please help meee

CSS Code:

._css3m{
	display:none;
}
ul#css3menu1{
	margin: 0;
	list-style: none;
	padding: 0;
	border-width: 1px;
	border-style: solid;
	border-color: #0061aa;

}
ul#css3menu1 ul{
	margin: 0;
	list-style: none;
	padding: 0;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #0061aa;
}
ul#css3menu1 ul{
	display:none;position:absolute;left:0;top:100%;}
ul#css3menu1 li:hover>*{
	display:block;}
ul#css3menu1 li{
	position:relative;display:block;white-space:nowrap;font-size:0;float:left;}
ul#css3menu1 li:hover{
	z-index:1;}
ul#css3menu1{
	font-size:0;z-index:999;position:relative;display:inline-block;zoom:1;padding:0;
	*display:inline;}
* html ul#css3menu1 li a{
	display:inline-block;}
ul#css3menu1>li{
	margin:0;}
ul#css3menu1 a:active, ul#css3menu1 a:focus{
	outline-style:none;}
ul#css3menu1 a{
	display:block;vertical-align:middle;text-align:center;text-decoration:none;font:bold 18px "Trebuchet MS", Arial, Helvetica, sans-serif;color:#e4e4e4;cursor:pointer;padding:0px 10px 0px 10px;background-color:#0061aa;border-width:0 0 0 0px;border-style:solid;border-color:#0061aa;	-webkit-transition: color .2s ease-in-out;
	-moz-transition: color .2s ease-in-out;
	-o-transition: color .2s ease-in-out;
	-ms-transition: color .2s ease-in-out;
	transition: color .2s ease-in-out;}
ul#css3menu1 ul li{
	float:none;margin:0px 0 0;border-width:0px 1px 1px 1px;border-style:solid;border-color:#0061aa;}
ul#css3menu1 ul a{
	text-align:center;padding:0px;background-color:#e4e4e4;background-image:none;border-width:0;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;font:bold 18px "Trebuchet MS", Arial, Helvetica, sans-serif;color:#0061aa;text-decoration:none;	-webkit-transition: color .2s ease-in-out;
	-moz-transition: color .2s ease-in-out;
	-o-transition: color .2s ease-in-out;
	-ms-transition: color .2s ease-in-out;
	transition: color .2s ease-in-out;}
ul#css3menu1 li:hover>a,ul#css3menu1 li a.pressed{
	background-color:#e4e4e4;border-color:#0061aa;border-style:solid;color:#0061aa;text-decoration:none;
	}
ul#css3menu1 span{
	display:block;overflow:visible;}
ul#css3menu1 ul li:hover>a,ul#css3menu1 ul li a.pressed{
	background-color:#0061aa;background-image:none;color:#e4e4e4;text-decoration:none;}

HTML Code:

<ul id="css3menu1">
	<li><a href="#" style="width:66px;height:30px;line-height:30px;">HOME</a></li>
	<li><a href="#" style="width:68px;height:30px;line-height:30px;">NEWS</a>
	<ul>
		<li><a href="#" style="width:180px;height:30px;line-height:30px;">Latest</a></li>
		<li><a href="#" style="width:180px;height:30px;line-height:30px;">Carnival</a></li>
		<li><a href="#" style="width:180px;height:30px;line-height:30px;">Competition</a></li>
		<li><a href="#" style="width:180px;height:30px;line-height:30px;">Archived</a></li>
	</ul></li>
	<li class="active"><a href="#" style="width:77px;height:30px;line-height:30px;">TIPPING</a>
	<ul>
		<li><a href="#" style="width:180px;height:30px;line-height:30px;">Register</a></li>
		<li><a href="#" style="width:180px;height:30px;line-height:30px;">Ladder</a></li>
		<li><a href="#" style="width:180px;height:30px;line-height:30px;">Prizes</a></li>
		<li><a href="#" style="width:180px;height:30px;line-height:30px;">Terms &amp; Conditions</a></li>
	</ul></li>
	<li><a href="#" style="width:65px;height:30px;line-height:30px;">CLUB</a>	<ul>
		<li><a href="#" style="width:220px;height:30px;line-height:30px;">Events</a></li>
		<li><a href="#" style="width:220px;height:30px;line-height:30px;">Honour Board</a></li>
		<li><a href="#" style="width:220px;height:30px;line-height:30px;">Legends</a></li>
		<li><a href="#" style="width:220px;height:30px;line-height:30px;">Team Of The Decade</a></li>
		<li><a href="#" style="width:220px;height:30px;line-height:30px;">Past Players</a></li>
		<li><a href="#" style="width:220px;height:30px;line-height:30px;">Championship Results</a></li>
		<li><a href="#" style="width:220px;height:30px;line-height:30px;">Committee Members</a></li>
		<li><a href="#" style="width:220px;height:30px;line-height:30px;">Football Staff</a></li>
		<li><a href="#" style="width:220px;height:30px;line-height:30px;">Membership</a></li>
	</ul></li>
	<li><a href="#" style="width:84px;height:30px;line-height:30px;">GALLERY</a>	<ul>
		<li><a href="#" style="width:180px;height:30px;line-height:30px;">Carnival</a></li>
		<li><a href="#" style="width:180px;height:30px;line-height:30px;">Training Camp</a></li>
		<li><a href="#" style="width:180px;height:30px;line-height:30px;">Events</a></li>
	</ul></li>
	<li><a href="#" style="width:65px;height:30px;line-height:30px;">SHOP</a></li>
	<li><a href="#" style="width:63px;height:30px;line-height:30px;">FANS</a>	<ul>
		<li><a href="#" style="width:180px;height:30px;line-height:30px;">Facebook</a></li>
		<li><a href="#" style="width:180px;height:30px;line-height:30px;">Twitter</a></li>
		<li><a href="#" style="width:180px;height:30px;line-height:30px;">Wallpapers</a></li>
		<li><a href="#" style="width:180px;height:30px;line-height:30px;">Newsletters</a></li>
		<li><a href="#" style="width:180px;height:30px;line-height:30px;">Sponsor Offers</a></li>
	</ul></li>
	<li><a href="#" style="width:94px;height:30px;line-height:30px;">SPONSORS</a>	<ul>
		<li><a href="#" style="width:180px;height:30px;line-height:30px;">Current Sponsors</a></li>
		<li><a href="#" style="width:180px;height:30px;line-height:30px;">Sponsor Packages</a></li>
	</ul></li>
	<li><a href="#" style="width:90px;height:30px;line-height:30px;">REGISTER</a></li>
	<li><a href="#" style="width:86px;height:30px;line-height:30px;">CONTACT</a></li>
</ul>

coothead

Hi there falky,

try this snippet...

[color=navy]
.active a {
    background-color:#e4e4e4!important;
    color:#0061aa!important;
  }[/color]

coothead

falky

As simple as that? Im finding CSS really hard to learn compared to php etc, i guess as I go I will get better and not without the awesome help of others like yourself coothead, cheers

coothead

[indent]
No problem, you're very welcome.
[/indent]

coothead