I have a simple nav list. Typical set up, where the active page li item has the id "active".
I want to be able to keep the active page as a link, have a solid border underneath, but have a dashed border on the li items without the "active" id.
How can I achieve this without having the active tag being overwritten with the dashed border-bottom?
Here's the code for the list:
<div id="nav_bar">
<ul id="nav_list">
<li id="active">About</li>
<li>Design</li>
<li>Photography</li>
</ul>
</div>
jsFiddle Example
Since borders are already being applied to each a, make the :hover only apply to li that are not #active by using :not().
Change:
#nav_list li a:hover{
border-bottom:1px dashed #666;
}
#active a{
border-bottom:1px solid #666;
}
#nav_list li#active a:hover{
border-bottom:1px dashed #666;
}
To:
li#active a{
border-bottom:1px solid #666;
}
#nav_list > li:not(#active) a:hover{
border-bottom:1px dashed #666;
}
DEMO:
http://jsfiddle.net/FaESR/1/
NOTE: Make sure to use class instead of id if you plan on having more than one instance of #active, since id must be unique!
Happy coding!
Related
I constantly fail to prevent a submenu item from inheriting the color of a top item. I know that similar questions have been asked already but am sorry to not be able to solve my problem using them.
CSS:
.Topmenu a{
color:black;}
.Topmenu.update a{
color:blue;}
.Submenu a{
color:black;}
Now the Menu itself looks like this:
<div id='Mainmenu'><ul>
<li class='Topmenu update'><a href='Link1'>Link1</a><ul>
<li class='Submenu'><a href='Link2'>Link2</a></li>
</ul></li>
Now the submenu Link still is blue. What am I doing wrong?
Edit: Sorry for the confusion, it's a 2D-Menu, the Main Menu(Topmenu items) is horizontal with vertical Topmenu's (Submenu Item).
It is because of specificity. The .Submenu class is overwritten by .Topmenu.update. To avoid this, put .Topmenu.update in front of the .Submenu class.
.Topmenu a {
color: black;
}
.Topmenu.update a {
color: blue;
}
.Topmenu.update .Submenu a {
color: black;
}
<div id='Mainmenu'>
<ul>
<li class='Topmenu update'><a href='Link1'>Link1</a>
<ul>
<li class='Submenu'><a href='Link2'>Link2</a></li>
</ul>
</li>
</ul>
</div>
The problem is from your css. it should look like this;
.Topmenu a {
color: black;
}
.Topmenu, .update a {
color: blue;
}
.Submenu a {
color: black;
}
Notice the second block has a comma and space after the first class.
Although your HTML does have an error, it should still not affect the CSS from working right. and yes you have to fix your html it does not look right. so fix from #zowie's correction.
Let me know.
Use > for the first level:
.Topmenu a{
color:black;
}
.Topmenu.update > a{
color:blue;
}
.Submenu a{
color:black;
}
I have this navigation links and upon hovering the last link (styled as button), I want it to have a property of bottom border of color pink instead of brown upon hover to complement the color red button. Your help is appreciated. Thanks in advance!
.header-nav a:hover {
border-bottom: 5px solid rgb(56,47,50); /*brown border-bottom*/
}
.header-nav a:last-of-type:hover {
border-bottom: 5px solid rgb(255,144,171); /*pink-border-bottom*/
}
<nav class="container header-nav">
<ul>
<li>Home</li>
<li>Cupcakes</li>
<li>Cakes</li>
<li>Events</li>
<li>Order Now!</li>
</ul>
<br>
</nav>
Here's the fiddle:
https://jsfiddle.net/ssqLspsn/
i DID IT!!! https://jsfiddle.net/Please_Reply/9hk6okpd/2/ hope this is what you want!!!
.header-nav a:hover {
border-bottom: 5px solid rgb(56,47,50); /*brown border-bottom*/
}
.header-nav .btn:hover {
border-bottom: 5px solid rgb(255,144,171); /*pink-border-bottom*/
}
I DID IT!!! Look here https://jsfiddle.net/Please_Reply/9hk6okpd/2/ hope this is what you want!!!
.header-nav a:hover {
border-bottom: 5px solid rgb(56,47,50); /*brown border-bottom*/
}
.header-nav .btn:hover {
border-bottom: 5px solid rgb(255,144,171); /*pink-border-bottom*/
}
Try to put some class to the button (last element)
You css is fine although
like
<div class="header-nav">
<a>some text</a>
<a>some text</a>
<a class="btn">some text</a>
</div>
css
header-nav .btn:hover {
border-bottom: 5px solid rgb(255,144,171); /*pink-border-bottom*/
}
If you want to keep your css selectors, you should select on li, not a
Raplace .header-nav a:last-of-type:hover with .header-nav .li:last-child a:hover
maybe you will put id or class name for last li and make css code the specific id :)
The best thing to do when checking which css is applied on hover is to have the hover attribute active from the console.
You can do this both in firefox and chrome by going to the inspector.
Here is the guide to seeing how to activate the hover attribute
See :hover state in Chrome Developer Tools
As for your specific problem it would help if you also posted your html, because css will not work if you're applying the style to a wrong element.
.header-nav li:hover {
border-bottom: 5px solid rgb(56,47,50); /*brown border-bottom*/
}
.header-nav li:last-of-type:hover {
border-bottom: 5px solid rgb(255,144,171); /*pink-border-bottom*/
}
Good Luck!
Hi my website is http://eeeonlinecourse.com/
I would like to style my menu bar using border-bottom property as follows:
header#top nav ul li a:hover{
border-style: solid;
border-bottom: thick solid #27CCC0;
}
header#top nav ul li a:active{
border-style: solid;
border-bottom: thick solid #27CCC0;
}
I have added these two lines into my child theme's stylesheet. However it does not seem to be working. Right now only the hover property is working fine. I have added an active selector after my hover selector but it is still not showing the bottom-border when the menu link is active. What should I add into my stylesheet?
Is it right?.Let's say when user click "Home", the bottom border will appear (under "Home" link).If so, just adds the css (your css) as shown in attached image. (.current_page_item) is the class added for CURRENT (selected) li. If home selected, then border-bottom will appear.
header#top nav .sf-menu li.current_page_item > a,
header#top nav .sf-menu li.current-menu-item > a,
header#top nav .sf-menu li.current_page_item > a
{
border-style: solid;
border-bottom: thick solid #27CCC0;
}
If you want to see the live demo whether it works just like what you want, you can go to "inspect element" and click on 1(in my attached image).Then, add the css to 2(in my attached image).
And, Good Luck..Sorry if this is not the answer.
Looking at your given code and reference site it seems that you have issue with active link only right?
If so than you can simply remove a.active because there is no active class applied to link.
Instead use
header#top nav ul li.current_page_item > a {
border-style: solid;
border-bottom: thick solid #27CCC0;
}
I hope this will solve your problem.
Try giving: current-menu-item is the active menu link.
li.current-menu-item a:active{ border-style: solid;
border-bottom: thick solid #27CCC0; }
Hope this helps.
I have been trying to create a border-color change hover effect with CSS and something seems to not be working properly. Here is my code:
Markup:
<ul>
<li class="hover">
<img src="img/content/lighter.png" alt="lighter"/>
<p>Discusing Strategy</p>
</li>
<li class="triangle"></li>
<li class="hover">
<img src="img/content/wrench.png" alt="wrench"/>
<p>Beginig <br/> Designs & Development</p>
</li>
<li class="triangle"></li>
<li>
<img src="img/content/car.png" alt="car"/>
<p>Delivering Product</p>
</li>
</ul>
CSS:
div#bpath ul li.triangle {
width: 0;
height: 0;
border-top: 95px solid #d0dde5;
border-left: 20px solid #c1c1c1;
border-bottom: 95px solid #d0dde5;
}
div#bpath ul li.hover:hover li.triangle {
border-left-color: #5f9999;
}
What am I doing wrong here? I used the same technique to change the color of the p element and that worked. Why dosen't the border color change work?
Your selector:
div#bpath ul li:hover li.triangle
is trying to match a li element of class 'triangle' within an li. As you don't appear to have a nested list (therefore no li elements within other li elements) this doesn't seem able to work.
If you remove the latter li (li.triangle) to give (all, or one, of) the following:
div#bpath ul li:hover,
#bpath ul:hover li.triangle:hover,
#bpath ul:hover li.triangle,
#bpath ul li.triangle:hover {
border-left-color: #5f9999;
}
this might work. Assuming your posted-HTML is correct.
If you want all triangle li's to be changed use this:
div#bpath ul:hover li.triangle{
border-left-color: #5f9999;
}
If you want just the next triangle element it's more tricky but you can try this:
div#bpath ul li:hover + li.triangle {
clear:both;
}
I think this doesn't work on ie. If you want it to work on IE i would go for jquery.
you should use this way,
div#bpath ul li.triangle:hover {
border-left-color: #5f9999;
}
you can use this fiddle, which changes the triangles color and adapt it to clarify your question. http://jsfiddle.net/j7YSu/1/
(or just accept it as the right answer :))
i had some issues with your code, but maybe this fiddle will help: http://jsfiddle.net/j7YSu/3/
I need to style a regular html list like the following picture:
as you see each each list item has a padding on the sides and a top&bottom border. When hovered the border has a width of 100% of the <ul> item.
Now the problem actually is: when you give each <li> element a top & bottom border I have a border of 2 px between each element (bottom border from the first element and the top border from the second element), I don't want that however I do not know any solution for this.
my html:
<div id="tab_top" class="tab">
<div class="bottom">
<div class="cont">
<ul>
<li>Here’s a Sample Post <span class="ct">32</span></li>
<li>Here’s a Sample Post <span class="ct">32</span></li>
<li>Here’s a Sample Post <span class="ct">32</span></li>
<li>Here’s a Sample Post <span class="ct">32</span></li>
<li>Here’s a Sample Post <span class="ct">32</span></li>
<li>Here’s a Sample Post <span class="ct">32</span></li>
<li>Here’s a Sample Post <span class="ct">32</span></li>
</ul>
</div>
</div>
</div>
my css:
#tabs .tab div.cont ul li a{line-height:30px; height:30px; color:#3ca097; display:block; padding-left:11px; padding-right:13px; width:259px;}
#tabs .tab div.cont ul li a span.ct{float:right;background:url(images/count_comments.gif) no-repeat left top; height:13px; padding-left:16px; margin-top:10px; line-height:12px;}
#tabs .tab div.cont ul li a:hover{color:#fff; background-color:#6fd2c8; border-top:1px solid #7db9b2; border-bottom:1px solid #7db9b2; height:28px; line-height:28px;}
#tabs .tab div.cont ul li a:hover span.ct{background-position:left bottom; color:#23665f; margin-top:9px;}
I would be pleased if you can help me
Yours truthfully
If you use border-top and border-bottom, you are correct, you will get a 1px border, if however you use both, then specify li+li like so:
.tab div.cont ul li { border-top: 1px solid black; border-bottom:1px solid black; }
.tab div.cont ul li + li { border-top:none; }
You will get what you claim to want.
You could just use a bottom border and for the first also include a top border..
either use an extra class for the first item, or use the :first-child pseudo-class (which is not supported on IE6)
As Pekka suggested, prior to deleting his answer, the obvious solution is to amend this style:
#tabs .tab div.cont ul li a:hover{color:#fff; background-color:#6fd2c8; border-top:1px solid #7db9b2; border-bottom:1px solid #7db9b2; height:28px; line-height:28px;}
to become:
#tabs .tab div.cont ul li a:hover{color:#fff; background-color:#6fd2c8; border-bottom:1px solid #7db9b2; height:28px; line-height:28px;}
Not terribly 'adv.', really...Unless we're both missing something?
Remove either the top or bottom border and then set an inline style on the first or last li to add the one border that would seem to be "missing."