Jump to content

CSS3 - Menu Help


jmurph333

Recommended Posts

I am trying to make this menu so that it looks like this, but they all look like what they should look like it when it's hovered over, automatically.HTML:

<div class="wrapper">   <div class="container"><ul class="menu" rel="sam1">   <li class="active"><a href="#">Home</a></li>   <li><a href="#">About</a></li>   <li ><a href="#">Blog</a></li>   <li><a href="#">Services</a></li>   <li><a href="#">Portfolio</a></li>   <li><a href="#">Contacts</a></li>   <li><a href="#">Twitter @insic</a></li>   </ul>   </div>   </div>

CSS3:

.wrapper {   	width: 100%;   	height: 80px;   	background : #464646;   	background : -webkit-gradient(linear, left top, left bottombottom, from(rgb(168,168,168)), to(rgb(69,69,69)));   	background : -moz-linear-gradient(top, rgb(168,168,168), rgb(69,69,69));   	border-top: 2px solid #939393;   	position: relative;   	margin-bottom: 30px;   ul {   	margin: 0;   	padding: 0;   }     .ul.menu {   	height: 80px;   	border-left: 1px solid rgba(0,0,0,0.3);   	border-right: 1px solid rgba(255,255,255,0.3);   	float:left;   }     ul.menu li {   	list-style: none;   	float:left;   	height: 79px;   	text-align: center;   	background: -webkit-gradient(radial, 50% 100%, 10, 50% 50%, 90, from(rgba(31,169,244,1)), to(rgba(0,28,78, 1)) );   	background: -moz-radial-gradient(center 80px 45deg, circle cover, rgba(31,169,244,1) 0%, rgba(0,28,78, 1) 100%);   	}     ul li a {   	display: block;   	padding: 0 20px;   	border-left: 1px solid rgba(255,255,255,0.1);   	border-right: 1px solid rgba(0,0,0,0.1);   	text-align: center;   	line-height: 79px;   	background : -webkit-gradient(linear, left top, left bottombottom, from(rgb(168,168,168)), to(rgb(69,69,69)));   	background : -moz-linear-gradient(top, rgb(168,168,168), rgb(69,69,69));   	-webkit-transition-property: background;   	-webkit-transition-duration: 700ms;   	-moz-transition-property: background;   	-moz-transition-duration: 700ms;   	}     ul li a:hover {   	background: transparent none;   }     ul li.active a{   	background: -webkit-gradient(radial, 50% 100%, 10, 50% 50%, 90, from(rgba(31,169,244,1)), to(rgba(0,28,78, 1)) );   	background: -moz-radial-gradient(center 80px 45deg, circle cover, rgba(31,169,244,1) 0%, rgba(0,28,78, 1) 100%);   } }

Any issues you can see.

Link to comment
Share on other sites

The first error I can see is that you're missing a closing brace for you .wrapper properties. And then you've also got an extra one right at the end.

Link to comment
Share on other sites

Some other things I caught:For your wrapper background, you had the -webkit-gradient going from "left top" to "left bottombottom" which is just a typo I believe. Same goes for your -webkit-gradient for ul.menu li a.Also, you have an extra period before ul.menu.On your -moz-linear-gradient you are missing the "to" part of the gradient. You just have "top" and then your color listings when it should be "top, bottom, color, color".Also, with your CSS transitions, I believe the specifications ask for the time in seconds and not milliseconds. What I like to do is just declare everything in one.

-webkit-transition: all .2s ease-out;

Then, if I need certain ones to be slower, you can define them separately.

-webkit-transition: background .2s ease-out;-webkit-transition: border .6s ease-out;

I'd like to fix more but I gotta go to work! Good luck with these changes.

Link to comment
Share on other sites

...they all look like what they should look like it when it's hovered over, automatically.
Try moving your styles from ul li a to ul li a:hover. When you define your styles in ul li a you're telling it that that's what you want it to look like in it's default state.Also, as Rufus pointed out you have several typos in your CSS.
Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...