I just began using the HTML editor and want to experiment with Mouse Rollovers. However I created a menu using the Menu Builder and inserted the code into a "blank" page. When I render the page the menu displays as a list rather than a mouse over. I used the example in the HTML guide and the code appears to be the same as in the example.
I must be overlooking something....
Thanks...Bob
The code follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)">
<meta name="created" content="Tue, 28 Jun 2011 23:01:38 GMT">
<meta name="description" content="">
<meta name="keywords" content="">
<title></title>
<style type="text/css">
<!--
body {
color:#000000;
background-color:#FFFFFF;
}
a { color:#0000FF; }
a:visited { color:#800080; }
a:hover { color:#008000; }
a:active { color:#FF0000; }
-->
</style>
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel=”stylesheet” type=”text/css” href=”css/menu-menu.css” media=”screen”>
</head>
<body>
<ul class=”menu-menu”>
<li class=”first”><a href=”contact-us.html”>Contact Us</a></li>
<li>
<a href=””>Learn More</a>
<ul>
<li class=”first”><a href=”about-us.html”>About Us</a></li>
<li><a href=”privacy.html”>Privacy Policy</a></li>
</ul>
</li>
</ul>
</body>
</html>
HTML Editor Builder - Post ID 162820
Bob
Registered User
1 post
rodgw
Registered User
209 posts
The file in this line,
<link rel=”stylesheet” type=”text/css” href=”css/menu-menu.css” media=”screen”>
"menu-menu.css"
needs to be on the server under directory "css"
I believe that should take care of the issue
<link rel=”stylesheet” type=”text/css” href=”css/menu-menu.css” media=”screen”>
"menu-menu.css"
needs to be on the server under directory "css"
I believe that should take care of the issue
Janys Hyde
Ambassador
6,076 posts
Your list does in fact do a mousover...the colour changes on mouse hover. But do you mean that you want the menu items to have a sort of box coloured background? If that is the case you are going to need to use some more complex code to achieve the results you are after. Try out this piece of code to see that with a couple of simple changes you have some colour defined in the menu. The colour scheme I have chosen is horrendous, but you can get an idea from it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)">
<meta name="created" content="Tue, 28 Jun 2011 23:01:38 GMT">
<meta name="description" content="">
<meta name="keywords" content="">
<title></title>
<style type="text/css">
<!--
body {
color:#000000;
background-color:#FFFFFF;
}
a { color:#ffffff; background-color:#0000FF; }
a:visited { color:#800080; }
a:hover { color:#ffffff; background-color:#008000; }
a:active { color:#FF0000; }
div {background-color: #FF0080; width:300px;}
-->
</style>
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel=”stylesheet” type=”text/css” href=”css/menu-menu.css” media=”screen”>
</head>
<body>
<div>
<ul class=”menu-menu”>
<li class=”first”><a href=”contact-us.html”>Contact Us</a></li>
<li>
<a href=””>Learn More</a>
<ul>
<li class=”first”><a href=”about-us.html”>About Us</a></li>
<li><a href=”privacy.html”>Privacy Policy</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)">
<meta name="created" content="Tue, 28 Jun 2011 23:01:38 GMT">
<meta name="description" content="">
<meta name="keywords" content="">
<title></title>
<style type="text/css">
<!--
body {
color:#000000;
background-color:#FFFFFF;
}
a { color:#ffffff; background-color:#0000FF; }
a:visited { color:#800080; }
a:hover { color:#ffffff; background-color:#008000; }
a:active { color:#FF0000; }
div {background-color: #FF0080; width:300px;}
-->
</style>
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel=”stylesheet” type=”text/css” href=”css/menu-menu.css” media=”screen”>
</head>
<body>
<div>
<ul class=”menu-menu”>
<li class=”first”><a href=”contact-us.html”>Contact Us</a></li>
<li>
<a href=””>Learn More</a>
<ul>
<li class=”first”><a href=”about-us.html”>About Us</a></li>
<li><a href=”privacy.html”>Privacy Policy</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.
