HTML and CSS: Submenu display - css

I need some help. I am working on this navigation bra that has a list of menu in it, and one of them is Award. Award has submenu that is hidden, and if I hover it, it submenu should be visible to the user. However, when I hover over the Award, it submenu not being visible to the user. I don't what I am doing wrong. I was hopping that someone could help me here, Please.
Here is my code
function openNav() {
document.getElementById("nav_sidebar").style.width = "142px";
document.getElementById("main").style.height = "142px";
}
function closeNav() {
document.getElementById("nav_sidebar").style.width = "0";
document.getElementById("main").style.height= "0";
}
.sidebar {
width: 0;
list-style: none;
position: absolute;
height: 100%;
z-index: 0;
left: 2px;
background: #38424f;
overflow-x: hidden;
transition: 0.5s;
padding-top: 10px;
}
.sidebar ul
{
list-style:none;
position:relative;
float:left;
margin:0;
padding:0
}
.sidebar ul li:hover {
background:#f6f6f6
}
.sidebar ul {
display:none;
position: absolute;
left: 5%;
background: #fff;
padding:0
}
.sidebar ul li {
float:none;
width:200px
}
.sidebar li ul:hover
{
display: block;
}
.sidebar li a {
padding: 5px 8px 8px 15px;
text-decoration: none;
font-size: 22px;
color: #4ba6c1;
display: block;
transition: 0.3s
}
.sidebar a:hover, .offcanvas a:focus{
color: #ffffff;
}
.sidebar .close {
position: absolute;
top: 0;
right: 10px;
font-size: 20px;
margin-left: 20px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Admin</title>
<meta charset="utf-8">
<script src="../src//jquery/jquery.min.js"></script>
<link href="../css/Main.css" rel="stylesheet">
<script src="../javascript/Scritp.js"></script>
</head>
<body>
<div class ="side_nave">
<label class = "nav" onclick="openNav()">☰ Menu</label>
<div class="main_panel" id = "main">
<div class="sidebar" id = "nav_sidebar">
<li><a href="javascript:void(0)" class="close" onclick=
"closeNav()">×</a></li>
<li><a class ="active" href="#">Employee</a></li>
<li>Awards
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
</ul>
</li>
<li>Certificate</li>
<li>Update</li>
<li>Sent Email</li>
<li>Settings</li>
<li>Logout</li>
</div>
</div>
</div>
</body>
</html>

You're targeting .sidebar li ul:hover to show the hidden ul. That won't work because the ul you want to hover is hidden - you can't hover the element if it's hidden. Instead, you need to target .sidebar li:hover > ul which means that when you hover a li it will show any direct child ul's
function openNav() {
document.getElementById("nav_sidebar").style.width = "142px";
document.getElementById("main").style.height = "142px";
}
function closeNav() {
document.getElementById("nav_sidebar").style.width = "0";
document.getElementById("main").style.height= "0";
}
.sidebar {
width: 0;
list-style: none;
position: absolute;
height: 100%;
z-index: 0;
left: 2px;
background: #38424f;
overflow-x: hidden;
transition: 0.5s;
padding-top: 10px;
}
.sidebar ul
{
list-style:none;
position:relative;
float:left;
margin:0;
padding:0
}
.sidebar ul li:hover {
background:#f6f6f6
}
.sidebar ul {
display:none;
position: absolute;
left: 5%;
background: #fff;
padding:0
}
.sidebar ul li {
float:none;
width:200px
}
.sidebar li:hover > ul
{
display: block;
}
.sidebar li a {
padding: 5px 8px 8px 15px;
text-decoration: none;
font-size: 22px;
color: #4ba6c1;
display: block;
transition: 0.3s
}
.sidebar a:hover, .offcanvas a:focus{
color: #ffffff;
}
.sidebar .close {
position: absolute;
top: 0;
right: 10px;
font-size: 20px;
margin-left: 20px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Admin</title>
<meta charset="utf-8">
<script src="../src//jquery/jquery.min.js"></script>
<link href="../css/Main.css" rel="stylesheet">
<script src="../javascript/Scritp.js"></script>
</head>
<body>
<div class ="side_nave">
<label class = "nav" onclick="openNav()">☰ Menu</label>
<div class="main_panel" id = "main">
<div class="sidebar" id = "nav_sidebar">
<li><a href="javascript:void(0)" class="close" onclick=
"closeNav()">×</a></li>
<li><a class ="active" href="#">Employee</a></li>
<li>Awards
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
</ul>
</li>
<li>Certificate</li>
<li>Update</li>
<li>Sent Email</li>
<li>Settings</li>
<li>Logout</li>
</div>
</div>
</div>
</body>
</html>

You can even solve this without JavaScript:
<li>Awards
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
</ul>
</li>
#awards ul{
display:none;
}
#awards:hover ul{
display:block;
}

Related

Problem With Navbar Elements Using Basics CSS

I've just started out with the basics of CSS and HTML, there's this problem that I am facing, In my Navbar , when I click on the Hamburger button , The properties that I had added to my text get reverted back to the default one , like the text-decoration changes to underline , How Do I Fix this?
HTML code
<html lang="en">
<head>
<title>My CSS Website</title>
<link href="styles.css" rel="stylesheet">
</head>
<body>
<nav>
<ul class="top-nav" id="dropdownMenu">
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
<li class="right-nav">Sign Up</li>
<li class="right-nav">Sign in</li>
<li class="dropdownIcon"><a href="javascript:void(0)" onclick="Hamburger()">☰</li>
</ul>
</nav>
<script>
function Hamburger(){
var x=document.getElementById("dropdownMenu");
if(x.className==="top-nav"){
x.className+="responsive";
}
else{
x.className="top-nav";
}
}
</script>
</body>
</html>
CSS
*{
margin:0;
padding:0;
}
nav,header,footer{
display: block;
}
body{
line-height: 1.5;
}
/* Navbar */
nav{
width:100%;
}
nav ul{
background-color: #eee;
overflow:hidden;
}
ul.top-nav li{
list-style:none;
float: left;
}
ul.top-nav li.right-nav{
min-height: 16px;
float: right;
}
ul.top-nav li a{
text-decoration: none;
padding: 1.25rem;
min-height:16px;
text-align: center;
text-transform: uppercase;
color:rgb(54, 49, 49);
display:block;
}
ul.top-nav li a:hover{
background-color: #0080ff;
color: #fff;
}
ul.top-nav li.dropdownIcon{
display: none;
}
/* Mobile Version */
#media screen and (max-width:680px){
ul.top-nav li:not(:nth-child(1)){
display:none;
}
ul.top-nav li.dropdownIcon{
display: block;
float:right;
}
ul.top-nav.responsive{
position:relative;
}
ul.top-nav.responsive li{
display: inline;
float:none;
}
ul.top-nav.responsive li a {
display:block;
text-align:left;
text-decoration: none;
}
} ```
Because you don't add class in the right way also change onclick, don't wrap function into the string "Hamburger()" use this Hamburger()
<li class="dropdownIcon"><a href="javascript:void(0)" onclick=Hamburger()>☰</li>
</ul>
*{
margin:0;
padding:0;
}
nav,header,footer{
display: block;
}
body{
line-height: 1.5;
}
/* Navbar */
nav{
width:100%;
}
nav ul{
background-color: #eee;
overflow:hidden;
}
ul.top-nav li{
list-style:none;
float: left;
}
ul.top-nav li.right-nav{
min-height: 16px;
float: right;
}
ul.top-nav li a{
text-decoration: none;
padding: 1.25rem;
min-height:16px;
text-align: center;
text-transform: uppercase;
color:rgb(54, 49, 49);
display:block;
}
ul.top-nav li a:hover{
background-color: #0080ff;
color: #fff;
}
ul.top-nav li.dropdownIcon{
display: none;
}
/* Mobile Version */
#media screen and (max-width:680px){
ul.top-nav li:not(:nth-child(1)){
display:none;
}
ul.top-nav li.dropdownIcon{
display: block;
float:right;
}
ul.top-nav.responsive{
position:relative;
}
ul.top-nav.responsive li{
display: inline;
float:none;
}
ul.top-nav.responsive li a {
display:block;
text-align:left !important;
text-decoration: none !important;
}
}
<nav>
<ul class="top-nav" id="dropdownMenu">
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
<li class="right-nav">Sign Up</li>
<li class="right-nav">Sign in</li>
<li class="dropdownIcon"><a href="javascript:void(0)" onclick={Hamburger()}>☰</li>
</ul>
</nav>
<script>
function Hamburger(){
var x=document.getElementById("dropdownMenu");
if(x.className==="top-nav"){
x.classList.add("responsive")
// x.className+=" "+"responsive";
}
else{
x.className="top-nav";
}
}
</script>
function Hamburger(){
var x=document.getElementById("dropdownMenu");
if(x.className==="top-nav"){
//add class like this
x.className+=" "+"responsive";
or
x.classList.add("responsive");
}
else{
x.className="top-nav";
}
}
JavaScript Class
if you want get class list then use classList and classList return list
const list = element.classList
if you want to add class then.
element.classList.add("class_name");
if you want to remove class then.
element.classList.remove("class_name");
if you want to toggle class then. (toggle check if class exist then remove class and else add class).
element.classList.toggle("class_name");
*{
margin:0;
padding:0;
}
nav,header,footer{
display: block;
}
body{
line-height: 1.5;
}
/* Navbar */
nav{
width:100%;
}
nav ul{
background-color: #eee;
overflow:hidden;
}
ul.top-nav li{
list-style:none;
float: left;
}
ul.top-nav li.right-nav{
min-height: 16px;
float: right;
}
ul.top-nav li a{
text-decoration: none;
padding: 1.25rem;
min-height:16px;
text-align: center;
text-transform: uppercase;
color:rgb(54, 49, 49);
display:block;
}
ul.top-nav li a:hover{
background-color: #0080ff;
color: #fff;
}
ul.top-nav li a:active{
background-color: #0080ff;
color: #fff;
}
ul.top-nav li.dropdownIcon{
display: none;
}
/* Mobile Version */
#media screen and (max-width:680px){
ul.top-nav li:not(:nth-child(1)){
display:none;
}
ul.top-nav li.dropdownIcon{
display: block;
float:right;
}
ul.top-nav.responsive{
position:relative;
}
ul.top-nav.responsive li{
display: inline;
float:none;
}
ul.top-nav.responsive li a {
display:block;
text-align:left;
text-decoration: none;
}
}
<head>
<title>My CSS Website</title>
<link href="styles.css" rel="stylesheet">
</head>
<body>
<nav>
<ul class="top-nav" id="dropdownMenu">
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
<li class="right-nav">Sign Up</li>
<li class="right-nav">Sign in</li>
<li class="dropdownIcon"><a href="javascript:void(0)" onclick="Hamburger()">☰</li>
</ul>
</nav>
<script>
function Hamburger(){
var x=document.getElementById("dropdownMenu");
x.classList.toggle("responsive");
}
</script>
</body>
I think this code is help you! thank you!

Submenu immediately disappears

I am creating a submenu which shows on hover of the parent menu. But when I try to go to submenu after hoving on the parent, it immediately disappears. I know there should not be any gap between parent and child menu to make the navigation seamless, but not able to figure out in the below code. I know this could be a trivial issue, any help would be appreciated.
body {
margin: 0;
}
a {
color:white;
width:55px;
}
header {
background-color: rgba(0,0,0,0.5);
}
ul {
list-style: none;
margin: 0;
padding: 0
}
ul.parent {
display: flex;
list-style: none;
margin: 0;
padding: 0
}
a {
display: block;
text-decoration: none;
padding: 10px 30px;
margin: 0 60px;
background-color: black
}
.child {
display: none;
position: absolute;
top: 38px;
left: 30px;
}
a:hover ~ .child {
display: block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<header>
<ul class="parent">
<li >
<a class="test" href="#">Home<i class="fa fa-caret-down"></i></a>
<div class="child">
<ul >
<li>
Item1
</li>
<li>
Item2
</li>
<li>
Item3
</li>
</ul>
</div>
</li>
<li>
About
</li>
<li>
Contact
</li>
</ul>
</header>
</body>
</html>
Just change the code:
a:hover ~ .child {
display: block;
}
to:
li:hover .child {
display: block;
}
Suggestion:
Please update your code like this, otherwise, if you trying to add another child for a menu it will not work.
.child {
display: none;
position: absolute;
top: 100%;
left: 30px;
}
ul.parent li {
position: relative;
}
ul.parent li:hover .child {
display: block;
}
I hope you understood the thing.
Check this fiddle: https://jsfiddle.net/15h6jyg4/
Add a class to the list with submenu and add hover to that class
body {
margin: 0;
}
a {
color:white;
width:55px;
}
header {
background-color: rgba(0,0,0,0.5);
}
ul {
list-style: none;
margin: 0;
padding: 0
}
ul.parent {
display: flex;
list-style: none;
margin: 0;
padding: 0
}
a {
display: block;
text-decoration: none;
padding: 10px 30px;
background-color: black
}
.parent li{
margin-left:60px;
}
.child {
display: none;
position: absolute;
top: 38px;
left: 30px;
}
.hasSub:hover .child {
display: block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<header>
<ul class="parent">
<li class="hasSub">
<a class="test" href="#">Home<i class="fa fa-caret-down"></i></a>
<div class="child">
<ul >
<li>
Item1
</li>
<li>
Item2
</li>
<li>
Item3
</li>
</ul>
</div>
</li>
<li>
About
</li>
<li>
Contact
</li>
</ul>
</header>
</body>
</html>

CSS - hover ul items not in vertical line

I'm brand new to HTML and CSS, and right now I'm following this tutorial. My problem see picture is that the items in my drop-down list are not in a vertical line, but all cluttered together.
I'm sure it's a simple problem with a simple solution but I am not making any progress finding one...
I would be so grateful for some suggestions! :)
* {
margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
margin-bottom: 10px;
}
/* ----- NAVIGATION BAR ----- */
#nav {
width:500px;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
margin-bottom: 20px;
text-align: center;
background-color: none;
}
#nav ul {
padding: 0;
list-style: none;
position: relative;
display: inline-table;
}
#nav ul:after{
content: "";
clear: both;
display: block;
}
#nav ul li {
float: left;
}
#nav ul li a {
display: block;
padding: 10px 20px;
color: black;
text-decoration: none;
font-family: "Trocchi", serif;
}
#nav ul li:hover {
background: #76C5CF;
}
#nav ul li:hover a {
color: white;
}
#nav ul ul {
display: none;
background: none;
position: absolute;
top: 100%;
}
#nav ul li:hover > ul {
display: block;
}
/* ----- HEADER ----- */
#header {
width: 340px
margin: auto;
margin-top: 10px;
text-align: center;
}
#header h1 {
height: 50px;
font-family: "Trocchi", serif;
background-color:
}
#header h2 {
font-family: "Trocchi", serif;
position: relative;
display: inline;
}
/* ----- BACKGROUND ----- */
body {
background-color: #A6D7F3;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title> Harley's Haunts </title>
<link rel="stylesheet" type="text/css" href="harleysHaunts.css">
<style>
#import url('https://fonts.googleapis.com/css?family=Trocchi');
</style>
</head>
<body>
<div id="header">
<h1> HARLEY'S HAUNTS </h1>
<h2> It's a dog's world after all </h2>
</div>
<div id="nav">
<ul>
<li> About </li>
<li> Pet-Friendly Venues
<ul>
<li> Cafes </li>
<li> Restaurants </li>
<li> Pubs/Bars </li>
<li> Shops </li>
</ul>
</li>
<li> Contact </li>
</ul>
</div>
</body>
</html>
All you have to do is add position:relative to #nav ul li :
#nav ul li {
float: left;
position: relative;
}
but you should use this only for the li parent and you shouldn't use float:left in the li of the ul child.
So your css will become like this
#nav > ul > li {
float: left;
position: relative;
}
Add a specific width to #nav ul ul, gave it 200px as example considering parent ul width
* {
margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
margin-bottom: 10px;
}
/* ----- NAVIGATION BAR ----- */
#nav {
width:500px;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
margin-bottom: 20px;
text-align: center;
background-color: none;
}
#nav ul {
padding: 0;
list-style: none;
position: relative;
display: inline-table;
}
#nav ul:after{
content: "";
clear: both;
display: block;
}
#nav ul li {
float: left;
}
#nav ul li a {
display: block;
padding: 10px 20px;
color: black;
text-decoration: none;
font-family: "Trocchi", serif;
}
#nav ul li:hover {
background: #76C5CF;
}
#nav ul li:hover a {
color: white;
}
#nav ul ul {
display: none;
background: none;
position: absolute;
top: 100%;
width: 200px;
}
#nav ul li:hover > ul {
display: block;
}
/* ----- HEADER ----- */
#header {
width: 340px
margin: auto;
margin-top: 10px;
text-align: center;
}
#header h1 {
height: 50px;
font-family: "Trocchi", serif;
background-color:
}
#header h2 {
font-family: "Trocchi", serif;
position: relative;
display: inline;
}
/* ----- BACKGROUND ----- */
body {
background-color: #A6D7F3;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title> Harley's Haunts </title>
<link rel="stylesheet" type="text/css" href="harleysHaunts.css">
<style>
#import url('https://fonts.googleapis.com/css?family=Trocchi');
</style>
</head>
<body>
<div id="header">
<h1> HARLEY'S HAUNTS </h1>
<h2> It's a dog's world after all </h2>
</div>
<div id="nav">
<ul>
<li> About </li>
<li> Pet-Friendly Venues
<ul>
<li> Cafes </li>
<li> Restaurants </li>
<li> Pubs/Bars </li>
<li> Shops </li>
</ul>
</li>
<li> Contact </li>
</ul>
</div>
</body>
</html>
You have applied rules CSS for all children of the ul parent, so all chidren of ul ul they will be inherited the rule of parent CSS.
Try to use selector reference '>' when you want to target only parent element
For this exemple you just change
#nav ul li {
float: left;
}
by
#nav > ul >li {
float: left;
}

How to add drop down menu using CSS?

I have an existing website with the menu code below and I want to add more stuff to my site but users need to nevigate to those pages please help me to add a sub menu to the code I have. Please help?
HTML
<div id="menu">
<ul>
<li>Home</li>
<li>Services</li>
<li>FAQ</li>
<li class="active">About</li>
<li>Contact Us</li>
</ul>
</div>
CSS
/** HEADER */
#header-wrapper
{
overflow: none;
height: 100px;
margin-bottom: 20px;
background: rgba(0,0,0,0.70);
}
#header {
overflow: none;
}
/** LOGO */
#logo {
float: left;
width: 10px;
height: 100px;
}
#logo h1, #logo p {
margin: 0px;
line-height: normal;
}
#logo h1 a {
padding-left: 1px;
text-decoration: none;
font-size: 1.50em;
font-weight: 600;
font-family: 'Archivo Narrow', sans-serif;
color: #FFFFFF
}
/** MENU */
#menu {
float: right;
height: 110px;
}
#menu ul {
margin: 0px;
padding: 0px;
list-style: none;
line-height: normal;
}
#menu li {
float: left;
margin-right: 1px;
}
#menu a {
display: block;
height: 100px;
padding: 0px 30px;
line-height: 100px;
text-decoration: none;
text-transform: uppercase;
color: #FFFFFF;
}
#menu a:hover {
text-decoration: none;
background: rgba(0,0,0,0.70);
}
#menu .active
{
background: rgba(0,0,0,0.70);
}
Working menu:
a quick fiddle for you
//HTML
<div id="menu">
<ul>
<li>Home
</li>
<li>Services
<ul>
<li>Something You do
</li>
<li>TODO
</li>
</ul>
</li>
<li>FAQ
</li>
<li class="active">About
</li>
<li>Contact Us
</li>
</ul>
</div>
//CSS
/** MENU */
#menu {
position:relative;
height: 110px;
}
#menu ul {
margin: 0px;
padding: 0px;
float:left;
line-height: 110px;
}
#menu li {
list-style:none;
}
#menu>ul>li {
float: left;
margin-right: 1px;
position:relative;
}
#menu>ul>li ul {
height:100%;
position:absolute;
bottom:-100%
}
#menu>ul>li ul>li {
bottom:0px;
display:none;
width:15em;
float:left;
}
#menu>ul>li:hover ul>li {
display:block
}
#menu a {
display:block;
padding: 0px 30px;
text-decoration: none;
text-transform: uppercase;
color: #FFFFFF;
background:rgba(200, 200, 200, 0.5);
}
#menu a:hover {
text-decoration: none;
cursor:pointer;
background:rgba(200, 200, 200, 1);
}
#menu .active {
}
Better to use jQuery plugin like Superfish
http://users.tpg.com.au/j_birch/plugins/superfish/
//link to the CSS files for this menu type
<link rel="stylesheet" media="screen" href="superfish.css">
// link to the JavaScript files (hoverIntent is optional)
// if you use hoverIntent, use the updated r7 version (see FAQ)
<script src="hoverIntent.js"></script>
<script src="superfish.js"></script>
// initialise Superfish
<script>
jQuery(document).ready(function(){
jQuery('#menu ul').superfish();
});
</script>
Well, first add your submenu in the markup, for example:
<li>Services
<ul>
<li> sub menu item 1 </li>
<li> sub menu item 2 </li>
</ul>
</li>
....
Position your list items:
#menu li{
position: relative;
}
Style your sub menu:
#menu ul ul{
position:absolute;
left: 0;
top: 100px; /* height of the parent list item */
display: none; /* hide it */
}
#menu li:hover > ul{ /* show it when mouse is over the parent list item */
display:block;
}
Try http://jsfiddle.net/9LcfX/

HTML/CSS: Keep Hovered Image in Menu Title While Hovered Over Submenu

I have a menu that has an image for its title, and changes images when it isn't hovered anymore. However, I want it to keep the same image while I'm hovering over the submenu that opens up beneath it, rather than revert back to its unhovered state. Can this be done with HTML/CSS?
Here's the CSS Code:
ul#nav {
margin: 0 0 0 0px;
}
ul.drop a {
display:block;
color: transparent;
}
ul.drop, ul.drop li, ul.drop ul {
list-style: none;
margin: 0;
padding: 0;
border: 0px solid #fff;
background: transparent;
color: transparent
}
ul.drop {
position: relative;
z-index: 597;
float: left;
}
ul.drop li {
float: left;
line-height: 1.3em;
vertical-align: middle;
zoom: 1;
}
ul.drop li.hover, ul.drop li:hover {
position: relative;
z-index: 599;
cursor: default;
background: transparent;
}
ul.drop ul {
display:none;
position: absolute;
top: 100%;
left: 0;
z-index: 598;
width: 100%;
background: transparent;
border: 0px solid #fff;
}
ul.drop:hover ul {
display:block;
}
ul.drop ul li {
float: none;
}
ul.drop ul ul {
top: -2px;
left: 100%;
}
ul.drop li:hover > ul {
visibility: visible
}
And here's the HTML
<ul class='drop' id='nav' style='padding-bottom:8px;'>
<li><img alt='Share' border='0' onmouseout='this.src=&apos;normal.png&apos;' onmouseover='this.src=&apos;hovered.png&apos;' src='normal.png' style='padding:0px; margin:0px;'/>
<ul>
<li style='background-color:#202020;width:160px;padding:0px; margin:0px;'>
<!-- Share Buttons -->
</li>
</ul>
</li>
</ul>
Mmm.. i have a special trick for you, i hope you like it. I make HTML like this :
<ul id="nav" class="drop">
<li class="icon1">HOVER ME
<ul>
<li> HIDDEN MENU </li>
</ul>
</li>
<li class="icon1">HOVER ME 2
<ul>
<li> HIDDEN MENU </li>
</ul>
</li>
</ul>
and special css trick like this:
...
ul.drop li.icon1{
background: url(YOUR_IMAGE) no-repeat left top;
width: 140px;
}
ul.drop li.icon1:hover{
background: url(YOUR_IMAGE_HOVER) no-repeat left top;
}
...
Here the demo : http://jsfiddle.net/CsV7a/

Resources