design and style your friendburst profile – navigation bar
|
• Introduction • Background • Top Area • Middle Area • Profile Header • Left Column • Right Column • Tweaks |
nav bar – background and border div#header ul#main_nav {
background-image: none; background-color: blue; border: 1px solid red; padding-bottom: 0px; } nav bar – font div#header ul#main_nav li a,
div#header div#right_nav ul li a { color: gold; } nav bar – hover effect div#header ul#main_nav li:hover a,
div#header div#right_nav ul li:hover a { color: black; background-color: transparent; } nav bar – dropdown menu – border div#header ul#main_nav li ul, div#header div#right_nav ul li ul {
border: 1px solid red; border-top: 0px; } div#header ul#main_nav li ul li.first, div#header div#right_nav ul li ul li.first { border-top-width: 0px; } nav bar – dropdown menu – position fix div#header ul#main_nav li ul {
margin-top: 1px; } div#header div#right_nav ul li ul { margin-top: 2px; } nav bar – dropdown menu – font and background div#header ul#main_nav li ul li a,
div#header div#right_nav ul li ul li a { color: gold !important; background-color: blue !important; } nav bar – dropdown menu – hover effect div#header ul#main_nav li ul li:hover a,
div#header div#right_nav ul li ul li:hover a { color: black !important; background-color: green !important; border: none; } nav bar – dropdown menu – “explore” icons div#header ul#main_nav li.explore ul li a,
div#header ul#main_nav li.explore ul li:hover a { background-image: none !important; padding-left: 5px; } |
AWESOME, once you are finished with all this, i’ll add a link in my siggy 😉
+500 🙂
Brother what am I doing wrong? I can`t make the hover to work on the right side on the top navigation bar ( setting/Logout )
This is the I`m using.
div#header ul#main_nav {
background-image: none;
background-color: transparent;
border: 0px;
padding-bottom: 0px;
}
div#header ul#main_nav li a {
color: black;
}
div#header div#right_nav ul li a {
color: black;
}
div#header ul#main_nav li:hover a {
color: white!important;
background-color: transparent;
}
div#header ul#main_nav li ul {
border: 1px solid gray;
border-top: 0px;
margin-top: 1px;
width: auto !important;
min-width: 0px !important;
white-space: nowrap;
}
div#header div#right_nav ul li ul {
border: 1px solid gray;
border-top: 0px;
margin-top: 2px;
}
div#header ul#main_nav li ul li.first {
border-top-width: 0px;
}
div#header div#right_nav ul li ul li.first {
border-top-width: 0px;
}
div#header ul#main_nav li ul li a {
color: white!important;
background-color: transparent!important;
padding-right: 5px !important;
}
div#header div#right_nav ul li ul li a {
color: white!important;
background-color: transparent!important;
}
div#header ul#main_nav li ul li a {
width: auto !important;
min-width: 0px !important;
white-space: nowrap;
}
div#header ul#main_nav li.explore ul li a {
padding-right: 5px !important;
}
i copied all the titles/ codes and pasted into notepad. then i copied/ pasted one specified section of code in at a time into my CSS box and tweaked the borders/ colors.
* i didn’t have any problems with the right-side hovers or any other codes on this page *
these worked well….Thanks 😉
I was missing 2 codes 🙂
keep in mind that li:hover doesnt work in most versions of IE – works great in firefox tho