Oh no! Where's the JavaScript?
Your Web browser does not have JavaScript enabled or does not support JavaScript. Please enable JavaScript on your Web browser to properly view this Web site, or upgrade to a Web browser that does support JavaScript.
Sign In
Not a member yet? Click here to register.
E

Change Hover

by emilife93, Last updated on 8 years ago in Content Administration - 8
Greeting,

I success create the same drop-down menu....but i want change the the the colour background when cursor touch the menu....


My Website
www.murabbi.net/navi.jpg

Example This
www.murabbi.net/dropdown.jpg
Excellent so do you want to show me your CSS for the menu or should I just try to guess?

Tell you what, show me your CSS first then I will do the guessing, how does that sound?

Quote

Fangree Productions wrote:
Excellent so do you want to show me your CSS for the menu or should I just try to guess?

Tell you what, show me your CSS first then I will do the guessing, how does that sound?


/* Comment element properties */

a {
   color: #b40001;
   text-decoration: none;
}

a:hover {
   color: #b40001;
   text-decoration: underline;#FFFF00
}

a.side {
   color: #555;
   text-decoration: none;
}

a:hover.side {
   color: #b40001;
   text-decoration: underline;
}

a.white, 12.white a {
   color: #fff;
   text-decoration: none;
}

a:hover.white, li.white a:hover {
   color: #fff;
   text-decoration: underline;
}

body {
   font-family : Helvetica, sans-serif;
   font-size : 12px;
   background-image: url('images/background.jpg');
      background-position: top center;
   background-repeat: repeat;
   margin: 0px auto;
}

hr {
   height: 1px;
   border: 1px solid #D8D8D8;
}

hr.side-hr {
   height: 1px;
   border: 1px solid #eee;
}

td {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 12px;
}

pre {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 12px;
}

.alt {
   color: #b40001;
}

.spacer {
   margin-bottom: 5px;
}

.admin-message {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 12px;
   text-align: center;
   color: #555;
   background-color: #f6f6f6;
   border: 1px solid #e1e1e1;
   padding: 3px 4px 5px 4px;
   margin-bottom: 5px;
}

/* Form element properties */

form {
   margin: 0px;
}

.button {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 10px;
   color: #fff;
   background-color: #b40001;
   height: 20px;
   border: 1px solid #000;
   margin-top: 2px;
}

.bbcode {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 10px;
   color: #000;
   background-color: #eee;
   border: 1px solid #ccc;
   margin-top: 2px;
}

.textbox {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 10px;
   color: #555;
   background-color: #f8f8f8;
   border: 1px solid #ccc;
}

/* Header and footer properties */

.sub-header {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 10px;
   color: #fff;
   background-color: #555;
   background-image: url(images/subheader-mid.gif);
   padding: 7px 5px 8px 5px;
}

.sub-header-left {
   width: 3px;
   height: 28px;
   background-color: #555;
   background-image: url(images/subheader-left.gif);
}

.sub-header-right {
   width: 3px;
   height: 28px;
   background-color: #555;
   background-image: url(images/subheader-right.gif);
}

.sub-header ul{
   margin: 0;
   padding: 0;
}

.sub-header ul li{
   display: inline;
}

.sub-header ul li.first-link .bullet{
   display: none;
}

.full-header {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 10px;
   color: #000;
   background-color: transparent;
   background-repeat: repeat;
   padding: 0px 0 0px 0;
}

.main-footer {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 10px;
   color: #555;
   background-color: transparent;
   padding: 5px;
}

.bottom-footer {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 10px;
   color: #fff;
   background-color: #fff;
   padding: 4px 4px 5px 4px;
}

.main-body {
   font-size: 11px;
   color: #000000;
   background-color: #fff;
   border: 1px solid #ddd;
   padding: 4px;
}
/* Side-Panel properties */


.side-left .side-border-right {display: none;}
.side-right .side-border-left {display: none;}

.side-border-left {
   color: #777;
   background-color: #fff;
   padding: 10px 10px 10px 0;
   width: 175px;
}

.side-border-right {
   color: #777;
   background-color: #fff;
   padding: 10px 0 10px 10px;
   width: 175px;
}

.scapmain {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 12px;
   font-weight: normal;
   color: #fff;
   background-color: #555;
   background-image: url(images/side.gif);
  background-repeat: repeat-x;
   padding: 6px 4px 6px 4px;
}

.scapmain-left {
   width: 3px;
   height: 24px;
   background-color: #555;
   background-image: url(images/side-left.gif);
}

.scapmain-right {
   width: 3px;
   height: 24px;
   background-color: #555;
   background-image: url(images/side-right.gif);
}

.side-body {
   font-size: 10px;
   color: #555;
   background-color: #fff;
   background-image: url(images/gradient.gif);
  background-repeat: repeat-x;
   border: 1px solid #ddd;
   padding: 4px;
}

/* Center-Panel properties */

.news-category {
   border: 0;
   margin: 3px 5px 0 0;
   float: left;
}

.news-footer {
   background: #F0F4F7;
   background-image:url(images/news-footer.gif);
   font-size:9px;
   font-weight:normal;
   color:#0C0C0C;
   height:22px;
   padding:4px 4px 4px 4px;
}

.capmain {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 13px;
   font-weight: normal;
   color: #FFF;
   background-color: #555;
   background-image: url(images/cap.gif);
  background-repeat: repeat-x;
   padding: 6px 4px 6px 4px;
}

.capmain-left {
   width: 3px;
   height: 25px;
   background-color: #555;
   background-image: url(images/cap-left.gif);
}

.capmain-right {
   width: 3px;
   height: 25px;
   background-color: #555;
   background-image: url(images/cap-right.gif);
}

.main-bg {
   color: #555;
   background-color: #fff;
   padding: 10px 0 5px 0;
}

/* General table properties */

.center {
   margin: 0 auto;
}

.tbl-border {
   border: 3px solid #DFDFDF;
}

.tbl {
   font-size: 13px;
   color: #000000;
   background-color: #FFF;
   padding: 4px;
}

.tbl1 {
   font-size: 13px;
   color: #000000;
   background-color: #EAFFD5;
   padding: 4px;
}

.tbl2 {
   font-size: 13px;
   color: #000000;
   background-color: #CCFF99;
   padding: 4px;
}

.forum-caption {
   font-size: 13px;
   font-weight: bold;
   color: #888;
   background-color: #f1f1f1;
   padding: 2px 4px 4px 4px;
}

.quote {
   font-size: 11px;
   color: #555;
   background-color: #f8f8f8;
   padding: 4px;
   margin: 0px 20px 0px 20px;
   border: 1px solid #bbb;
}

.poll {
   height: 12px;
   border: 1px solid #bbb;
}

.comment-name {
   font-weight: bold;
   color: #b40001;
}

.shoutboxname {
   font-weight: bold;
   color: #b40001;
}

.shoutbox {
   color: #777;
}

.shoutboxdate {
   font-size: 10px;
   color: #888;
}

.small {
   font-size: 10px;
   font-weight: normal;
}

.small2 {
   font-size: 10px;
   font-weight: normal;
   color: #555;
}

.side-small {
   font-size: 10px;
   font-weight: normal;
   color: #555;
}

.side-label {
   color: #555;
   background-color: #f1f1f1;
   margin: 2px 0 2px 0;
   padding: 2px 2px 3px 2px;
}
#navBar, #navBarOverlay {
height: 32px;
width: 100%;
}

#navBar {
background: #EAEFEF url('images/navbar.gif') top left repeat-x;
}

#navBarOverlay {
background: url('images/navbar.gif') top left no-repeat;
}

#clearmenu {
clear: both;
}

#menu, #menu ul {
list-style: none;
margin: 0;
padding: 0;
}

#menu ul.submenu {
padding-top: 2px;
padding-bottom: 4px;
}

#menu li {
float: left;
position: relative;
}

.menu {
cursor: default;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
height: 22px;
letter-spacing: 1px;
margin: 6px 2px 0 2px;
position: absolute;
}

.menu p { 
font-weight: bold;
margin: 0;
padding: 0;
padding: 3px 12px 1px 12px;

]}

.link {
cursor: default;
height: 20px;
letter-spacing: 1px;
margin: 6px 2px 0 2px;
line-height: 20px;
position: absolute;
}

.link a {
color: #444444;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
padding: 3px 12px 3px 12px;
}

.link a:hover {
color: #FFFFFF;
}

.submenu {
background-color: #FFFFFF;
border: 2px solid #008000;
border-top-width: 3px;
cursor: default;
display: none;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 13px;
left: auto;
position: absolute;
width: 138px;
}

.submenu li {
width: 100%;
}
.submenu li a {
background: url('images/submenu.gif') top left repeat-x;
display: block;
font-size: 13px;
height: 19px;
line-height: 19px;
letter-spacing: normal;
margin-top: 2px;
text-decoration: none;
text-indent: 7px;
width: 100%;
}

.submenu li a.divider {
height: 22px;
}

.submenu li a:hover {
background: url('images/submenuhot.gif') top left repeat-x;
color: #FFFFFF;
display: block;
text-decoration: none;
}

#menu li>ul {
left: auto;
top: auto;
}

#menu li:hover ul, li.over ul {
display: block;
}

html>body .submenu li a {
width: auto;
}

html>body #clearmenu {
height: 3px;
}

.side-label {
   color: #2E2E2E;
   font-size: 13px;
   font-weight: normal;
   background-color: #fff;
   border-color: #DAE2E3;
   border-width: 1px;
   border-style: solid;
   margin: 1px;
   padding: 2px 2px 3px 2px;
}

/* Vertical Navigation */

#navigation h2 {
   font-size: 10px;
   font-weight: normal;
   background-color: #f1f1f1;
   margin: 0;
   padding: 4px;
}
   
#navigation ul {
   margin: 0;
   padding: 0;
   list-style-type: none;
}

* html #navigation ul li{
   height: 1%;
}

#navigation a {
   display: block;
   color: #555;
   padding: 2px;
   text-decoration: none;
}

#navigation a:hover {
   color: #fff;
   background-color: #b40001;
}

/* Page Navigation */

.pagenav {
   padding: 4px;
}

.pagenav span {
   color: #fff;
   background-color: #b40001;
   border: 1px solid #ddd;
   padding: 2px 4px 2px 4px;
   margin: 2px;
}

.pagenav a {
   color: #555;
   background-color: #f1f1f1;
   border: 1px solid #ddd;
   padding: 2px 4px 2px 4px;
   margin: 2px;
   text-decoration: none;
}

.pagenav a:hover {
   color: #fff;
   background-color: #b40001;
   margin: 2px;
   text-decoration: none;
}
No idea sorry.
Link to your site?
I'm too lazy to analyze this code :)

Quote

PolarFox wrote:
Link to your site?
I'm too lazy to analyze this code :)


www.murabbi.net
[syntaxhighlighter brush=css,first-line=1,highlight=0,collapse=false,html-script=false].submenu li a:hover {
background: url('images/submenuhot.gif'wink top left repeat-x;
color: #FFFFFF;
display: block;
text-decoration: none;
}[/syntaxhighlighter]

Here you are, it's a picture.
background: url('images/submenuhot.gif'wink

Quote

PolarFox wrote:
[syntaxhighlighter brush=css,first-line=1,highlight=0,collapse=false,html-script=false].submenu li a:hover {
background: url('images/submenuhot.gif') top left repeat-x;
color: #FFFFFF;
display: block;
text-decoration: none;
}[/syntaxhighlighter]

Here you are, it's a picture.
background: url('images/submenuhot.gif')


this is for sub menu...but i want it for menu
Sorry, then you must do:

add the new CSS class
[syntaxhighlighter brush=css,first-line=1,highlight=0,collapse=false,html-script=false]li.menu:hover {
/* your style here */
}[/syntaxhighlighter]

Maybe won't work in IE.

Quote

PolarFox wrote:
Sorry, then you must do:

add the new CSS class
[syntaxhighlighter brush=css,first-line=1,highlight=0,collapse=false,html-script=false]li.menu:hover {
/* your style here */
}[/syntaxhighlighter]

Maybe won't work in IE.


thanx...working

Quote

Fangree_Craig wrote:
Excellent so do you want to show me your CSS for the menu or should I just try to guess?

Tell you what, show me your CSS first then I will do the guessing, how does that sound?


i get feeback from my user..say the drop down not function.....what the problem who know?
You can view all discussion threads in this forum.
You can start a new discussion thread in this forum.
You cannot reply in this discussion thread.
You cannot start on a poll in this forum.
You cannot upload attachments in this forum.
You can download attachments in this forum.
Users who participated in discussion: Craig, PolarFox, emilife93