The problem is that I have a task to make a white dot when the item menu is hover . ( picture below) . I am asking for help, because it is very important for my order. If need be, I'll pay.
Page is on draft : dalaindustrisupport.shapehosting.se
Example
I'm not good in CSS codes. Usually taking stock settings of plugin.
Try this:
li {
list-style: none;
background-color: blue;
color: white;
}
li:before {
content: "• ";
color: white;
visibility: hidden;
}
li:hover:before {
visibility: visible;
}
<ul>
<li>Hover Here</li>
</ul>
Related
the text is cascading downwards for unknown reasons
I'm taking a high-school web design class and as an extension project I'm creating a faux restaurant advertisement website. My coding for a top navigation bar is correct as far as I can see and my teacher doesn't know how to help me get the text and navigation box centered and next to each other. All the links work how they're supposed to, they just aren't in the right place >:(
My css code for navigation bar
Remove the css property float: left from .topnav a and make .topnav li display: inline-block
Sounds like you guys need a new teacher lol. But on the other hand, he makes you find out the problem by "yourself", which is nice.
body {
background: #2f4f4e;
}
.topnav {
background-color: #333;
overflow: hidden;
}
.topnav li {
display: inline-block;
}
.topnav a {
color: #f2f2f2;
text-align: center;
padding: 16px 16px;
text-decoration: none;
font-size: 20px;
font-family: Palatino;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #4CAF50;
color: white;
}
<nav class="topnav">
<ul>
<li>Takeout Options</li>
<li>Kid's Menu</li>
<li>Our Mascot</li>
<li>Our Founder</li>
<li>Back Dumbster: Schedule and Guideline</li>
</ul>
</nav>
I have text-decoration: underline on a and I would need to keep it like that. But I am also trying to remove the underline from the pseudoelement, overriding it with text-decoration: none !important; seems to have no effect. Can something be done about it?
http://codepen.io/anon/pen/yMzJoZ
a {
text-decoration: underline;
}
a:before {
content: '#';
text-decoration: none !important;
}
<ul>
<li>
asdf
</li>
</ul>
Your pseudoelement is just an inline text node, which can't really be modified too easily without changing it's display type. Add display: inline-block; - this should allow you to manipulate it independently.
a {
text-decoration: underline;
}
a::before {
content: '#';
text-decoration: none !important;
display: inline-block;
}
<ul>
<li>
asdf
</li>
</ul>
'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.
On google homepage, if you click the more button, a menu opens below just that button, like this:
How can I do a similar thing with one of the tabs in the navigation bar of my website using css/javascript/jquery?
Edit: To be more specific, I'm wondering how to accomplish the CSS part of this, i.e:
How to make an up/down arrow graphic show on the tab when the dropdown is toggled. (i.e when toggled, show down arrow, when not, up arrow). (Rather than just putting an <img> i'd rather use a background-image to toggle the arrows)
How to have the new list pop down below the tab and aligned with it.
This is an example for one way this could be done. Of course, you can experiment with diff methods and stuff, but this is a basic working solution.
A dropdown element to be toggled by clicking a link is pretty good.
<div id="topBar">
<a href="#" id="more">More
<span id="arrow">
<span id="arrdown">▼</span>
<span id="arrup">▲</span>
</span>
</a>
<div class="dropdown">
One
Two
Three
</div>
</div>
Then you make it toggle with a JS click.
$('#more').click(function() {
$(this).toggleClass('active');
$(this).next('.dropdown').toggle();
return false;
});
$('.dropdown a').click(function() {
return false;
});
css:
body { background: #fee; font-family: calibri; }
#topBar { text-align: right; background: black; color: white; padding: 5px; }
#topBar a { color: white; text-decoration: none; padding: 5px 7px; }
#topBar a:hover { background: #ddd; color: black; }
#topBar a.active { background: white; color: black; }
.dropdown { display: none; position: absolute; right: 5px; background: white; color: black; }
.dropdown a { display: block; color: black !important; text-decoration: none; padding: 5px 7px; }
.dropdown a:hover { background: #ccc; }
#arrup { display: none; }
#arrow { font-size: 0.6em; }
Here's a live example with CSS: http://jsfiddle.net/ZUPBj/
There are many different approaches to this, one of the simplest:
Create a hidden div that get's toggled when the menu item is clicked.
<div class="menu"></div>
<div class="dropDown"></div> <!-- Hidden by default -->
<script>
$(".menu").on("click",function(){
$(".dropDown").toggle();
});
</script>
JsFiddle
Some googling will find you plenty of tutorials online. I searched for "building drop down menus in html". These links below are some of the better tutorials I found.
http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-a-kick-butt-css3-mega-drop-down-menu/
http://www.onextrapixel.com/2011/06/03/how-to-create-a-horizontal-dropdown-menu-with-html-css-and-jquery/
http://youhack.me/2011/09/18/how-to-build-a-drop-down-menu-enhanced-with-css3/
Basically what they're doing is displaying a hidden div when the user hovers over the first level of the 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;}