ul#menu li ,ul.sub-menu li { list-style-type: none; float:left; }
ul#menu li a ,ul.sub-menu li a
{ display: inline-block; width: 150px; height: 40px; text-decoration: none; line-height: 40px; text-align: center; color:rgb(235, 139, 13); background-color:black; border-radius: 20px; }
ul#menu li a:hover ,ul.sub-menu li a:hover { background-color: crimson; font-weight: bold; color:white; display: block; border-radius: 20px;
}
ul#menu li { position: relative;
} ul#menu li ul.sub-menu { display:none; position: absolute; top: 30px; left: 0px; width: 100px;
} ul#menu li :hover ul.sub-menu { display: block;
}
Dropdown Menu
menu1
menu2
submenu1
submenu2
submenu3
submenu4
</li>
</ul>
Change this ul#menu li :hover ul.sub-menu to ul#menu li:hover ul.sub-menu. That is the only issue I can see assuming your HTML might be like below.
<ul id="menu">
<li>
menu1
</li>
<li>
menu2
<ul class="sub-menu">
<li>
submenu1
submenu2
submenu3
submenu4
</li>
</ul>
</li>
</ul>
Related
I have 1 side menu in my main page of website. And some of the list have have sub menu. And on hover i want to display it. Firstly i am display it none and then on display it on hover but it is not displaying.
#menu {
width: 15%;
height: 100%;
background: #424242;
color: white;
float: left;
}
#menu ul {
margin: 0;
padding: 0;
}
#menu li {
list-style: none;
font-size: 20px;
padding: 15px 20px;
cursor: pointer;
}
#menu li:hover {
background-color: #90CAF9;
}
#menu li.active {
background-color: #2196F3;
}
#menu li ul {
display: none;
}
#menu li:hover ul {
display: block;
position: absolute;
left:100%
}
<div id="menu">
<ul>
<li onClick="Dashboard();">Dashboard</li>
<li>Employee >
<ul>
<li>Add Employee</li>
<li>Employee View</li>
</ul>
</li>
<li>Leave</li>
<li>Salary</li>
<li>Change Password</li>
</ul>
</div>
#menu {
width: 150px;
height: 100%;
background: #424242;
color: white;
float: left;
}
#menu ul {
margin: 0;
padding: 0;
}
#menu li {
list-style: none;
font-size: 20px;
padding: 15px 20px;
cursor: pointer;
}
#menu li:hover {
background-color: #90CAF9;
}
#menu li.active {
background-color: #2196F3;
}
#menu ul li ul {
display: none;
}
#menu ul li.submenu {
position: relative
}
#menu ul li.submenu ul {
position: absolute;
left: 150px;
width: 200px;
top: 0;
background: #333
}
#menu ul li.submenu:hover ul {
display: inline-block
}
<div id="menu">
<ul>
<li onClick="Dashboard();">Dashboard</li>
<li class="submenu">Employee >
<ul>
<li>Add Employee</li>
<li>Employee View</li>
</ul>
</li>
<li>Leave</li>
<li class="submenu">Salary
<ul>
<li>Add Employee</li>
<li>Employee View</li>
</ul>
</li>
<li>Change Password</li>
</ul>
</div>
Also Add .submenu class to submenu dropdown parent li.
I'm a beginner when it comes to html and css, I have to make a website as a school project. I want to add the search bar in the navbar using css, I'v been searching but I couldn't find the answer.
Here's my code:
jQuery(function($) {
$('#search-trigger').click(function() {
$('#search-input').toggleClass('search-input-open');
});
$(document).click(function(e) {
if (!$(e.target).closest('.ngen-search-form').length) {
$('#search-input').removeClass('search-input-open');
}
})
});
body {
padding: 0;
margin: 0;
overflow-y: scroll;
font-family: Arial;
font-size: 18px;
background-image: url("Background5.gif");
background-size: 1366px 800px;
background-repeat: no-repeat;
}
#header img {
max-width: 100%;
height: 100%;
}
#nav {
background-color: #222;
}
#nav_wrapper {
width: 960 px;
margin: 0 auto;
text-align: left;
}
#nav ul {
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
}
#nav ul li {
display: inline-block;
}
#nav ul li:hover {
background-color: #333;
}
#nav ul li a,
visited {
color: #ccc;
display: block;
padding: 15px;
text-decoration: none;
}
#nav ul li a:hover {
color: #ccc;
text-decoration: none;
}
#nav ul li:hover ul {
display: block;
}
#nav ul ul {
display: none;
position: absolute;
background-color: #333;
border: 2px solid #222;
border-top: 0;
margin-left: -2px;
}
#nav ul ul li {
display: block;
}
#nav ul ul li a,
visited {
color: #ccc;
}
#nav ul li li a:hover {
color: #099;
}
#nav ul ul ul {
display: none;
position: absolute;
background-color: #333;
border: 2px solid #222;
border-top: 0;
margin-left: -2px;
}
#nav ul ul ul li {
display: block;
}
#nav ul ul ul li a,
visited {
color: #ccc;
}
#nav ul ul li li a:hover {
color: #099;
}
#nav ul ul ul ul {
display: none;
position: absolute;
background-color: #333;
border: 2px solid #222;
border-top: 0;
margin-left: -2px;
}
#nav ul ul ul ul li {
display: block;
}
#nav ul ul ul ul li a,
visited {
color: #ccc;
}
#nav ul ul ul li li a:hover {
color: #099;
}
#nav ul ul ul ul ul {
display: none;
position: absolute;
background-color: #333;
border: 2px solid #222;
border-top: 0;
margin-left: -2px;
}
#nav ul ul ul ul ul li {
display: block;
}
#nav ul ul ul ul ul li a,
visited {
color: #ccc;
}
#nav ul ul ul ul li li a:hover {
color: #099;
}
.form {
padding: 0px 0px 0px 0px;
float: right;
}
.form-search-input {
width: 0px;
height: 55px;
border: 0;
outline: 0;
font-size: 21px;
padding: 0px 0px 0px 0px;
color: #151515;
transition: all 0.5s;
}
.search-input-open {
width: 410px !important;
padding: 0px 0px 0px 20px !important;
display: initial !important;
}
.form-search-submit {
display: inline-block;
width: 55px;
height: 43px;
border: 0;
outline: 0;
background-color: #151515;
font-size: 21px;
color: #FFF;
cursor: pointer;
text-align: center;
}
<div id="maincontainer">
<div id="header">
<img src="C:\Users\Shogun\Desktop\The Witcher 3 Website\Banner.jpg" alt="the witcher 3 banner" id="thewitcherIMG" />
</div>
<div id="nav">
<div id="nav wrapper"></div>
<ul>
<li><a class="active" href="#">Home</a>
</li>
<li>
Story
<ul>
<li>Child of Prophecy
</li>
<li>
The Wild Hunt
</li>
<li>
Romance
</li>
<li>
Choice & Consequence
</li>
</ul>
</li>
<li>
Regions
<ul>
<li>White Orchard
</li>
<li>
Velen-No Man's Land
</li>
<li>
Novigrad
</li>
<li>
Royal Palace in Vizima
</li>
<li>
The Skellige Isles
</li>
<li>
Kaer Morhen
</li>
</ul>
</li>
<li>
Bestiary
<ul>
<li>Beasts
</li>
<li>
Cursed Ones
</li>
<li>
Draconians
</li>
<li>
Elementals
</li>
<li>
Hybrids
</li>
<li>
Insectoids
</li>
<li>
Necrophages
</li>
<li>
Ogroids
</li>
<li>
Relicts
</li>
<li>
Specters
</li>
<li>
Vampires
</li>
</ul>
</li>
<li>
Monster Hunts
</li>
<li>
DLC's
<ul>
<li>Heaarts of Stone
</li>
<li>
Blood and Wine
</li>
</ul>
</li>
<li>
CD Projekt Red
</li>
</ul>
<div>
<div class="form">
<form class="form-search ngen-search-form" action="" method="get">
<input type="text" name="q" id="search-input" class="form-search-input" placeholder="Search..." dir="ltr">
<span id="search-trigger" class="form-search-submit">🔎</span>
</form>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Try this:
jQuery(function($) {
$('#search-trigger').click(function() {
$('#search-input').toggleClass('search-input-open');
});
$(document).click(function(e) {
if (!$(e.target).closest('.ngen-search-form').length) {
$('#search-input').removeClass('search-input-open');
}
})
});
body {
padding: 0;
margin: 0;
overflow-y: scroll;
font-family: Arial;
font-size: 18px;
background-image: url("Background5.gif");
background-size: 1366px 800px;
background-repeat: no-repeat;
}
#header img {
max-width: 100%;
height: 100%;
}
#nav {
background-color: #222;
}
#nav_wrapper {
width: 960 px;
margin: 0 auto;
text-align: left;
}
#nav ul {
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
}
#nav ul li {
display: inline-block;
}
#nav ul li:hover {
background-color: #333;
}
#nav ul li a,
visited {
color: #ccc;
display: block;
padding: 15px;
text-decoration: none;
}
#nav ul li a:hover {
color: #ccc;
text-decoration: none;
}
#nav ul li:hover ul {
display: block;
}
#nav ul ul {
display: none;
position: absolute;
background-color: #333;
border: 2px solid #222;
border-top: 0;
margin-left: -2px;
}
#nav ul ul li {
display: block;
}
#nav ul ul li a,
visited {
color: #ccc;
}
#nav ul li li a:hover {
color: #099;
}
#nav ul ul ul {
display: none;
position: absolute;
background-color: #333;
border: 2px solid #222;
border-top: 0;
margin-left: -2px;
}
#nav ul ul ul li {
display: block;
}
#nav ul ul ul li a,
visited {
color: #ccc;
}
#nav ul ul li li a:hover {
color: #099;
}
#nav ul ul ul ul {
display: none;
position: absolute;
background-color: #333;
border: 2px solid #222;
border-top: 0;
margin-left: -2px;
}
#nav ul ul ul ul li {
display: block;
}
#nav ul ul ul ul li a,
visited {
color: #ccc;
}
#nav ul ul ul li li a:hover {
color: #099;
}
#nav ul ul ul ul ul {
display: none;
position: absolute;
background-color: #333;
border: 2px solid #222;
border-top: 0;
margin-left: -2px;
}
#nav ul ul ul ul ul li {
display: block;
}
#nav ul ul ul ul ul li a,
visited {
color: #ccc;
}
#nav ul ul ul ul li li a:hover {
color: #099;
}
.form {
padding: 0px 0px 0px 0px;
float: right;
}
.form-search-input {
width: 0px;
height: 55px;
border: 0;
outline: 0;
font-size: 21px;
padding: 0px 0px 0px 0px;
color: #151515;
transition: all 0.5s;
}
.search-input-open {
width: 410px !important;
padding: 0px 0px 0px 20px !important;
display: initial !important;
}
.form-search-submit {
display: inline-block;
width: 55px;
height: 43px;
border: 0;
outline: 0;
background-color: #151515;
font-size: 21px;
color: #FFF;
cursor: pointer;
text-align: center;
}
<div id="maincontainer">
<div id="header">
<img src="C:\Users\Shogun\Desktop\The Witcher 3 Website\Banner.jpg" alt="the witcher 3 banner" id="thewitcherIMG" />
</div>
<div id="nav">
<div id="nav wrapper"></div>
<ul>
<li><a class="active" href="#">Home</a>
</li>
<li>
Story
<ul>
<li>Child of Prophecy
</li>
<li>
The Wild Hunt
</li>
<li>
Romance
</li>
<li>
Choice & Consequence
</li>
</ul>
</li>
<li>
Regions
<ul>
<li>White Orchard
</li>
<li>
Velen-No Man's Land
</li>
<li>
Novigrad
</li>
<li>
Royal Palace in Vizima
</li>
<li>
The Skellige Isles
</li>
<li>
Kaer Morhen
</li>
</ul>
</li>
<li>
Bestiary
<ul>
<li>Beasts
</li>
<li>
Cursed Ones
</li>
<li>
Draconians
</li>
<li>
Elementals
</li>
<li>
Hybrids
</li>
<li>
Insectoids
</li>
<li>
Necrophages
</li>
<li>
Ogroids
</li>
<li>
Relicts
</li>
<li>
Specters
</li>
<li>
Vampires
</li>
</ul>
</li>
<li>
Monster Hunts
</li>
<li>
DLC's
<ul>
<li>Heaarts of Stone
</li>
<li>
Blood and Wine
</li>
</ul>
</li>
<li>
CD Projekt Red
</li>
<li>
<div class="form">
<form class="form-search ngen-search-form" action="" method="get">
<input type="text" name="q" id="search-input" class="form-search-input" placeholder="Search..." dir="ltr">
<span id="search-trigger" class="form-search-submit">🔎</span>
</form>
</div>
</li>
</ul>
<div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
CSS drop-down menu not showing sub-menu on hover, but find out the actual problem. Below are the HTML and CSS. Please see fiddle.
It looks display: block; has no effect at all.
body {
background-color: #eee;
padding: 0;
}
.inline-menu,
.inline-menu ul {
list-style: none;
padding: 0;
margin: 0;
}
.inline-menu > li {
display: inline-block;
padding-right: 25px;
}
.inline-menu a {
text-decoration: none;
}
.inline-menu > li > ul {
display: none;
}
.inline-menu > li > ul:hover {
display: block;
}
<nav>
<span class="logo"></span>
<ul class="inline-menu left-menu">
<li>L-A
<ul>
<li>1
</li>
<li>2
</li>
</ul>
</li>
<li>L-B
<ul>
<li>1
</li>
<li>2
</li>
</ul>
</li>
</ul>
</nav>
You are applying hover to the wrong element- use this:
.inline-menu > li:hover > ul{
display: block;
}
instead of .inline-menu > li > ul:hover
body{
background-color: #eee;
padding: 0;
}
.inline-menu,
.inline-menu ul{
list-style: none;
padding: 0;
margin: 0;
}
.inline-menu > li{
display: inline-block;
padding-right: 25px;
}
.inline-menu a{
text-decoration: none;
}
.inline-menu > li > ul{
display: none;
}
.inline-menu > li:hover > ul{
display: block;
}
<nav>
<span class="logo"></span>
<ul class="inline-menu left-menu">
<li>L-A
<ul>
<li>1</li>
<li>2</li>
</ul>
</li>
<li>L-B
<ul>
<li>1</li>
<li>2</li>
</ul>
</li>
</ul>
</nav>
* {
margin: 0px;
padding: 0px;
}
#menu ul {
list-style: none;
}
#menu ul li {
float: left;
width: 150px;
height: 50px;
background-color: #0C3;
border: 1px solid #FFF;
text-align: center;
line-height: 50px;
position: relative;
}
#menu ul li a {
color: #CC0;
display: block;
text-decoration: none;
}
#menu ul li a:hover {
background: #C30;
color: #FFF;
}
#menu ul ul {
display: none;
position: absolute;
}
#menu ul li:hover> ul {
display: block;
}
<div id="menu">
<ul>
<li>L-A
<ul>
<li>A
</li>
<li>B
</li>
</ul>
</li>
<li>L-B
<ul>
<li>C
</li>
<li>D
</li>
</ul>
</li>
</li>
</div>
</div>
I want to create a horizontal two level menu navigation. I copied some code on Internet and work fine. Below is the original CSS style and HTML
<style>
/*Style for horizontal CSS menu*/
ul {
list-style-type: none;
position: absolute;
margin: 0;
padding: 0;
}
ul li {
float: left;
margin-right: 1px;
display: inline-block;
}
ul li a {
display: block;
text-decoration: none;
height: 18px;
min-width: 120px;
text-align: center;
line-height: 18px;
font-family: Arial, "Times New Roman", Georgia;
color: #ffffff;
background: #004080;
font-size: 12px;
}
ul li:hover a {
background: #FFC062;
}
ul li:hover ul a {
background: #d9efff;
color: #2f3036;
line-height: 18px;
height: 18px;
}
ul li:hover ul a:hover {
background: #7db0db;
color: #ffffff;
}
ul li ul {
display: none;
}
ul li ul li {
display: block;
float: none;
border-left: 1px solid #000;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
}
ul li ul li:first-child {
display: block;
float: none;
border-top: 1px solid #000;
}
ul li ul li a {
width: auto;
min-width: 120px;
padding: 0 15px;
text-align: left;
color: #000;
}
ul li a:hover + .sub-menu,
.sub-menu:hover {
display: block;
}
</style>
<ul id="hor-menu" class="menu">
<li style="width:142px">
Home
<ul class="sub-menu">
<li>Country 1
</li>
<li>Country 1
</li>
<li>Country 1
</li>
</ul>
</li>
<li style="width:130px">
Main Menu 2
<ul class="sub-menu">
<li>Sub Menu
</li>
<li>Sub Menu
</li>
</ul>
</li>
<li style="width:130px">
Main Menu 2
<ul class="sub-menu">
<li>Sub Menu
</li>
<li>Sub Menu
</li>
</ul>
</li>
</ul>
Since the CSS is on the standard ul and li element so I want to add a class selector so that it only affect the horizontal menu. So I append .menu to each ul style. However the submeun will become off the position of the main menu. Any idea which style go wrong?
<style>
/*Style for horizontal CSS menu*/
ul.menu {
list-style-type: none;
position: absolute;
margin: 0;
padding: 0;
}
ul.menu li {
float: left;
margin-right: 1px;
display: inline-block;
}
ul.menu li a {
display: block;
text-decoration: none;
height: 18px;
min-width: 120px;
text-align: center;
line-height: 18px;
font-family: Arial, "Times New Roman", Georgia;
color: #ffffff;
background: #004080;
font-size: 12px;
}
ul.menu li:hover a {
background: #FFC062;
}
ul.menu li:hover ul a {
background: #d9efff;
color: #2f3036;
line-height: 18px;
height: 18px;
}
ul.menu li:hover ul a:hover {
background: #7db0db;
color: #ffffff;
}
ul.menu li ul {
display: none;
}
ul.menu li ul li {
display: block;
float: none;
border-left: 1px solid #000;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
}
ul.menu li ul li:first-child {
display: block;
float: none;
border-top: 1px solid #000;
}
ul.menu li ul li a {
width: auto;
min-width: 120px;
padding: 0 15px;
text-align: left;
color: #000;
}
ul.menu li a:hover + .sub-menu, .sub-menu:hover {
display: block;
}
</style>
<ul id="hor-menu" class="menu">
<li style="width:142px">
Home
<ul class="sub-menu">
<li>Country 1
</li>
<li>Country 1
</li>
<li>Country 1
</li>
</ul>
</li>
<li style="width:130px">
Main Menu 2
<ul class="sub-menu">
<li>Sub Menu
</li>
<li>Sub Menu
</li>
</ul>
</li>
<li style="width:130px">
Main Menu 2
<ul class="sub-menu">
<li>Sub Menu
</li>
<li>Sub Menu
</li>
</ul>
</li>
</ul>
Check this out- you have missed some styles that need to be applied to sub-menu also. Guess you can figure it out now. Thanks!
/*Style for horizontal CSS menu*/
ul.menu, ul.sub-menu {
list-style-type: none;
position: absolute;
margin: 0;
padding: 0;
}
ul.menu li, ul.sub-menu li {
float: left;
margin-right: 1px;
display: inline-block;
}
ul.menu li a, ul.sub-menu li a {
display: block;
text-decoration: none;
height: 18px;
min-width: 120px;
text-align: center;
line-height: 18px;
font-family: Arial, "Times New Roman", Georgia;
color: #ffffff;
background: #004080;
font-size: 12px;
}
ul.menu li:hover a, ul.sub-menu li:hover a {
background: #FFC062;
}
ul.menu li:hover ul a {
background: #d9efff;
color: #2f3036;
line-height: 18px;
height: 18px;
}
ul.menu li:hover ul a:hover {
background: #7db0db;
color: #ffffff;
}
ul.menu li ul {
display: none;
}
ul.menu li ul li {
display: block;
float: none;
border-left: 1px solid #000;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
}
ul.menu li ul li:first-child {
display: block;
float: none;
border-top: 1px solid #000;
}
ul.menu li ul li a {
width: auto;
min-width: 120px;
padding: 0 15px;
text-align: left;
color: #000;
}
ul.menu li a:hover + .sub-menu,
.sub-menu:hover {
display: block;
}
<ul id="hor-menu" class="menu">
<li style="width:142px">
Home
<ul class="sub-menu">
<li>Country 1
</li>
<li>Country 1
</li>
<li>Country 1
</li>
</ul>
</li>
<li style="width:130px">
Main Menu 2
<ul class="sub-menu">
<li>Sub Menu
</li>
<li>Sub Menu
</li>
</ul>
</li>
<li style="width:130px">
Main Menu 2
<ul class="sub-menu">
<li>Sub Menu
</li>
<li>Sub Menu
</li>
</ul>
</li>
</ul>
This is my HTML5 for nav bar. However, the submenu will not hide and the menu will not display horizontally. Home, American and Foreign and the topmenu options and speed,usability and price are submeny. However Foriegn is displaying below and not next to American. Thank you in advance.
<nav>
<ul class="topmenu">
<li> Home</li>
<li>American</li>
<ul class="submenu">
<li> Speed</li>
<li> Price</li>
<li> Usability</li>
</ul>
<li>Foreign</li>
<ul class="submenu">
<li> Speed</li>
<li> Price</li>
<li> Usability</li>
</ul>
</ul>
</nav>
CSS
nav{
position: relative;
background-color: #00baff;
width: 50%;
margin-left: auto;
margin-right: auto;
}
.topmenu li{
position: relative;
list-style-type: none;
font-size: 20px;
display: inline-block;
margin-right: 30px;
color: white;
}
.topmenu li a{
padding: 5px;
}
.topmenu a:link{
text-decoration: none;
color: #ffffff;
}
.topmenu a:visited{
text-decoration: none;
color: white;
}
.topmenu a:hover{
background-color: #ffffff;
}
.topmenu li .submenu li{
display: none;
list-style-type: none;
}
.topmenu li:hover .submenu li{
display: block;
position: relative;
}
Fiddle
SOLVED:
CSS:
nav{
position: relative;
background-color: #00baff;
width: 50%;
margin-left: auto;
margin-right: auto;
}
/* This is your main UL resize to fit */
.topmenu{
width: 100%;
height: 150px;
}
/* I used > li to target all elements of .topmenu */
.topmenu > li{
font-size: 20px;
margin-right: 10px;
color: white;
list-style:none;
display:inline;
float: left;
}
.topmenu > li a{
padding: 5px;
}
.topmenu a:link{
text-decoration: none;
color: #ffffff;
}
.topmenu a:visited{
text-decoration: none;
color: white;
}
.topmenu a:hover{
background-color: #ffffff;
}
/* new code
What this does is it targets all child UL elements on li:hover
if they have them they will become VISIBLE if not nothing happens */
.topmenu > li:hover >ul{
visibility:visible;
}
/* your two sub menus set to hidden */
.american-submenu{
visibility:hidden;
}
.foreign-submenu{
visibility:hidden;
}
HTML
<nav>
<ul class="topmenu">
<li> Home</li>
<li>American
<ul class="american-submenu">
<li> Speed</li>
<li> Price</li>
<li> Usability</li>
</ul>
</li>
<li>Foreign
<ul class="foreign-submenu">
<li> Speed</li>
<li> Price</li>
<li> Usability</li>
</ul>
</li>
</ul>
</nav>
HMTL
<nav>
<ul class="topmenu">
<li> Home</li>
<li>American
<ul>
<li> Speed</li>
<li> Price</li>
<li> Usability</li>
</ul>
</li>
<li>Foreign
<ul>
<li> Speed</li>
<li> Price</li>
<li> Usability</li>
</ul>
</li>
</ul>
</nav>
CSS
nav{
position: relative;
background-color: #00baff;
width:100%;
}
.topmenu ul {
list-style:none;
}
.topmenu li {
float:left;
position:relative;
list-style-type: none;
font-size: 20px;
display: inline-block;
background-color: #00baff;
color: white;
text-align:center;
padding:5px;
}
.topmenu li ul {
display:none;
position:absolute;
text-decoration:none;
}
.topmenu li:hover ul{
display:block;
background-color: #00baff;
color:white;
height:auto;
width:8em;
}
.topmenu li ul li{
clear:both;
border-style:none;}
.topmenu li a{
padding: 5px;
}
.topmenu a:link{
text-decoration: none;
color: #ffffff;
}
.topmenu a:visited{
text-decoration: none;
color: white;
}
.topmenu a:hover{
background-color:white ;
color:#00baff;
}
Fiddle Demo