'm using a font to create icons for my navigations in the following example :
http://www.blackcountrydesigns.co.uk/examples/green/
The problem I'm having is when you hover over a link you get an underline on both the link and the icon.
I want to know how can I remove the underline on the icon but keep it on the link.
Here's my code :
HTML
<ul class="hidden-phone">
<li><a class="entypo-home" href="#">Home</a></li>
<li><a class="entypo-briefcase" href="#">Services</a></li>
<li><a class="entypo-picture" href="#">Portfolio</a></li>
<li><a class="entypo-address" href="#">Contact</a></li>
</ul>
CSS
#nav ul li a {color:#ccc; margin-left: 25px;}
#nav [class*='entypo-'].active:before {color:#666;}
#nav [class*='entypo-']:before {font-size: 46px; position: relative; top: 5px;left: -3px; color:#999;}
[class*='entypo-']:hover:before {text-decoration:none !important;}
Many thanks
The only way I've found, as yet, to remove the (normally) inherited styles from the generated content is to give it position: absolute, using the simplified demo (from the comments):
a:link
{
text-decoration: none;
position: relative;
margin-left: 1em;
}
a:hover
{
text-decoration: underline;
}
a:before
{
content: '#';
position: absolute;
right: 100%;
top: 0;
bottom: 0;
width: 1em;
}
JS Fiddle demo.
The down-side of this approach, of course, is the requirement of an explicit width being assigned to the generated-content (and to the margin of the parent a element).
An alternative approach would be to wrap the text of the link in an element, e.g. span, remove underline from the 'a' and apply it to the span on hover.
<li><a class="entypo-home active" href="#"><span>Home</span></a></li>
[class*='entypo-'] a { text-decoration: none; }
[class*='entypo-'] a:hover span { text-decoration: underline; }
I'm afraid that doesn't work. I would suggest giving the class your <li/> and set the :before for those.
In case you don't want to use the position: absolute approach, here is a fiddle of my suggestion.
Related
I have a list element with two tags inside of it, anchor tag and a span - tag.
What I'd like to achieve is that when hovering over anchor tag, the actual
background would change to black where as the span tag's background would change to green.
Is this possible with CSS3 or do I need to use JavaScript?
I won't be pasting any code here, since it's pretty straight forward.
Thanks in advance!
Here's the CSS so far:
#left_control_links li a {
font-family: 'Open Sans', sans-serif;
font-size: 14px; padding: 15px 15px 15px 20px;
font-weight: 600; float: left; width: 83%;
color: #dfdfdf; text-decoration: none;
}
#left_control_links li a:hover {
background: #272727;
}
span.list_total_count {
display: inline-block; background-color: #2c2c2c; float:right; min-width: 31px;
color: #fcfcfc ;padding: 5px 0 5px 8px;
font-family: Verdana; font-size: 13px; position: relative; top: 0px; left: 15px;
}
HTML:
<ul id="left_control_links">
<li>
<a href="subjects">Subjects
<span class="list_total_count"><?=$total_subjects?></span>
</a></li>
<li>
<a href="staff_users">Users
<span class="list_total_count"><?=$total_users?></span>
</a></li>
<li>Kyselyiden seuranta</li>
</ul>
Sure
See this example:
http://jsfiddle.net/gWXhJ/
add the parent :hover and apply css added their children
<li>
this is link
<span>Text test</span>
</li>
For the code in question, CSS to change span background color on mouse over:
#left_control_links li a:hover span.list_total_count {
background: none #aaa;
}
I am posting this, cause CSS specificity may have main rule in similar examples. Very good article at: http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
I am trying to create a tree with indentations in pure CSS. I have been trying using something like:
ul.tree ul {
padding-left: 5px;
}
However I would like to have a separation between each item in the list. If I use the code above the separating bar gets indented as well so it's not too good.
Here is my current code (I do the indent directly in js, which I don't like): jsfiddle
Ultimately, I want to create something that basically looks like that:
Any idea how to do this in pure CSS? kudos for the simplest answers.
Simple with Multi-level Depth Support
UPDATED: Tweaked to accommodate hover
No extra HTML needed, no having to limit depth because of css selector chaining, as it supports any number of levels deep without having to adjust your css at all for those levels (no keeping track of "padding" to set on the next level deep).
This works well with only a two minor limitations (which I don't believe will factor into affecting you).
See fiddle demo.
Add a position: relative to your ul.tree, but keep all the child elements the default static position. Then change/add the following css:
ul.tree a {
display: block;
height:30px;
line-height: 30px;
padding-left: 15px;
}
/* this is making our bottom border, but sizing off the .tree ul width */
ul.tree a:before {
content: '';
height: 30px; /* match your <a> height */
position: absolute;
left: 0;
right: 0;
z-index: -1;
border-bottom-width: 1px;
border-bottom-color: lightgray;
border-bottom-style: solid;
}
ul.tree a + ul {
padding-left: 15px; /* this is your spacing for each level */
}
ul.tree a:hover:before {
background-color: #DDDDDD;
}
The limitations are that no child elements can have a position set and we are using a pseudo-element (which means it cannot be used for some other feature, but that is probably not an issue either).
For lists with unknown depths, I've used an absolutely positioned element for separating lines. It adds a little extra markup, but seems to work.
div.separator {
position:absolute;
left:0px;
right:0px;
border-top:1px solid lightgray;
}
<ul class="tree">
<li><a>Item1</a><div class="separator"></div></li>
<li><a>Item2</a><div class="separator"></div>
<ul>
<li><a>Item3</a><div class="separator"></div></li>
<li><a>Item4</a><div class="separator"></div></li>
<li><a>Item5</a><div class="separator"></div>
<ul>
<li><a>Item6</a><div class="separator"></div></li>
</ul>
</li>
</ul>
</li>
</ul>
http://jsfiddle.net/7u87c/20/
This CSS makes the link inside a nested li have a padding-left of 30px, and I add another nested li link have padding-left: 60px.
ul.tree li ul li a {
padding-left: 30px;
}
ul.tree li ul li ul li a {
padding-left: 60px;
}
http://jsfiddle.net/7u87c/5/
No extra markup and use of icon image.
Pretty simple and dynamic based on the content.
Sample HTML:
<ul class="tree">
<li><span>public</span></li>
<li><span>server.js</span></li>
<li>
<span>server</span>
<ul>
<li><span>webfs</span></li>
</ul>
</li>
<li><span>specs</span></li>
<li>
<span>src</span>
<ul>
<li>
<span>core</span>
<ul>
<li><span>CellAddress.js</span></li>
</ul>
</li>
</ul>
</li>
</ul>
CSS:
ul.tree {
border-top: 1px solid grey;
}
ul.tree, ul.tree ul {
padding: 0;
margin: 0;
list-style: none;
}
ul span {
display: block;
padding-left: 25px;
border-bottom: 1px solid #666;
height: 25px;
line-height: 25px;
background: url("http://lorempixel.com/10/8/") no-repeat scroll 5px 8px transparent;
}
ul ul span {
padding-left: 35px;
background-position: 15px 8px;
}
ul ul ul span {
padding-left: 45px;
background-position: 25px 8px;
}
Please see example
Note: You can convert the spans into a tags
I'm fairly new to CSS. I've been studying on how to put up a horizontal menu with CSS by the given example. The html source code is as follows:
<ul>
<li>Home</li>
<li>Products</li>
<li>Services</li>
<li>About</li>
<li>Contact</li>
</ul>
and the style sheet is as below.
body {
background-color: #000;
}
* {
margin: 0;
padding: 0;
}
ul {
list-style-type: none;
background-image: url(navi_bg.png);
height: 80px;
width: 663px;
margin: auto;
}
li {
float: left;
}
ul a {
background-image: url(navi_bg_divider.png);
background-repeat: no-repeat;
background-position: right;
padding-right: 32px;
padding-left: 32px;
display: block;
line-height: 80px;
text-decoration: none;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 21px;
color: #371C1C;
}
ul a:hover {
color: #FFF;
}
All this code display the horizontal menu perfectly, but I don't quite understand on how it is organized.
My question is: why do we need to set the display property of the anchor that is contained in the <li> tag to "block"? I learned that the anchor tag itself is inline element naturally. Does this mean by doing so it give the anchor tag ability to be displayed as block? So, I we can treat them as block in setting background and padding?
any help would be very much appreciated.
Adding display:block to the <a> element is not mendatory, but one advantage of it is it will take the full size of his parent (<li>) if you specify one (specially the height).
Also, since you're applying a background to the link, it's always a good thing to display it as a block, since most of the time you need to specify an height.
I use the following menu:
<ul id="menu">
<li class="subMenu">
<h2><span>menu item</span></h2>
<div>
<p><span>submenu item</span></p>
</div>
</li></ul>
I have the following css:
ul#menu {
float:right;
height:80px;
color: #FFF;
margin: 0;
padding: 0.8em 0em;
}
ul#menu li {
display: inline;
margin: 0.1em 1em;
position: relative;
}
ul#menu h2,ul#menu h3 {
font-size: 1em;
font-weight: bold;
display: inline;
}
ul#menu li a {
text-decoration: none;
}
ul#menu li a:hover {
text-decoration: underline;
}
ul#menu li.subMenu a {
padding: 0 1.2em;
}
ul#menu li.subMenu a:hover {
text-decoration: underline;
}
ul#menu div {
display: none;
}
ul#menu li.subMenu div {
border: 1px solid #fff;
width: 125px;
position: absolute;
top: 2.5em;
left: 30px;
background: #fff;
color: #000;
}
ul#menu li.hovered div {
display: block;
}
ul#menu li.subMenu div a {
text-decoration: none!important;
}
can anybody advise how i can keep menu item hovered when i hover over the submenu item
thank you in advance.
Quick solution in jsFiddle. (See the comments in the CSS to find out what I've changed.)
You are most of the way there already. Replacing the ul#menu li.hovered div selector in your CSS with ul#menu li:hover div is most of the battle; the rest is adjusting the submenu position so that you can actually hover over it without it disappearing. (In the jsFiddle above I've simply used padding instead of offsetting with absolute positioning.)
However, please pay attention to the commenters above! Their observations are entirely correct and germane:
The markup being used is rather heavy and unorthodox. For example, your submenu "items" are paragraphs in a div, but normally I would expect to see just a nested list; also, the spans seem unnecessary, and you don't need the submenu class on the list items when you already have an ID on the parent ul.
Second, they are also correct that there are plenty of great tutorials and examples for this out there, so while rolling your own worthwhile exercise you don't need to do it alone—nor should you! My first introduction was this old A List Apart article, and you can even ignore the whole section about JavaScript/Suckerfix since it's 2011 and most of us are perfectly happy to forget about IE6.
http://www.devinrolsen.com/pure-css-horizontal-menu/
You could use li:hover to keep the contents of the li tag displayed. You could also follow this simple tutorial on creating a pure CSS hover menu.
Been trying to get a "pure css" dropdown
been trying for days to get a "simple" css drop down nav going can get the top level displayed and the second level hiding but can't make the sub items display on hover?? any help much appreciated sample Isolated is here::
css and html below paste bin
http://www.webdevout.net/test?01t
Your problems are probably because you've constructed your html wrongly. The sub-menu (.level-two) should be nested within the .level-one li elements:
<div id="navtree">
<ul class="level-one">
<li>about</li>
<li>contact</li>
<li>subscribe</li>
<li>Test1
<ul class="level-two">
<li>Test1sub</li>
</ul>
</li>
<li>Test2
<ul class="level-two">
<li>Testsubpage2</li>
</ul></li>
</ul>
</div>
If you then use the following css:
.level-one {display: inline; position: relative; }
.level-one {display: none; position: absolute; left: 0; top: 1em; /* adjust as necessary */ }
.level-one:hover .level-two {display: block; }
I think that should be enough to get you started. Feel free to ask any questions in comments, or update your question.
Also, since I'm assuming you're fairly new to this, I'd like to offer you the following references:
For all things snazzy and wonderful with CSS menus: CSS Play, by Stu Nicholls.
For an intro to some of the hows and whys: A List Apart.
A brief introduction, from Eric Meyer.
There are dozens, if not hundreds, more to be found...
The second level <ul> level must be children, you have this:
<li>Test2</li>
<ul class="level-two">
<li>Testsubpage2</li>
</ul>
Change to this:
<li>Test2
<ul class="level-two">
<li>Testsubpage2</li>
</ul>
</li>
Here is the css I'm sort of happy with that implements three level dropdown So far only tested in FF:
/* Inserted by Tom Brander for nested nav Allows for Three levels.. pattern can be extended if you want */
ul.level-one{
margin-left:-10px; /* lines up 1st item with search box*/
}
ul.level-one li{
list-style: none;
padding-right: 5px;
padding-left: 5px;
float: left;
position: relative;
line-height: 1.3em;
}
ul.level-one li:hover {
background:#999ca0;
}
.level-two {
display: none;
position :absolute;
Left:0;
top: 1em;
}
.level-three {
display: none;
position :absolute;
top: 0em;
}
.level-one li:hover .level-two {
display: block;
background: #999ca0;
width: 100px;
padding-left: 10px;
}
.level-two li:hover .level-three {
display: block;
background: #999ca0;
width: 100px;
padding-left: 10px;
margin-left: 92px; /* this moves the 3rd level over to the right but not too far, needs enough overlap so that you can move the mouse wthout the third level dissapearing */
}
.level-three li:hover {display:block;}