I'm not sure why my CSS is not hitting my HTML and styling it correctly.
HTML:
<li class="dropdown">
Page 2 <b class="caret"></b>
<ul class="dropdown-menu">
<li>Page 2.0.0 </li>
<li class="divider"></li>
<li>Page 2.0.1 </li>
<li class="divider"></li>
<li>Page 2.0.2 </li>
</ul>
</li>
CSS:
.dropdown-menu li:hover{
background-color: green;
}
The class dropdown-menu should be hit and then when you hover over the li's inside it. I have tried adding an id as dropdown menu and changing the CSS to #dropdown-menu but it made no difference.
Also, is there an easy way to find out exactly how to hit the appropriate element as I find this is a frequent problem?
Ok here we go,
here is the working solution of your problem,
.dropdown-menu > li > a:focus,
.dropdown-menu > li > a:hover {
clear: both;
background-color: green !important;
background-image:none !important;
display: block;
font-weight: 400;
line-height: 1.42857;
padding: 3px 20px;
white-space: nowrap;
color: black !important;
}
i have just edited your code
http://jsfiddle.net/bf1cyptm/1/
:)
Try adding !important in CSS like:
.dropdown-menu li a:hover{
background-color:green !important;
}
If it does not work it could possibly be some other CSS code that is not letting it happen. So the solution to it is to do an inspect element and see which element is affecting it.
If you are not expert in than a best solution for you.
Please add a new class just after dropdown-menu like:
<ul class="dropdown-menu colorchange">
and call CSS by it like:
.colorchange li a:hover{
background-color: green;
}
It should work! You can use important here as well.
Try this
.dropdown-menu li:hover .dropdown-menu li a{
color: green;
}
Related
I got a problem with the CSS hover-event.
I created a page with a navigation bar at the top. For compatibility reasons I had to move away from nav and changed it to a simple div. (nav is not known in IE8, but it still has to be working there.)
<div class="nav">
<ul>
<li> <a> Something </a>
<ul>
....
</ul>
</li>
....
</ul>
</div>
That resulted in making the hover on my navigation bar not working anymore. But it's not, that nothing is working, only the first one of the following lines does not do it's job anymore. The background simply does not change.
.nav ul li:hover { background: #BFBFBF; } - not working
.nav ul li:hover > a { color:#FFFFFF; } - working perfectly fine
.nav ul li:hover > ul { display:block; } - working perfect as well
.nav ul {
background: #404040;
list-style:none;
padding:0 20px;
margin: 0;
height: 30px;
text-align:left;
display:block;
}
I double checked basically everything I know, suspected or found, that could be the source of my issue, but I was yet unable to get it back working.
I tried using background-color instead of background, without success.
I want to do it without having to use anything besides HTML and CSS, which should be possible, since it worked, when I still was using the nav-element.
I am noob to css, maybe I'm missing some really simple detail.
Thanks in advance.
Rather than modifying the nav bar content, just try to change the animation for the thing which you are pointing at, I mean that rather than hovering the <li> component just make the text in it hovering
.nav a {
text-decoration: none;
color: #fff;
display: block;
padding-left: 15px;
border-bottom: 1px solid #888;
transition: .2s background-color;
}
.nav a:hover {
background-color: #005f5f;
}
.nav a.active {
background-color: #aaa;
color: #444;
cursor: default;
}
Try defining the <a> element and hovering it as the whole <li> won't hover with multiple overlapping CSS formats
See I created something in html. And your code is working.
Its good if you can paste your html
<head runat="server">
<title></title>
<style type="text/css">
.nav ul li:hover {
background: #BFBFBF;
}
.nav ul li:hover > a {
color: #FFFFFF;
}
.nav ul li:hover > ul {
display: block;
}
</style>
<nav class="nav">
<ul>
<li>
<a>Li 1</a>
</li>
<li>
<ul>
<li>Li 2
</li>
</ul>
</li>
<li>Li 3
</li>
</ul>
</nav>
I am having trouble changing the top-bar section of a Foundation site to a different colour.
I have created a custom style.css for this.
I can change most of the top-bar color but NOT the right hand drop down list side (I don't have a list on the left). Clicking a link on the drop down changes colour of the nav bar but the nav bar component at the top does not change other than this (hope this makes sense?)...
This is the basic HTML:
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right">
<li class="divider"></li>
<li class="has-dropdown">
Sections
<ul class="dropdown">
<li>####</li>
<li class="divider"></li>
<li>####</li>
<li class="divider"></li>
<li>####</li>
<li class="divider"></li>
<li>#####</li>
<li class="divider"></li>
</ul>
</li>
<li class="has-dropdown">
Links
<ul class="dropdown">
<li>####</li>
<li class="divider"></li>
<li>####</li>
<li class="divider"></li>
<li>####</li>
<li class="divider"></li>
</ul>
</li>
</ul>
</section>
This is my attempt at changing it using style.css:
#charset "UTF-8";
.top-bar {
background-color: #2D4DC7;
}
.top-bar-section ul {
background-color: #2D4DC7;
}
.top-bar-section ul.right {
background-color: #2D4DC7;
}
.top-bar-section li a:not(.button) {
background-color: #2D4DC7;
}
.top-bar-section ul li.active > a {
background-color: #2D4DC7;
/** Changes the hover state of non active menu items **/
.top-bar-section li:hover a {
background-color: #2D4DC7;
}
.top-bar-section ul li > a {
background-color: #2D4DC7;
}
.top-bar-section ul.dropdown li a:hover:not(.button) {
background-color: #2D4DC7;
}
.top-bar-section ul.dropdown {
background-color: #2D4DC7;
}
.top-bar-section .has-dropdown > a:after {
background-color: #2D4DC7;
}
I am pretty sure it is just syntax that I am having issues with. Something to do with the 'right' class I think???
Any help please?
Many Thanks
I strongly suggest you use a browser such as Firefox with Firebug installed.
Load any page, hit Tools > Web Developer > Inspector (or its hot key equivalent), then click on your object, the HTML code inspector will reference the exact line of the css file that is governing the style being generated (either the style directly, or the computed style).
Time and sanity saver.
After several attempts and some help from Zurb support the CSS i needed was:
.top-bar-section .dropdown li:not(.has-form) a:not(.button) {
color: white;
background: #740707;
}
Thanks for the help
If you use the SCSS/SASS version of foundation you should change the defaultvalues for the topbar.
The defaultsettings are stored in _settings.scss.
For example to change it to cornflowerblue I used these settings:
$topbar-bg-color: cornflowerblue;
$topbar-bg: $topbar-bg-color;
$topbar-link-bg-hover: scale-color($topbar-bg, $lightness: -14%);
$topbar-link-bg-active: $topbar-bg;
$topbar-dropdown-bg: $topbar-bg;
$topbar-dropdown-link-bg: $topbar-bg;
$topbar-dropdown-link-bg-hover: scale-color($topbar-bg, $lightness: -14%);
Trying to change individual links in navbar to different colors when hovered. Can't seem to figure it out.
HTML:
<div class="collapse navbar-collapse navbar-right navbar-main-collapse">
<ul class="nav navbar-nav">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="hidden">
</li>
<li class="page-scroll">
1
</li>
<li class="page-scroll">
2
</li>
<li class="page-scroll">
3
</li>
<li class="page-scroll">
4
</li>
</ul>
</div>
CSS:
.navbar-custom li a:hover,
.navbar-custom .nav li a:focus,
.navbar-custom .nav li.active
{
outline: 0;
background-color: #bdc3c7 !important;
color: #fff;
}
Have the current links set to red. But would like each individual link to have a different color. E.g. Link1 = Red, Link2 = Blue.
I am having trouble doing this! Help appreciated!
Thanks!
if you use SASS, it could be done in a more cleaner way like this in your scss file:
$colors: (1: red, 2: blue, 3: yellow, 4: black);
#each $anchor, $color in $colors {
#{".navbar-custom .nav li:nth-child("+ (1 + $anchor) + ") a:hover"} {
background-color: $color;
}
}
which will generate the CSS:
.navbar-custom .nav li:nth-child(2) a:hover {
background-color: red;
}
.navbar-custom .nav li:nth-child(3) a:hover {
background-color: blue;
}
.navbar-custom .nav li:nth-child(4) a:hover {
background-color: yellow;
}
.navbar-custom .nav li:nth-child(5) a:hover {
background-color: black;
}
Now you could add as many as different colors for all your links and let the SASS generate the CSS for you.
Yeah, just need to class them up uniquely
HTML
<li class="hidden colour1">
</li>
<li class="page-scroll colour2">
1
</li>
<li class="page-scroll colour3">
2
</li>
CSS:
.colour1:hover { background-color:blue; }
.colour2:hover { background-color:red; }
.colour3:hover { background-color:green; }
You would need to assign their CSS for each individual class and give the different link different class
like
.pagescroll1{
}
.pagescroll2{
}
and the call them from your HTML
The elegant solution is to select by attribute value. example for the first one:
a[href="#link1"]:hover,
a[href="#link1"]:active,
{
outline: 0;
background-color: #bdc3c7 !important;
color: #fff;
}
however, this works only when you're directly selecting the a-elements. With your third selector li.active, there is no information in that element as to where it links. in this case, you'll have to add classes as suggested by rob.
Ok hey guys.
So what I try to acheive is to have a menu in the topnav of my site and when hovring the mouse over to show some stuff in a list under it.
so far I'm working on local on a test html file until I get it working.
so what i got so far is this menu:
<ul id="menu">
<li>Notifications
<ul>
<li id="foot-notify-954>
Xtesting left a comment for your blog 22 hours ago
</li>
<li id="foot-notify-953>
X
<p>testing left a comment for your blog <span>22 hours ago</span></p>
</li>
</ul>
</li>
and my css code:
ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}
ul li {
display: block;
position: relative;
float: left;
}
li ul { display: none }
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #2C5463;
margin-left: 1px;
white-space: nowrap;
}
ul li a:hover { background: #617F8A }
li:hover ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
font-size: 11px;
}
li:hover a { background: #617F8A }
li:hover li a:hover { background: #95A9B1 }
I think the problem is that I'm having more than 1 <a> hyperlink inside the notifications <li>
id like each li notification to show in 1 line, as in the format, the X button at the start to remove it then the notification itself.
First, you have to check the html syntax:
list should looks like this:
<ul>
<li>Coffee</li>
<li>Tea</li>
<li><a href='#'>Milk</a></li>
</ul>
This tool helps you find the errors (red highlighted):
http://jsbin.com/emowir/1/edit
Here is your example:
<ul id="menu">
<!-- type 1: NOT drop down-->
<li>Home</li>
<!--type 2: drop down-->
<li>About Us
<ul>
<li>The Team</li>
<li>History</li>
<li>Vision</li>
</ul>
</li>
</ul>
What would you like to insert and where?
Your problem does seem to be bad code formatting. This is a clean and edited version of your code. The code "breaking" is an issue of CSS formatting. Using inline-blocks instead of blocks helps get things lined up properly, and shifting the background style to the <li> rather than the <a> makes it look better.
Your problem is the following:
ul li a {
display: block;
This makes every link you insert into the list a block. Try start to float things like in this example I made from your code, http://jsfiddle.net/xN8sc/1/
I am trying to setup a menu with sub menu that contains ul. My question is how to remove the sub ul menu background image that inherits from the menu ul. I appreciate any help. Thanks a lot!
my html
<ul id="menuBar">
<li id="test1">test1</li>
<li id="test2">Pro1
<div class="subMenu">
<ul>
<li>sub1</li> //all li a would get the same
//backgroundimage btForTest2.jpg
// butI just want a clean background
<li>sub2</li>
<li>sub3</li>
</ul>
<ul>
<li>Volleyball</li>
<li>Walking</li>
<li>Water Shoes</li>
</ul>
</div> <!--end of submenu-->
</li>
</ul>
CSS:
#menuBar #mens a{
background:url("../images/btForTest2.jpg") no-repeat;
display:block;
border-right:1px solid #ffffff;
width:112px;
height:37px;
}
.subMenu li a{
list-style:none;
margin: 0;
padding: 5px;
width: 200px; //width is 112px not 200 px
float: left;
color:#ffffff;
text-decoration:none;
}
.subMenu li a
{
background: none;
}
if it is not sticking, you can add the !important flag
.subMenu li a
{
background: none !important;
}
Add the following to the .subMenu li a section:
background:none !important;
Edit: Opened tab before durilai answered, so I didn't see his answer...
Instead of adding another rule to overwrite the mistake, rewrite the selector on your first rule to only apply to the outer list items:
#menuBar > li > a {
background: red;
}
> means a direct descendant.