My css code is:
.horizontalcssmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
list-style:none;
}
.horizontalcssmenu ul a:active{
color: #00FFFF;
background: #FF0033;
text-decoration: none;
}
/*Top level list items*/
.horizontalcssmenu ul li{
position: relative;
display: inline;
float: left;
height: 34px;
top: 25px;
left: 111px;
width: 71px;
margin-left: 0px;
}
.horizontalcssmenu ul li a:active{
color: #00FFFF;
background: #FF0033;
text-decoration: none;
}
/*Top level menu link items style*/
.horizontalcssmenu ul li a{
border-left: 2px solid #202020;
border-right: 2px solid #202020;
border-top: 2px solid #202020;
border-bottom: 2px solid #202020;
display: block;
width: 54px; /*Width of top level menu link items*/
padding: 2px 8px;
text-decoration: none;
background: url(menubg.gif) center center repeat-x;
color: Red;
font: bold 13px Tahoma;
height: 27px;
margin-left: 0px;
}
/*Sub level menu*/
.horizontalcssmenu ul li ul{
left: 0;
top: 0;
border-top: 1px solid #202020;
position: absolute;
display: block;
visibility: hidden;
z-index: 100;
}
.horizontalcssmenu ul li ul a:active{
color: #00FFFF;
background: #FF0033;
text-decoration: none;
}
/*Sub level menu list items*/
.horizontalcssmenu ul li ul li{
display: inline;
float: none;
}
.horizontalcssmenu ul li ul li a:active{
color: #00FFFF;
background: #FF0033;
text-decoration: none;
}
/* Sub level menu links style */
.horizontalcssmenu ul li ul li a{
width: 100px; /*width of sub menu levels*/
font-weight: normal;
padding: 2px ;
background: #663300;
border-width: 1px 1px 1px;
}
.horizontalcssmenu ul li ul li a:active{
color: #00FFFF;
background: #FF0033;
text-decoration: none;
}
.horizontalcssmenu ul li a:hover{
color: #0066FF;
background: #FF0033;
text-decoration: none;
}
.horizontalcssmenu ul li a:active{
color: #00FFFF;
background: #FF0033;
text-decoration: none;
}
.horizontalcssmenu ul li ul li a:hover{
color: #00FFCC;
background: #CCCC66
}
.horizontalcssmenu .arrowdiv{
position: absolute;
right: 1;
background: transparent url(image/bg-bubplastic-button.gif) no-repeat center left;
}
* html p#iepara{ /*For a paragraph (if any) that immediately follows menu, add 1em top spacing between the two in IE*/
padding-top: 1em;
}
/* Holly Hack for IE \*/
* html .horizontalcssmenu ul li { float: left; height: 1%; }
* html .horizontalcssmenu ul li a { height: 1%; }
/* End */
When the user moves to the specified page, the button color should change and remain the same as long as he is in that page. How can I do this?
You could simply tag your <body> tags with ids, and then make CSS selectors from there. Example: http://css-tricks.com/id-your-body-for-greater-css-control-and-specificity/
There's no css selector link state for what you want to achieve.You should use some Php to check the page you're at and style the button right after
Related
I have a main menu that i have styled with an underline appearing on the hover state.
However I don't want this to appear on the submenu categories.
This is my code:
#menu_container { padding: 0px 0; text-align: center; }
#menu_container a:hover{background: url("/main/nav.gif") repeat-x scroll 0px 20px transparent;}
#menu_container ul { list-style-type: none; margin: 0; padding: 0; text-align: center; }
#menu_container ul li { margin-left: 15px; font-family: 'Lato', sans-serif; font-weight: 900; font-size: 1.2em; color: #000; position: relative; padding-bottom: 10px; text-transform: uppercase; display: inline-block; letter-spacing:1px; }
#menu_container ul li:first-child { margin-left: 0; }
#menu_container ul li a { color: #000; text-decoration: none; display:inline-block; padding-bottom: 5px; padding:10px; border-radius: 0px;}
#menu_container ul li a:hover { color: #000; -webkit-transition: background 0.5sease;-moz-transition: background 0.5sease;-ms-transition: background 0.5sease;-o-transition: background 0.5sease;transition: background 0.5sease;}
#menu_container ul li.current-menu-item a,
#menu_container ul li.current_page_item a { color: #b9b9b9;}
#menu_container ul li ul { position: absolute; top: 35px; left: 0; padding: 1px 1px; z-index: 25; display: none; border-radius: 3px; text-align: left; }
I think you're asking for this:
#menu_container ul li a { text-decoration: none; ...}
#menu_container ul li a:hover { text-decoration: underline; ... }
#menu_container ul li li a:hover { text-decoration: none; ... } /* no hover underline on sublinks */
The underlying idea is selector specificity. A specific contextual selector (#menu_container ul li li a) overwrites a more generic definition (#menu_container ul li a).
See CSS priority scheme:
http://en.wikipedia.org/wiki/Cascading_Style_Sheets#CSS_Priority_scheme_.28highest_to_lowest.29
I did the job by make the submenu functioning, the problem is I can't get the submenu width wider than its parent.
when i hover, its messed up as you can see in fiddle links i provided below
please take a look at this http://jsfiddle.net/wR5L5/
.navigation {
height: 35px;
background: #333;
}
.navigation ul {
margin: 0;
padding: 0;
}
.navigation ul li {
position: relative;
display: inline;
}
.navigation ul li a {
text-transform: uppercase;
color: #fff;
font-weight: 700;
line-height: 35px;
padding: 6px 8px;
text-shadow: 0px 0px 1px #ff170f;
}
.navigation ul li a:hover {
text-decoration: none;
color: #FF3E36;
border-bottom: 2px solid #FF3E36;
}
.navigation ul li:hover ul {
left: 0;
}
.navigation ul .sub {
position: absolute;
z-index: 9999;
left: -9999px;
font-size: 13px;
}
.navigation ul .sub li {
padding-top: -4px;
float: none;
background: #fff;
}
.navigation ul .sub li a {
text-shadow: none;
color: #333;
}
.navigation ul .sub li a:hover {
color: #ff3e36;
border-bottom: none;
text-shadow: none;
}
.navigation ul .sub li:hover {
background: #333;
}
there is a flexible menu .sub class http://jsfiddle.net/wR5L5/12/
.navigation {
height: 35px;
background: #333;
}
.navigation ul {
margin: 0;
position: relative;
padding: 0;
}
.navigation ul li {
display: inline;
position: relative;
}
.navigation ul li a {
text-transform: uppercase;
color: #fff;
font-weight: 700;
line-height: 35px;
padding: 6px 8px;
text-shadow: 0px 0px 1px #ff170f;
}
.navigation ul li a:hover {
text-decoration: none;
color: #FF3E36;
border-bottom: 2px solid #FF3E36;
}
.navigation ul li:hover ul {
left: 0;
}
.navigation ul .sub {
position: absolute;
z-index: 9999;
left: -9999px;
float: left;
width: auto;
min-width: 100%;
background: #999;
font-size: 13px;
}
.navigation ul .sub li {
padding-top: -4px;
float: none;
white-space: nowrap;
clear: both;
background: #fff;
}
.navigation ul .sub li a {
text-shadow: none;
color: #333;
display: block;
float: none;
width: 100%;
}
.navigation ul .sub li a:hover {
color: #ff3e36;
border-bottom: none;
text-shadow: none;
}
.navigation ul .sub li:hover {
background: #333;
}
Give width to the sub menu to get submenu wider than main menu.
.navigation ul .sub {
position: absolute;
z-index: 9999;
left: -9999px;
width: 150px;
font-size: 13px;
}
I've created a drop down menu using css where the drop down appears as a horizontal row instead of a vertical list. My only problem is that the drop down menu does not line up with the rest of menu. I want it to be flush with the left side of the navigation bar.
The page is up at this address: http://concept82.com/CBHweb/index2.html
The code for my drop down menu is:
#navholder{
background-color: #594361;
margin: 0 auto;
width: 868px;
height: 25px;
font-family: P22, Helvetica, Arial, sans-serif;
}
#nav {
margin: 1px;
padding: 0px;
}
#nav li {
list-style: none;
float: left;
}
#nav li a {
display: block;
color: #FFFFFF;
font-size: 14px;
text-align: center;
margin-top: 5px;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 3px;
width: 140px;
}
#nav li a:hover {
color: #201E30;
}
#nav li ul {
display: none;
}
#nav li ul a{
width: auto;
font-size: 11px;
}
#nav li:hover ul, #nav li.hover ul {
position: absolute;
left: 0;
display: inline;
padding-top: 5px;
}
#nav li:hover li, #nav li.hover li {
float: left;
display: block;
text-decoration: none;
color: #594361;
font-size: 11px;
border-right: 1px solid #594361;
padding: 0px 15px 0px 15px;
margin-top: 3px;
margin-bottom: 3px;
white-space: nowrap;
}
#nav li.first, #nav li.hover li.first {
float: left;
display: block;
text-decoration: none;
color: #594361;
font-size: 11px;
border-left: 1px solid #594361;
padding: 2px 15px 2px 5px;
margin-top: 3px;
white-space: nowrap;
}
#nav li:hover li a, #nav li.hover li a {
color: #201E30;
background-color: #FFFFFF;
}
#nav li li a:hover {
color: #201E30;
}
Thanks ahead of time!
You should change position of #navholder as relative.
#navholder{
position: relative;
background-color: #594361;
margin: 0 auto;
width: 868px;
height: 25px;
font-family: P22, Helvetica, Arial, sans-serif;
}
When you define the ul when hovering on the list you specify left as 0 px, aligining it to the left of the page, change it to your margin width then it will be in the right place
#nav li:hover ul, #nav li.hover ul {
position: absolute;
left: 0;
display: inline;
padding-top: 5px;
}
I can't get the color of my dropdown items white, someone knows how I can fix this?
My normal links needs to be black, the not active ones needs to be black, the active one needs to be white, the dropdown items needs to be white. I've got it all with that code except for the most up dropdown item.
Heres my css:
.menuitems{
line-height: 240%;
text-transform: uppercase;
}
.menuitems ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
}
.menuitems ul li {
display: block;
position: relative;
float: left;
}
.menuitems li ul {
display: none;
}
.menuitems ul li a {
height: 40px;
display: block;
text-decoration: none;
color: black;
border-left: 1px #D0D0D0 solid;
padding: 0px 30px 0px 30px;
}
.menuitems li > ul li a
{
color:white;
}
.menuitems ul ul li{
text-transform: none;
border-bottom: 1px #ff5c38 solid;
line-height: 380%;
}
.menuitems ul li:hover{
background: url('images/menu-background1.png') repeat-x 0 0;
}
.menuitems ul li a:hover {
height:40px;
color: white;
padding-left: 30px !important;
padding-right: 30px !important;
}
.menuitems li:hover ul {
display: block;
position: absolute;
}
.menuitems li:hover li {
float: none;
font-size: 13px;
background: #fa3423;
}
.menuitems li:hover a { }
.menuitems li:hover li a:hover {
}
/* What to do on active */
.menuitems ul li.current_page_item {
background: url('images/menu-background1.png') repeat-x 0 0;
}
.menuitems ul li.current_page_item a{
color: white;
}
.menuitems li.current_page_parent a {
color: white;
}
.menuitems li.current_page_parent {
color: white;
background: url('images/menu-background1.png') repeat-x 0 0;
}
.menuitems li:hover ul:hover a:hover{
color: white !important;
}
.menuitems ul li ul{
color: white;
}
I tried everything.. :(
Castra, I assume you're talking about the text? If you want the text to always be white, you'll need to change color: black; in .menuitems ul li a to color: white;
Here's a JSFiddle that shows it.
I have some pretty good experince coding my own UL's but I'm relatively new to wordpress. Confusing to me to work backwards especially when I can't see the html. Anyway I'm using the cufon WP plugin to change the font in the menu. but....with the size I want the font, it shrinks the list item as well as the a:hover. There is somehting in the padding i presume, but I can't find it. you can see what I mean here http://www.thedailyminx.com
here is the menu's css
#navbar {
float: left;
display: block;
background: #bfbcc6;
color: #000000;
width: 978px;
height: 30px;
font-size: 25px;
font-family: 'jc-hand';
margin: 15px auto 15px;
padding: 0px 0px 0px 0px;
border: 1px solid #DDDDDD;
position: relative;
z-index: 9;
}
/*** ESSENTIAL STYLES ***/
.menu, .menu * {
margin: 0;
padding: 0;
list-style: none;
}
.menu {
line-height: 1.0;
}
.menu ul {
margin: 0px;
padding: 0px;
}
.menu ul ul, ul.menu ul {
position: absolute;
top: -9999px;
width: 160px; /* left offset of submenus need to match (see below) */
}
.menu ul li ul li, ul.menu ul li {
width: 100%;
margin: 0px 0px 0px 0px;
}
.menu li:hover {
visibility: inherit; /* fixes IE7 'sticky bug' */
}
.menu li {
float: left;
display: inline-block;
position: relative;
}
.menu a {
display: inline-block;
position: relative;
}
.menu li:hover ul,
.menu li.sfHover ul {
left: 0;
top: 30px; /* match top ul list item height */
z-index: 99;
}
ul.menu li:hover li ul,
ul.menu li.sfHover li ul {
top: -9999px;
}
ul.menu li li:hover ul,
ul.menu li li.sfHover ul {
left: 160px; /* match ul width */
top: 0;
}
ul.menu li li:hover li ul,
ul.menu li li.sfHover li ul {
top: -9999px;
}
ul.menu li li li:hover ul,
ul.menu li li li.sfHover ul {
left: 160px; /* match ul width */
top: 0;
}
/*** SKIN ***/
.menu .current_page_item a,
.menu .current_page_ancestor a,
.menu .current-menu-item a,
.menu .current-cat a {
background: #333333;
color: #FFFFFF;
border-left: 1px solid #333333;
border-right: 1px solid #333333;
}
.menu li .current_page_item a, .menu li .current_page_item a:hover,
.menu li .current-menu-item a, .menu li .current-menu-item a:hover,
.menu li .current-cat a, .menu li .current-cat a:hover {
background: #333333 !important;
color: #FFFFFF !important;
border-left: none;
border-right: none;
}
.menu {
float: left;
margin-bottom: 0;
}
.menu a {
color: #000000;
background: none;
margin: 0px 0px 0px 0px;
padding: 0px 12px 0px 12px;
text-decoration: none;
letter-spacing: 0.1px;
line-height: 30px;
border-right: 1px solid #DDDDDD;
border-left: 1px solid #FFFFFF;
}
.menu li li a {
display: block;
background: #F5F5F5 !important;
color: #000000 !important;
margin: 0px 0px 0px 0px;
padding: 0px 10px 0px 10px;
font-size: 25px;
line-height: 30px;
text-decoration: none;
text-transform: none;
text-shadow: none;
letter-spacing: 0px;
border-right: none !important;
border-left: none !important;
}
.menu li, .menu li li, .menu li li li {
background: none;
margin: 0px;
padding: 0px;
}
.menu li:hover, .menu li.sfHover {
margin: 0px;
padding: 0px;
}
.menu a:focus, .menu a:hover, .menu a:active {
background: #333333;
color: #FFFFFF;
border-right: 1px solid #333333;
border-left: 1px solid #333333;
outline: 0;
}
.menu li li:hover, .menu li li.sfHover {
margin: 0px;
padding: 0px;
}
.menu li li a:focus, .menu li li a:hover, .menu li li a:active {
background: #EEEEEE !important;
color: #333333 !important;
border: none;
outline: 0;
}
can anyone help me out?
Thanks
Greg
ditch the inline height styling of cufon and set it in your stylesheet to 30px