Jump to content

CSS3 - Menu Help


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 post
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 post
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 post
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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...