Jump to content

CSS 3 only Navigation issue


azel
 Share

Recommended Posts

I have a problem with my website. I'm trying to build a navigation bar that has another one underneath it and that appears after you hover a top level menu item: XHTML 1.0

<div id="navContainer"><div id="navigation">  <ul id="nav">	 <li id="item1"><a href="#">Item 1</a></li>	 <li id="item2"><a href="#">Item 2</a>		<ul id="submenu 1">		  <li><a href="#">Sub Item 2.1</a></li>		  <li><a href="#">Sub Item 2.2</a></li>		  <li><a href="#">Sub Item 2.3</a></li>		</ul>	 </li>	 <li id="item3"><a href="#">Item 3</a>		<ul>		  <li><a href="#">Sub Item 3.1</a></li>		  <li><a href="#">Sub Item 3.2</a></li>		  <li><a href="#">Sub Item 3.3</a></li>		</ul>	  </li>	  <li id="item4"><a href="#">Item 4</a></li>	</ul>  </div></div>

CSS 3

/* ---------- 6. CSS 3 Menu ---------- */#navigation {width: 738px;height: 40px;clear: both;background: #5d801a;-moz-border-radius: 10px;-webkit-border-radius: 10px;}/* STYLING THE FIRST-LEVEL MENU  */ul#nav {float: left;width: 438px;margin: 0 150px;list-style: none;}ul#nav li {display: inline;}/* STYLING THE LINKS IN THE TOP-LEVEL MENU */ul#nav li a {float: left;font: bold 1.1em arial,verdana,tahoma,sans-serif;line-height: 40px;color: #ffffff;text-decoration: none;text-shadow: 1px 1px 1px #880000;margin: 0 0 10px 0;padding: 0 30px;background: #5d801a padding-box;-moz-border-radius-topright: 10px;-webkit-border-top-right-radius: 10px;-moz-border-radius-topleft: 10px;-webkit-border-top-left-radius: 10px;}/* APPLIES THE ACTIVE STATE FOR THE LINKS IN THE TOP-LEVEL MENU */ul#nav li:hover > a  {color: #ffffff;text-decoration: none;text-shadow: 1px 1px 1px #330000;background: #6f1747 padding-box;;-moz-border-radius: 10px;-webkit-border-radius: 10px;margin: 0 0 10px 0;}/* THE SUBMENU LIST HIDDEN BY DEFAULT */ul#nav ul {display: none;}/* WHEN THE FIRST LEVEL MENU ITEM IS HOVERED, THE CHILD MENU APPEARS */ul#nav li:hover > ul {position: absolute;display: block;width: 360px;height: 30px;margin: 46px 79px;background: #6f1747;-moz-background-origin: content-box;-webkit-background-origin: content-box;-moz-border-radius: 20px/40px;-webkit-border-radius: 20px/40px;-moz-animation: cssMenu 3s;-webkit-animation: cssMenu 3s;}/* STYLING THE LINKS IN THE SUBMENU */ul#nav li:hover > ul li a {float: left;font: bold 1.1em arial,verdana,tahoma,sans-serif;line-height: 30px;color: #ffffff;text-decoration: none;text-shadow: 1px 1px 1px #110000;margin: 0 5px;padding: 0 20px;background: #6f1747;-moz-background-origin: content-box;-webkit-background-origin: content-box;-moz-animation: cssMenu 3s;-webkit-animation: cssMenu 3s;}ul#nav li:hover > ul li a:hover {color: #120000;text-decoration: none;text-shadow: none;}ul#nav li:hover > ul#submenu1{position: absolute;display: block;margin: 46px 0;				<----padding: 0;margin-left: -24px;-moz-background-origin: content-box;-webkit-background-origin: content-box;-moz-animation: cssMenu 3s;-webkit-animation: cssMenu 3s;}/* ---------- 7. CSS 3 Menu's Animation ---------- */@-moz-keyframes cssMenu {0% {background: #cccccc content-box; color: #ffffff;}100% {background: #6f1747 content-box; text-shadow: 1px 1px 1px #110000; }}@-webkit-keyframes cssMenu {0% {background: #cccccc content-box; color: #ffffff;}100% {background: #6f1747 content-box; text-shadow: 1px 1px 1px #110000;}}

The issue is this: Is there a way to control the timing of the :hover property?(CSS only or Javascript if it isn't possible with CSS) Because I want the submenu to be 6px under the top level menu (as you noticed from the 46px margin rule) but in the second I leave the parent item (so I stop hovering it) the submenu will instantly disappear without giving the time to the user to click on the submenu items.And if there isn't a way to control the :hover property, what's the best way to achieve the effect? Thank you all

Edited by azel
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...