--------------------------------------------------------------------------------------------------------------------------
A TAG WITH UNDER LINE
--------------------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------------------
CODE:
--------------------------------------------------------------------------------------------------------------------------
<style>
a{
background-color: yellow;
}
</style>
<a href="#">Web Design</a>
----------------------------------------------------------------------------------------------------------------------------------
LI <li> CLASS AND ANCHOR TAG <a>
---------------------------------------------------------------------------------------------------------------------------------
<!DOCTYPE html><html>
<head>
<style>
a{
background-color:Green;
}
ul li:nth-child(1) {
background-color: red;
}
/*------------ OR USE THIS CODE ------------------*/
ul li:nth-child(1) {
background: Red url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwHFM8SF8ct1pw_PoGRdIF1p3kJp-YG40TM8t52TmkqXa8lx23aPw88MdweTJAiw8mD7p7ieLCRuD-f-wHDq958pFCQYlFXLWoBRS31BtiLOG1ao5Z1vo4UpXjuIm_DpjFk_LDBpGjKWM/s1600/home.png)no-repeat;
height:40px;
width:40px;
position: absolute;
}
</style>
</head>
<body>
<ul>
<li><a> menu 1</a></li>
<li><a class='home-item tooltip' href='/' title='Go home'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwHFM8SF8ct1pw_PoGRdIF1p3kJp-YG40TM8t52TmkqXa8lx23aPw88MdweTJAiw8mD7p7ieLCRuD-f-wHDq958pFCQYlFXLWoBRS31BtiLOG1ao5Z1vo4UpXjuIm_DpjFk_LDBpGjKWM/s1600/home.png'/></a></li>
<li>menu 3</li>
<li>menu 4</li>
</ul>
</body>
</html>
--------------------------------------------------------------------------------------------------------------------------
LI WITH BLACK DOT CODE:
--------------------------------------------------------------------------------------------------------------------------
<style>
li{
background-color: yellow;
}
a{
background-color: yellow;
}
</style>
<li>Welcome to My Homepage</li>
</br>
<a>Welcome to My Homepage</a>
-------------------------------------------------------------------------------------------------------------------------
LI WITHOUT BLACK DOT CODE:
--------------------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------------
<style>
li{
background-color:RED;
float: left;
}
</style>
<li>Welcome to My Homepage</li>
--------------------------------------------------------------------------------------------------------------------
<style>
li{
background-color:GREEN;
display: inline;
}
</style>
<li>Welcome to My Homepage</li>
--------------------------------------------------------------------------------------------------------------------
<style>
li{
background-color:BLUE;
display:block;
}
</style>
<li>Welcome to My Homepage</li>
--------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------------
CODE:
--------------------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>handy-HTML.com - Create a simple CSS dropdown menu</title>
<style type="text/css">
li {
float: left;
/*-- POSITION RELATIVE SET BELOW LINK TO LEFT---*/
position: relative;
border: 2px solid Black;
white-space: nowrap;
height:30px;
width:150px;
display:block;
}
/*MAKE DROPDOWN EFFECT*/
ul ul {
position:absolute;
visibility:hidden;
top:32px;
}
ul li:hover ul {
visibility:visible;
z-index:9999;
}
</style>
</head>
<body>
<ul id="menu">
<li> Home</li>
<li><a href="#">Portfolio</a>
<ul>
<!-- WITHOUT A TAG NO SHOW UNDERLINE -->
<!--IT MEANS YOU CAN MAKE LI MENU WITHOUT A TAG -->
<li> Home</li>
<li><a href="#">Web Design</a></li>
<li><a href="#">Graphic Design</a></li>
<li><a href="#">Logo Design</a></li>
<li><a href="#">Blog Design</a></li>
</ul>
</li>
<li><a href="#">Projects</a>
<ul>
<li><a href="#">This is a project</a></li>
<li><a href="#">So is this</a></li>
<li><a href="#">and this</a></li>
<li><a href="#">don't forget this too</a></li>
</ul>
</li>
<li><a href="#">Contact</a>
<ul>
<li><a href="#">Support</a></li>
<li><a href="#">Quote</a></li>
<li><a href="#">General Enquiry</a></li>
</ul>
</li>
</ul>
</body>
</html>
--------------------------------------------------------------------------------------------------------------------
WATCH YOUTUBE VIDEO
--------------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------------
CODE:
--------------------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>handy-HTML.com - Create a simple CSS dropdown menu</title>
<style type="text/css">
a {
color: #DA4B4B;
text-decoration: none;
}
li {
background:Green;
float: left;
position: relative;
border-top: 1px solid #ffffff;
border: 5px solid yellow;
outline: 5px solid blue;
padding: 5px 15px 5px 15px;
background: #1e7c9a;
margin-left: 1px;
white-space: nowrap;
height:30px;
width:150px;
display:block;
color:#000;
font-family:"Comic Sans MS", cursive;
text-decoration:none;
color:#FFF;
text-shadow:1px 1px 1px #000
}
/*MAKE DROPDOWN EFFECT*/
ul ul {
position:absolute;
visibility:hidden;
top:32px;
}
ul li:hover ul {
visibility:visible;
z-index:9999;
}
</style>
</head>
<body>
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Portfolio</a>
<ul>
<li><a href="#">Web Design</a></li>
<li><a href="#">Graphic Design</a></li>
<li><a href="#">Logo Design</a></li>
<li><a href="#">Blog Design</a></li>
</ul>
</li>
<li><a href="#">Projects</a>
<ul>
<li><a href="#">This is a project</a></li>
<li><a href="#">So is this</a></li>
<li><a href="#">and this</a></li>
<li><a href="#">don't forget this too</a></li>
</ul>
</li>
<li><a href="#">Contact</a>
<ul>
<li><a href="#">Support</a></li>
<li><a href="#">Quote</a></li>
<li><a href="#">General Enquiry</a></li>
</ul>
</li>
</ul>
</body>
</html>
-----------------------------------------------------------------------------------------------------------------
HOW USE FIREBUG LTITE TOOL OFFLINE
JUST REPLACE HTML TAG WITH BELOW CODE
-----------------------------------------------------------------------------------------------------------------
<html class=" js no-touch csstransforms csstransforms3d csstransitions svg js-ready" lang="en-US" debug="true">
<div id="FirebugChannel" style="display: none;">
</div>
<script src="chrome-extension://bmagokdooijbeehmkpknfglimnifench/firebug-lite.js" id="FirebugLite" firebugignore="true" extension="Chrome">
</script>
<!--<![endif]-->
https://www.jetbrains.com/webstorm/help/live-editing-of-html-css-and-javascript.html
---------------------------------------------------------
------------------------------------------------------------------------------------------------------------------
DROP DOWN MENU WITHOUT UL TAG
------------------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<style>
#session a.profile:hover {
position: relative;
}
#session div.menu {
display: none;
}
#session:hover div.menu {
display: block;
position: absolute; top: 20px; left: 0;
padding: 10px; margin: 10px; z-index: 100;
opacity: 0.8;
color: #ffffff;
width: 100px;
background: #000000;
-webkit-border-bottom-left-radius: 4px;
-moz-border-radius-bottomleft: 4px;
-webkit-border-bottom-right-radius: 4px;
-moz-border-radius-bottomright: 4px;
}
</style>
</head>
<body>
<div id="session">
<a class="profile" href="#"><span id="image">
<img src="http://www.neowin.net/forum/uploads/av-292572.png" /></span></a>
<span id="name">username</span>
<div class="menu">
Menu<br />Menu<br />Menu<br />Menu<br />Menu<br />
</div>
</div>
</body>
</html>
------------------------------------------------------------------------------------------------------------------
DROP DOWN MENU WITHOUT UL TAG
http://www.w3schools.com/cssref/tryit.asp?filename=trycss_sel_hover_dropdown
http://schier.co/blog/2014/10/23/creating-a-pure-css-dropdown-using-the-hover-selector.html
Creating a Pure CSS Dropdown Using the :hover Selector
------------------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<style>
.dropdown {
position: relative;
display: inline-block;
z-index: 9999;
}
.dropdown .dropdown-menu {
position: absolute;
top: 100%;
display: none;
margin: 0;
list-style: none;
width: 100%;
padding: 0;
}
.dropdown:hover .dropdown-menu {
display: block;
}
.dropdown button {
background: #FF6223;
color: #FFFFFF;
border: none;
margin: 0;
padding: 0.4em 0.8em;
font-size: 1em;
}
.dropdown-wide button {
min-width: 13em;
}
.dropdown a {
display: block;
padding: 0.2em 0.8em;
text-decoration: none;
background: #CCCCCC;
color: #333333;
}
.dropdown a:hover {
background: #BBBBBB;
}
</style>
</head>
<body>
<!-- dropdown container -->
<div class="dropdown">
<!-- trigger button -->
<button>Navigate</button>
<!-- dropdown menu -->
<ul class="dropdown-menu">
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</body>
</html>
--------------------------------------------------------------------------------------------------------------------------
OR USE THIS CODE:
-------------------------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<style>
.dropdown {
position: relative;
display: inline-block;
z-index: 9999;
}
.dropdown .dropdown-menu {
background: yellow;
position: absolute;
top: 100%;
display: none;
margin: 0;
list-style: none;
width: 190px;
padding: 0;
}
.dropdown:hover .dropdown-menu {
display: block;
}
.dropdown button {
background-color:green;
text-decoration: none;
color: white;
font-size: 20px;
padding: 15px;
display:inline-block;
}
.dropdown a {
border:2px solid black;
display: block;
padding: 15px;
margin: 0;
text-decoration: none;
color: #333333;
}
</style>
</head>
<body>
<!-- dropdown container -->
<div class="dropdown">
<!-- trigger button -->
<button>HOME</button>
<button>HOME</button>
<!-- dropdown menu -->
<ul class="dropdown-menu">
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</body>
</html>
--------------------------------------------------------------------------------------------------------------------------
HOW DIV TAG HOVER BUTTON AND MAKE INVISIBLE TO VISIBLE
WITHOUT UL OR LI TAG & WITHOUT ANY CLASS OR ID
-------------------------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<style>
/* MARGIN AND PADDING ZERO REMVOVE ANY SPACE */
*{
margin:0;
padding:0;
}
/* MAKE BUTTON AND MAKE BUTTON INVISIBLE */
button{
height:30px;
width:130px;
display: block;
}
button {
display:none;
}
/*HOW DIV TAG HOVER BUTTON AND MAKE VISIBLE BUTTON WITHOUT UL OR LI TAG */
div{
list-style-type: none;
text-align: center;
border: 2px solid red;
background-color:yellow;
height:15px;
width:130px;
}
div:hover button {
display: block;
}
</style>
</head>
<html>
<body>
<div>
<p>HOME</p>
<button>BUTTON</button>
<button>BUTTON</button>
</div>
</body>
</html>
DROP DOWN MENU WITHOUT UL TAG
------------------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<style>
#session a.profile:hover {
position: relative;
}
#session div.menu {
display: none;
}
#session:hover div.menu {
display: block;
position: absolute; top: 20px; left: 0;
padding: 10px; margin: 10px; z-index: 100;
opacity: 0.8;
color: #ffffff;
width: 100px;
background: #000000;
-webkit-border-bottom-left-radius: 4px;
-moz-border-radius-bottomleft: 4px;
-webkit-border-bottom-right-radius: 4px;
-moz-border-radius-bottomright: 4px;
}
</style>
</head>
<body>
<div id="session">
<a class="profile" href="#"><span id="image">
<img src="http://www.neowin.net/forum/uploads/av-292572.png" /></span></a>
<span id="name">username</span>
<div class="menu">
Menu<br />Menu<br />Menu<br />Menu<br />Menu<br />
</div>
</div>
</body>
</html>
------------------------------------------------------------------------------------------------------------------
DROP DOWN MENU WITHOUT UL TAG
http://www.w3schools.com/cssref/tryit.asp?filename=trycss_sel_hover_dropdown
http://schier.co/blog/2014/10/23/creating-a-pure-css-dropdown-using-the-hover-selector.html
Creating a Pure CSS Dropdown Using the :hover Selector
------------------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<style>
.dropdown {
position: relative;
display: inline-block;
z-index: 9999;
}
.dropdown .dropdown-menu {
position: absolute;
top: 100%;
display: none;
margin: 0;
list-style: none;
width: 100%;
padding: 0;
}
.dropdown:hover .dropdown-menu {
display: block;
}
.dropdown button {
background: #FF6223;
color: #FFFFFF;
border: none;
margin: 0;
padding: 0.4em 0.8em;
font-size: 1em;
}
.dropdown-wide button {
min-width: 13em;
}
.dropdown a {
display: block;
padding: 0.2em 0.8em;
text-decoration: none;
background: #CCCCCC;
color: #333333;
}
.dropdown a:hover {
background: #BBBBBB;
}
</style>
</head>
<body>
<!-- dropdown container -->
<div class="dropdown">
<!-- trigger button -->
<button>Navigate</button>
<!-- dropdown menu -->
<ul class="dropdown-menu">
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</body>
</html>
--------------------------------------------------------------------------------------------------------------------------
OR USE THIS CODE:
-------------------------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<style>
.dropdown {
position: relative;
display: inline-block;
z-index: 9999;
}
.dropdown .dropdown-menu {
background: yellow;
position: absolute;
top: 100%;
display: none;
margin: 0;
list-style: none;
width: 190px;
padding: 0;
}
.dropdown:hover .dropdown-menu {
display: block;
}
.dropdown button {
background-color:green;
text-decoration: none;
color: white;
font-size: 20px;
padding: 15px;
display:inline-block;
}
.dropdown a {
border:2px solid black;
display: block;
padding: 15px;
margin: 0;
text-decoration: none;
color: #333333;
}
</style>
</head>
<body>
<!-- dropdown container -->
<div class="dropdown">
<!-- trigger button -->
<button>HOME</button>
<button>HOME</button>
<!-- dropdown menu -->
<ul class="dropdown-menu">
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</body>
</html>
--------------------------------------------------------------------------------------------------------------------------
HOW DIV TAG HOVER BUTTON AND MAKE INVISIBLE TO VISIBLE
WITHOUT UL OR LI TAG & WITHOUT ANY CLASS OR ID
-------------------------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<style>
/* MARGIN AND PADDING ZERO REMVOVE ANY SPACE */
*{
margin:0;
padding:0;
}
/* MAKE BUTTON AND MAKE BUTTON INVISIBLE */
button{
height:30px;
width:130px;
display: block;
}
button {
display:none;
}
/*HOW DIV TAG HOVER BUTTON AND MAKE VISIBLE BUTTON WITHOUT UL OR LI TAG */
div{
list-style-type: none;
text-align: center;
border: 2px solid red;
background-color:yellow;
height:15px;
width:130px;
}
div:hover button {
display: block;
}
</style>
</head>
<html>
<body>
<div>
<p>HOME</p>
<button>BUTTON</button>
<button>BUTTON</button>
</div>
</body>
</html>
I have to search sites with relevant information on given topic and provide them to teacher our opinion and the article.
ReplyDeletesenior citizen saving scheme