Hi Pep+Pup! Welcome to sitepoint. I am on my way home so I am sorry to only partially answer your question
Code:
#nav {
/*margin: 230px;*/
padding: 7px 8px 0;
background: #white url(http://1.bp.blogspot.com/-PsqSr0neal...b-gradient.png) repeat-x 0 -110px;
line-height: 100%;
border-radius: 2em;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
-webkit-box-shadow: 0 1px 3px rgba(0,0,0, .4);
-moz-box-shadow: 0 1px 3px rgba(0,0,0, .4);
width: 100%
position: relative;
}
#nav li {
margin: 0 5px;
padding: 0 0 8px;
float: left;
list-style: none;
font-family: news gothic std;
}
#nav li ul { position:absolute;top:!00% }
/* main level link */
#nav a {
font-weight: normal;
color: #00d6f6;
text-decoration: none;
display: block;
padding: 10px 70px;
margin: 0;
-webkit-border-radius: 1.6em;
-moz-border-radius: 1.6em;
text-shadow: 0 1px 1px rgba(0,0,0, .3);
}
#nav a:hover {
background: #white;
color: #98015d;
}
/* main level link hover */
#nav .current a, #nav li:hover > a {
background: white #98015durl(http://1.bp.blogspot.com/-PsqSr0neal...b-gradient.png) repeat-x 0 -40px;
color: #white;
border-top: solid 1px #white;
-webkit-box-shadow: 0 1px 1px rgba(0,0,0, .2);
-moz-box-shadow: 0 1px 1px rgba(0,0,0, .2);
box-shadow: 0 1px 1px rgba(0,0,0, .2);
text-shadow: 0 1px 0 rgba(255,255,255, 1);
}
/* sub levels link hover */
#nav ul li:hover a, #nav li:hover li a {
background: 98015d;
border: none;
color: #98015d;
-webkit-box-shadow: none;
-moz-box-shadow: none;
}
#nav ul a:hover {
background: #ff6c00 url(http://1.bp.blogspot.com/-PsqSr0neal...b-gradient.png) repeat-x 0 -100px !important;
color: #98015d !important;
-webkit-border-radius: 0;
-moz-border-radius: 0;
text-shadow: 0 1px 1px rgba(0,0,0, .1);
}
/* dropdown */
#nav {position:relative}
#nav>li:hover ul { left:0; }
/* level 2 list */
#nav ul {
left:-99999em;
margin: 0;
padding: 10px 0;
width:100%;
margin-top:-2px;
/*position: static;*/
/*top: 250px;*/
/*left: 200px;*/
background: #white url(http://1.bp.blogspot.com/-PsqSr0neal...b-gradient.png) repeat-x 0 0;
border: solid 1px #98015d;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0 1px 3px rgba(0,0,0, .3);
-moz-box-shadow: 0 1px 3px rgba(0,0,0, .3);
box-shadow: 0 1px 3px rgba(0,0,0, .3);
}
#nav ul li {
/*float: none;*/
margin: 0;
padding: 10px;
}
#nav ul a {
font-weight: normal;
text-shadow: 0 1px 0 #fff;
}
/* level 3+ list */
#nav ul ul {
left: 250px;
top: -90px;
}
/* rounded corners of first and last link */
#nav ul li:first-child > a {
-webkit-border-top-left-radius: 9px;
-moz-border-radius-topleft: 9px;
-webkit-border-top-right-radius: 9px;
-moz-border-radius-topright: 9px;
}
#nav ul li:last-child > a {
-webkit-border-bottom-left-radius: 9px;
-moz-border-radius-bottomleft: 9px;
-webkit-border-bottom-right-radius: 9px;
-moz-border-radius-bottomright: 9px;
}
/* clearfix */
#nav:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#nav {
display: inline-block;
}
html[xmlns] #nav {
display: block;
}
* html #nav {
height: 1%;
}
Aside from a myriad of typos ( remember to put units in all your measurements!) you need to have position relative ONLY in your container(#nav) and then give position:absolute to the child ULs. After that ( and this is the part i didnt have time to work on.. you will need to copy your styling of your LIs to your anchors and use margin on the anchors and a border around #nav to create the white space you originally had.
The reason for this drastic change is that in order for a drop down to remain open it must overlap by at least a pixel or two with the PARENT element. This is why I have the purple border overlapping with the gray of your container. So if you want to create the illusion of white space between the two menus you need to make the LIs transparent, and tall enough to extend bellow #nav.
I know that sounds convoluted but hopefully it will help you get your site looking like you want it.
Reply With Quote
Originally Posted by pepperandherpup
Bookmarks