Jump to content

azel

Members
  • Posts

    4
  • Joined

  • Last visited

About azel

  • Birthday 01/18/1998

Previous Fields

  • Languages
    XHTML, CSS 3, Learning PHP, MySQL, HTML 5

Profile Information

  • Location
    Rome, IT

azel's Achievements

Newbie

Newbie (1/7)

0

Reputation

  1. Thanks I'll try that and I'll see what happens
  2. Does anyone now what I should do?
  3. I think that you have to use float:left on the reset and submit buttons too.
  4. 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
×
×
  • Create New...