I within my li element I have a link and some text contained within a span.
When I hover over the li I want to change the colour of the text and link, this works well, however I am struggling to set a visited colour and keep this functionality.
Here is my code -
HTML -
<ul id="progress" class="tour_1">
<li>
<span class="number">1</span>
<span class="desc">A Link</span>
</li>
</ul>
CSS -
#progress li { float: left; width: 20%; text-align:center; font-size: 12px; color: #CCC; z-index: 10 }
#progress li .number { font-size: 24px; font-weight: 400; border: 2px solid #CCC; border-radius: 40px 40px 40px 40px; -moz-border-radius: 40px 40px 40px 40px; width: 30px; height: 30px; display: block; margin: 0 auto; background-color: #FFF }
#progress li:hover, li:hover a:hover { color: #333; }
You need to set a visited state like:
#progress li:hover a:visited
{
background-color:yellow;
}
http://www.w3schools.com/cssref/sel_visited.asp
Related
i make a drop down menu with css, but i want to ask you, how can i add secondary drop down to the first? If it can't be made with this code, how can i make it? I try to use droppy, but the code bugged i mean the style..
I use this HTML:
<ul id="menu">
<!-- put class="selected" in the li tag for the selected page - to highlight which page you're on -->
<li class="selected">Index</li>
<div class="dropdown">
<li>Drop Down</li>
<div class="dropdown-content">
Link 1
Link 2
Link 3 --> Here i want to add another drop down menu
Link 4
</div>
</div></ul>
And this CSS:
ul#menu
{ float: right;
margin: 0;}
ul#menu li
{ float: left;
list-style: none;
margin: 2px 2px 0 0;
background: #5A5A5A url(tab.png) no-repeat 0 0;
border-top-right-radius: 1.5em;
border-top-left-radius: 1.5em;
overflow:hidden;
max-height: 27px;}
ul#menu li a
{ font: normal 100% 'trebuchet ms', sans-serif;
display: block;
float: left;
height: 20px;
padding: 6px 35px 5px 28px;
text-align: center;
color: #FFF;
text-decoration: none;
background: #5A5A5A url(tab.png) no-repeat 100% 0;}
ul#menu li.selected a
{ height: 20px;
padding: 6px 35px 5px 28px;}
ul#menu li.selected
{ margin: 2px 2px 0 0;
background: #00C6F0 url(tab_selected.png) no-repeat 0 0;
}
ul#menu li.selected a, ul#menu li.selected a:hover
{ background: #00C6F0 url(tab_selected.png) no-repeat 100% 0;
color: #FFF;}
ul#menu li a:hover
{ color: #E4EC04;}
/* The container <div> - needed to position the dropdown content */
.dropdown {
float:left;
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
margin-top: 30px;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
border-radius: 15px;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
border-radius: 15px;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
I should say that I kept slogging for more than an hour to get this up. As I have just learned HTML and CSS. But enjoyed doing it as it made me learn something new. Thanks.
Here is what I have so far:
CSS:
#menu, #first, #second, #third {
list-style-type: none;
border: 1px solid black;
}
#menu {
text-align: center;
padding-right: 10px;
padding-left: 10px;
width: 70px;
margin: 25px;
}
#first, #second, #third {
position: absolute;
background-color: #f9f9f9;
width: 50px;
display:none;
padding-left: 0;
width: 90px;
margin-left: 25px;
margin-right: 25px;
}
a {
text-decoration: none;
color: black;
}
#menu:hover #first {
display: block;
}
#first:hover #second {
display: block;
}
.hover3:hover #third {
display: block;
}
And here is the HTML:
<ul id="menu">
<!-- put class="selected" in the li tag for the selected page - to highlight which page you're on -->
<li class="hover">Index
<ul id="first">
<li class="hover2">Drop Down
<ul id="second">
<li> Link 1 </li>
<li>Link 2</li>
<li class="hover3">Link 3
<ul id="third">
<li>Link 4</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
i try to apply hover on box .. means when i drag mouse over menu items then background color must be change so for that i try this code please check
i try this
body {
background-color: black;
}
.lefttabs a {
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
font-size: medium;
color: White;
width: 133px;
margin-left: 0px;
}
.lefttabs ul {
list-style: none;
margin: 0px 20px 0px 0px;
}
.lefttabs li {
list-style: none;
padding: 0px 0px 30px 0px;
}
.lefttabs li a {
list-style: none;
display: block;
}
.lefttabs a:hover,
.offcanvas a:focus {
color: green;
background-color: White;
border-color: Yellow;
color: #000!important;
height: 20%;
width: 10px;
}
<div class="lefttabs" style="width: 187px; height: 422px;">
<ul>
<li>
<a>DASHBOARD</a>
</li>
<li>
<a> EVENTS</a>
</li>
</ul>
</div>
In the above image i hover box but this not completely fill whereas i draw box with white color so i want to fill that box through hover
any solution?
You have to display your padding to your a tag and not to your li tag.
.lefttabs li
{
list-style:none;
}
.lefttabs li a
{
list-style:none;
display:block;
padding: 0px 0px 30px 0px;
}
Check out the JSfiddle showing what I am up to: http://jsfiddle.net/Amp3rsand/FPj3s/1/
HTML:
<ul id="navigation">
<li>BLAH</li>
<li>MORE <br /> BLAH</li>
<li>STILL <br /> MORE</li>
<li>YADDA <br /> YADDA</li>
<li>ETC ETC <br /> ETC ETC</li>
<li>FINISH</li>
</ul>
CSS:
body {
font-size: 12px;}
}
#navigation {
width: 600px;
height: 50px;
position: absolute;
left: 20px;
top: 25px;
}
#navigation li {
list-style-type:none;
width: 94px;
height: 40px;
display: block;
float: left;
margin: 0 5px 0 0;
text-align: center;
font-weight: bold;
background: lightgrey;
}
#navigation li:first-child {
border-top: 40px solid lightgrey;
border-left: 25px solid transparent;
height: 0;
width: 70px;
background: none;
}
#navigation li:first-child a {
position: relative;
top: -35px;
right: 0px
}
#navigation li:last-child {
border-top: 40px solid lightgrey;
border-right: 25px solid transparent;
height: 0;
width: 70px;
background: none;
}
#navigation li:last-child a {
position: relative;
top: -35px;
left: 5px;
}
#navigation li:last-child a:hover {
top: -35px;
left: 5px;
}
#navigation li a {
display: block;
height: 40px;
text-decoration: none;
color:#000;
}
#navigation li a:hover {
background: grey;
}
The lightgrey shapes are what I would like the hover to look like. Only the first and last children need to look different but I am unsure of how to go about messing with the borders on hover without ruining the layout. I have had to move the first and last 'a' elements because of the border shenanigans and now I'm stuck.
What would you suggest?
EDIT:
I just realised I could do this to change the shape of the hover bit but the link position is still causing trouble
#navigation li:last-child a:hover {
border-top: 40px solid grey;
border-right: 25px solid transparent;
height: 0;
width: 70px;
background: none;
}
See it live here on JS Fiddle
The properties you want to change are of the <li> elements so target the list items hover state and change the background and border color
#navigation li:hover {
background: grey;
}
#navigation li:first-child:hover,
#navigation li:last-child:hover{
background: none;
border-top-color: grey;
}
Updated fiddle
Essentially, you want to set the 'border-top' to grey for the first/ last child.
You could use in CSS:
#navigation li:first-child:hover {
border-top: 40px solid lightgrey;
}
But this didn't work in Google Chrome, for me, so perhaps just apply that as a hover effect using jQuery?
Small question on how to achieve some styling on a HTML / CSS UL menu.
I have a standard UL menu, but having some issues getting my head around how to achieve a certain look to the styling. The UL menu as it currently stands is shown here:
http://jsfiddle.net/WMQqt/
(HTML)
<ul id="nav">
<li>CONTACT US
</li>
<li>HOME
</li>
</ul>
(CSS)
#nav {
list-style: none;
margin-bottom: 10px;
*/ margin-top: -6px;
position: relative;
right: 286px;
z-index: 9;
height: 26px;
padding: 4px 4px 4px 4px;
font-weight: bold;
}
#nav li {
float: right;
margin-right: 10px;
}
#nav a {
display: block;
padding: 5px;
color: #444444;
background: #fff;
text-decoration: none;
border: 1px solid grey;
}
#nav a:hover {
color: #fff;
background: #04B431;
}
I'd like the menu buttons to have a small 1px border, but then some white space padding of around 3px before the background color starts.
Similar to how this looks:
http://jsfiddle.net/6PY7z/
Can this be done using the UL menu method?
Thanks for any advice, I'm no expert with HTML / CSS.
Add margin to a tag and move border to li
#nav li
{
float: right;
margin-right: 10px;
border: 1px solid grey;
}
#nav a
{
display: block;
padding: 5px;
color: #444444;
background: #ccc;
text-decoration: none;
margin:3px;
}
DEMO
you can use the following styles to achieve what you want:
#nav li
{
float: right;
margin-right: 10px;
border: 1px solid grey; /*put original border here*/
}
#nav a
{
display: block;
padding: 5px;
color: #444444;
background: #d8d8d8; /*new background-color*/
text-decoration: none;
border: 3px solid white; /*add white padding here*/
}
http://jsfiddle.net/WMQqt/4/
ok
in html go
<dl><div><dt>F</dt><dd>T</dd></div>
<div><dt>F</dt><dd>T</dd></div>
<div><dt>F</dt><dd>T</dd></div>
<div><dt>F</dt><dd>T</dd></div>
</dl>
in css
dl { display: flex;
flex-direction: column;}
some hints...
dt float left AND
dd float right
I have 2 issues I wanted to resolve in a CSS menu I'm coding but I find it out of my reach to handle them. Before I put the code here let me describe my 2 issues:
1) I'd like to have the all li area clickable instead of only the text..
2) I think the image and text is not correctly alingned vertically and wanted to fix that also.
Also: You can see the code I have in action at www.nfrases.com/modelo.php
HTML:
<nav>
<div class="drop-menu">
<span class="plus">+</span><span class="droptexto">Navegação</span>
<ul class="sub-menu">
<li><img src="/images/icon_info.png" alt="rss"> Acerca</li>
<li><img src="/images/icon_email.png" alt="rss"> Contactos</li>
</ul>
</div>
</nav>
CSS:
nav { width: 640px; float: right; }
.drop-menu { font-family: Arial, Helvetica, sans-serif; display: block; position: relative; margin: 0 auto; text-align: left; padding: 10px 10px; font-size: 22px; height: 30px; max-height: 30px; width: 120px; cursor: pointer; border-left: 1px solid #e7e4d4; border-right: 1px solid #e7e4d4; background: url("../images/bg_header.png") repeat scroll right top transparent; float: right; }
.drop-menu a, .drop-menu a:visited { color: #464530; text-decoration: none; }
.drop-menu a:hover { color:#ff5400; }
.drop-menu span.droptexto { padding-left:10px; font-size: 20px; color: #ff5400; font-family: 'Leckerli One', cursive; }
.plus { display: inline-block; -webkit-transition: .3s ease-in-out; -moz-transition: .3s ease-in-out; -o-transition: .3s ease-in-out; color: #ff5400; }
.drop-menu:hover .plus { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); }
.drop-menu:hover { border-left: 1px solid #e7e4d4; border-right: 1px solid #e7e4d4; }
.drop-menu:hover .sub-menu { display: inline-block; }
.sub-menu { display: none; width: 120px; background: #fff; padding: 10px 10px; margin-left: -11px; margin-top: 12px; border: 1px solid #e7e4d4; -webkit-box-shadow: 0px 13px 25px rgba(0,0,0, 0.2); }
.sub-menu li { list-style-type: none; display: block; border: 1px; border-color: #fff; border-style: dotted; border-bottom: 1px dotted #eaeaea; font-size: 19px; height: 24px; padding: 8px 0; font-size: 12px; }
.sub-menu li img { margin-right: .5em; margin-left: .5em; }
.sub-menu li:hover { border: 1px; border-color: #ff5400; border-style: dotted; }
as suggested earlier to make complete link clickable use display:block and define width&height or padding
.sub-menu li a {display:block; padding: 10px;}
to make the image and text aligned to center, the best approach is to put the image in background either li's or 'a' tag's. Dont forget the padding-left shd be greater than the width of the image.
.sub-menu li a.img1 { background-image:url(images/imagename.jpg); }
.sub-menu li a { background-position:center left; background-repeat: no-repeat; height: 20px; line-height: 20px; display: block; padding-left: 20px; }
Even if u dont want to put the image in background then try this. It may work. Set the height as per the height of the image, or use padding.
.sub-menu li a { height: 20px; line-height:20px; display: block;}
Hope this helps !
1)
.drop-menu a {
display:block;
}
2) Add the left image as background image of <li> then you can center the image and text horizontally.
Something like this will do the job: http://jsfiddle.net/YGHNu/
To make a full link set a to "display: block;", then set height and margin. To center image use "vertical-align: middle", and then move it a little higher with margin-top.