<!DOCTYPE html>
<
html
lang="en" class="no-js">
<
head
>
<
meta
charset="UTF-8" />
<
meta
name="viewport"
content="
width
=
device
-width,
initial-scale
=
1
">
<
title
>CSS-only Marquee Menu Effect </
title
>
<
meta
name="description"
content="A menu with a css-only marquee hover effect" />
<
link
rel="stylesheet"
<
link
rel="stylesheet"
type="text/css"
href="css/base.css" />
<
style
>
body{
text-align:center;
}
</
style
>
</
head
>
<
body
class="demo-1">
<
h2
style="color:green">GeeksForGeeks</
h2
>
<
b
>Marquee Menu Effect using CSS</
b
>
<
main
>
<
nav
class="menu">
<
div
class="menu__item">
<
a
class="menu__item-link">Links</
a
>
<
img
class="menu__item-img"
src="img/background1.jpg"
alt="geeks image"/>
<
div
class="marquee">
<
div
class="marquee__inner"
aria-hidden="true">
<
span
>Hyperlinks</
span
>
<
span
>Hypertexts</
span
>
<
span
>Hypermedia</
span
>
<
span
>Graphics</
span
>
</
div
>
</
div
>
</
div
>
<
div
class="menu__item">
<
a
class="menu__item-link">HTML</
a
>
<
img
class="menu__item-img"
src="img/background2.jpg"
alt="gfg image"/>
<
div
class="marquee">
<
div
class="marquee__inner"
aria-hidden="true">
<
span
>Attributes</
span
>
<
span
>Paragraphs</
span
>
<
span
>Head</
span
>
<
span
>Tables</
span
>
<
span
>Lists</
span
>
</
div
>
</
div
>
</
div
>
<
div
class="menu__item">
<
a
class="menu__item-link">CSS</
a
>
<
img
class="menu__item-img"
src="img/background3.jpg"
alt="GFG image"/>
<
div
class="marquee">
<
div
class="marquee__inner"
aria-hidden="true">
<
span
>Inline styles</
span
>
<
span
>External CSS</
span
>
<
span
>Internal CSS</
span
>
</
div
>
</
div
>
</
div
>
<
div
class="menu__item">
<
a
class="menu__item-link">Geeks</
a
>
<
img
class="menu__item-img"
src="img/geeksimage1.png"
alt="GFG image"/>
<
div
class="marquee">
<
div
class="marquee__inner"
aria-hidden="true">
<
span
>PHP</
span
>
<
span
>jQuery</
span
>
<
span
>Algorithm</
span
>
<
span
>JavaScript</
span
>
<
span
>MySQL</
span
>
</
div
>
</
div
>
</
div
>
<
div
class="menu__item">
<
a
class="menu__item-link">GeeksWeek</
a
>
<
img
class="menu__item-img"
src="img/gfg2.jpg"
alt="gfg image"/>
<
div
class="marquee">
<
div
class="marquee__inner"
aria-hidden="true">
<
span
>GeeksWeek</
span
>
<
span
>Contact</
span
>
<
span
>GeeksWeek</
span
>
<
span
>Contest</
span
>
</
div
>
</
div
>
</
div
>
</
nav
>
</
main
>
</
body
>
</
html
>