I am trying to prevent the hover and focus effect only on first row, but when I am applying "first-child" pseudo code it applies to all the rows.. Here's the code:
/* CSS */
ul {list-style-type: none;}
ul > li > a {
background: transparent;
font: normal 12px Arial, sans-serif;
color: #007DBD;
margin: 0;
border-radius: 0;
padding: 7px 10px;
width:200px;
}
ul > li > a:first-child {
color:#333;
background: none;
}
ul > li > a:hover, ul > li > a:focus {
color: #009BE1;
background: #F3F3F3;
text-decoration: none;
}
/* HTML */
<ul>
<li>sample#test.com</li>
<li>Edit Profile</li>
<li>Logout</li>
</ul>
I don't want any hover effect for first <li><a> item.
Here's the js-fiddler:
http://jsfiddle.net/123qyrtc/
Please let me know if there is any CSS solution...
ul > li:first-child > a:hover, ul > li:first-child > a:focus {
color:#333;
background: none;
text-decoration:underline
}
To clarify, you don't want the first part (sample#test.com) to have a hover effect, correct? You need to target the first li then, like so:
ul > li:first-child > a:hover {
color:#333;
background: none;
}
Use the :not() pseudo to exclude what you don't want:
Updated JsFiddle
ul > li:not(:first-child) > a:hover, ul > li > a:focus {
color: #009BE1;
background: #F3F3F3;
text-decoration: none;
}
Just remember that the :first-child in this case is the <li>, not the a. The a is always first.
Related
I'm using sahifa theme.I set special css for each buton on main menu.But something block my code and it's back to orjinal theme color blue.
I tried every rules
/* Altinci Menu */
.altinci-nav{
/*background-color: #866;*/
}
.altinci-nav:hover {
background-color: #8c5de4;
}
/*ul li.altinci-nav a,*/
.altinci-nav ul li a:hover,
.altinci-nav ul li a,
.altinci-nav ul li:hover > a,
.altinci-nav ul li:active,
ul li.altinci-nav:active{
background-color: #8c5de4;
}
.altinci-nav:active {
background-color: #8c5de4;
}
.altinci-nav:focus {
background-color: #8c5de4;
}
.altinci-nav:select{
background-color: #8c5de4;
}
.altinci-nav:after{
background-color: #8c5de4;
}
I look with firefox web developer tools and it's show problem that.
#main-nav ul li.current-menu-item a,
#main-nav ul li.current-menu-item a:hover
So I make comment this lines bu nothing change
UPDATE
#main-nav ul li.current-menu-item a,
#main-nav ul li.current-menu-item a:hover{ background-color: transparent !important; }
Thank you.Claudiu D.
find your .altinci-nav:hover css rule and add a chained one for the current page like this
.altinci-nav:hover,
.altinci-nav.current-menu-item {
do the same for other links
I am having trouble with my drop down menus. I would like to have multiple columns under one drop down.
http://jsfiddle.net/Ru3Zv/ here is what I am working with.
#navigation-primary > ul > li > h2, #navigation-primary > ul > li > a {
/* font-size of the first level */
font-size: 1em;
line-height: 40px;
}
#navigation-primary > ul > li > h2 > a, #navigation-primary > ul > li > a {
/* links of the first level */
/* text-transform: uppercase; */
color:white;
font-weight: bold;
text-decoration:none;
/* background: #156aa3; */
background: #1f1f1f;
}
#navigation-primary > ul > li > a.active, #navigation-primary > ul > li > h2 > a.active {
/* active state of the first level */
background:#1f1f1f;
color:#fff;
}
#navigation-primary > ul > li > a:hover, #navigation-primary > ul > li > h2 > a:hover, #navigation-primary > ul > li:hover > a, #navigation-primary > ul > li:hover > h2 > a {
/* hover state of the first level */
background:#1f1f1f;
color:#fff;
}
#navigation-primary .mega a {
/* links color inside panel */
color:white;
}
#navigation-primary .mega a:hover {
/* :hover on links inside panel */
color:white;
/* text-decoration:underline; */
font-size:1.10em
}
#navigation-primary .mega ul.megamenu-2 a {
/* color:#4c4b4b;*/
/* This is the color of the submenu items */
color:#ffffff;
}
#navigation-primary h3, #navigation-primary li.menu-section-title > a {
/* primary links subsection titles */
font-size:1.0em;
/* text-transform:uppercase; */
font-weight: bold;
text-decoration:none
}
#navigation-primary li.menu-leaf-list {
/* child links inside the panel */
/* border-bottom: 1px dashed #e2e2e2;*/
}
.mega {
/* border-top: 10px solid #1f1f1f; */
border-bottom: 4px solid #1f1f1f;
border-left:1px solid #1f1f1f;
/* border-right:1px solid #ccc; */
background:#1f1f1f;
white-space:nowrap !important;
width:auto !important;
}
Under the Services menu I would like to have one column with Managed Services then the underlined links below that then in a second column have Consulting Services with the rest of the underlined links below that. This is similar to http://www.workday.com/.
What would I have to change to get this?
Try this module. It might help.
https://drupal.org/project/megamenu
example:
http://www.aaml.org/
For the multiple columns under one drop down use "tb mega menu". Only for drupal 7.
https://drupal.org/project/tb_megamenu
I'm not sure if I formulated the question correctly, but let me try to explain what I want to achieve.
I'm trying to style navigation menu of a WordPress-based site.
I want the submenu links to be evenly arranged along the entire width of the website's <body> tag (960px wide). If the links of a particular submenu do not fit in one row, I want them to wrap around and arrange themselves in neat columns.
Finally, I want the submenu, when it drops down on hover, to push the rest of the website's content down.
Problem: the submenu unordered list affects the position of the links in the parent unordered list, moving the links around. Somehow, the only thing I could do to keep the parent menu links in place was to pull the submenus out of the way by applying margin-right:-965px;
Question: How should I modify my CSS to position both submenus all the way to the left, level with the edge of the main container?
(If necessary, I can assign custom classes to each submenu separately, for example: .submenu-about and .submenu-investors.)
Thank you in advance for your help!
Here's the complete CSS for the navigation menu:
.main-navigation ul {
list-style-type:none;
margin-top:45px;
}
.main-navigation ul {
display: inline-block;
width:70%;
float:right;
}
.main-navigation ul li {
float:left;
}
.main-navigation ul li a {
display:block;
margin:3px 0 3px 40px;
}
.main-navigation ul ul {
background:#efefef;
display:none;
}
.main-navigation li {
font-size: 13px;
}
.main-navigation li a {
outline: none;
text-decoration:none;
border-bottom: 0;
color: #6a6a6a;
text-transform: uppercase;
//white-space: nowrap;
}
.main-navigation li a:hover {
color: #000;
}
.main-navigation ul li:hover > ul {
margin:-1px -960px 3px 0;
display:block;
width:960px;
}
.main-navigation li ul li a {
font-size: 11px;
margin: 10px 0 10px 10px;
width:180px;
}
.main-navigation .menu-item > a,
.main-navigation .menu-ancestor > a,
.main-navigation .page_item > a,
.main-navigation .page_ancestor > a {
color: #9a9a9a;
font-weight:bold;
}
.main-navigation .current-menu-item > a,
.main-navigation .current-menu-ancestor > a,
.main-navigation .current_page_item > a,
.main-navigation .current_page_ancestor > a {
color: #636363;
font-weight:bold;
}
This Should do it
Add this to your css
.main-navigation ul li .sub-menu {position:absolute; left:0px;}
Found my own answer.
Remove the background from ul li:hover ul.
Set position:relative and the gray background for the ul li:hover >ul li.
Set individually the negative left margins for each submenu li item, to pull them left separately by different number of pixels.
I have existing CSS as
a:active {
outline: none;
}
a:focus {
-moz-outline-style: none;
}
which works fine
i want to restrict the application only to those anchor items which are part of an <ul><li> item under a div with class="tabs_container"
so this is what i did only to fail !
#tabs_container ul li a:active {
outline: none;
}
#tabs_container ul li a:focus {
-moz-outline-style: none;
}
am i doing it wrong ?
thanks in advance
EDIT
My bad ! actually the ID="tabs_container" not Class.
Further reference : This is part of the tutorial about How to create Tabs using Jquery from Scratch by Erric Berry.
Your element has a class but you are trying to reference it with an ID
.tabs_container ul li a:active {
outline: none;
}
.tabs_container ul li a:focus {
-moz-outline-style: none;
}
Try:-
ul > li > a:active
This should catch anchors which are a child of <li> elements which in turn are children of <ul> elements.
CSS classes are prefixed with a . (dot).
So, try
.tabs_container ul li a:active {
outline: none;
}
.tabs_container ul li a:focus {
-moz-outline-style: none;
}
I have an .active class to apply to li a for the current page.
But it keeps being overrode by my styling the main nav div.
#nav ul li a:link, #nav ul li a:visited {
color: #BBBBBB;
}
#nav ul li a:hover, .active, #nav ul .active a:link, #nav ul .active a:visited {
border-bottom: red solid 2px;
padding-bottom: 4px;
color: #fff;
}
I've tried a few variations on the second rule to try and dethrone the first, but none seem to work. (I didn't have the id in originally, but I know that id is a step above class in the cascade). Maybe I'm missing something really basic, or maybe my first rule is foolishly over specific? (I always seem to be running into this sort of problem with links, specifically)
Assuming you have markup like this:
<div id="nav">
<ul>
<li>foo</li>
<li>foo</li>
<li class="active">foo</li>
</ul>
</div>
Your CSS appears to work fine.
See http://jsfiddle.net/X7eAw/1/
You may need to add
#nav ul li.active a
to force specificity if the active class is not being applied. That selector is probably overkill however.
assuming you have the active class on your li element. If you are applying active to the anchor, then the rule should be: #nav ul li a.active:link
You can prevent a style from getting overriden in CSS by using !important tag:
#nav ul li a:hover, .active, #nav ul .active a:link, #nav ul .active a:visited {
border-bottom: red solid 2px;
padding-bottom: 4px;
color: #fff !important;
}