Jump to content

Menu buttons: hover area is too big

toxic345

By toxic345
in CSS

 Share

Recommended Posts

toxic345 Newbie

toxic345

Posted
Posted

Hi, i'm new to html and css and i have a problem with something i'm trying to make:So made a horizontal menu, and i used margin-top to move the buttons where i wanted them, in my css the buttons change color when i hover them, but the hover 'area' hasn't moved like i wanted it. So now when i put my mouse in the area above the buttons, they still change color. Could anybody help me solve this please?You can see the error in the attachment.I will provide my code here, thanks in advance: HTML:<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl"><head><title></title><link rel=StyleSheet href="style.css" type="text/css"/></head> <body><div id="header"><a href="index.html"><img id="banner" src="banner.png"/></a><p><ul id="drop-down-menu"><li><a href="index.html">Start</a></li><li><a href="">menu</a> <ul><li><a href="">menu</a></li><li><a href="">menu</a></li> <li><a href="">menu</a></li> </ul> </li> <li><a href="">menu</a> <ul> <li><a href="">menu</a></li> <li><a href="">menu</a></li> <li><a href="">menu</a></li> <li><a href="">menu</a></li> </ul> </li><li><a href="">menu</a> <ul> <li><a href="">menu</a></li> <li><a href="">menu</a></li> <li><a href="">menu</a></li><li><a href="">menu</a></li> <li><a href="">menu</a></li> </ul> </li> <li><a href=""></a></li> </ul></p><p class="clear_all"/></div> CSS:body {background-color:#FEF9DB;}#header {width: 101%;height: 150px;background-color: #668284;margin-top: -16px;margin-left: -8px;margin-right: -10px;}#drop-down-menu {margin-left:20px;}#banner{float: left;}h2 {color:#03273B;}ul {font-weight:bold;color:#FFFFFF;margin:0;padding:0;list-style:none}ul li {display:block;position:relative;float:left;}li ul {display:none;}ul li a {display:block;margin-left:10px;text-decoration:none;color:#FFFFFF;border-top:1px solid #FF0000;border-left:1px solid #FF0000;border-bottom:1px solid #3B0303;border-right:1px solid #3B0303;padding: 5px 15px 5px 15px;background-color:#660000;white-space:nowrap;border-radius:10px;margin-right:5px;margin-top: 135px;}ul li ul li a {margin-top: 0px;}ul li a:hover {background:#CC0000;color:inherit;}li:hover ul { display:block; position:absolute;}li:hover li { font-size:70%;clear:left; width:12em;}li:hover a { background:#CC0000;color:inherit;}li:hover li a:hover {background:#FF0000;color:inherit;}.clear_all {clear:both;height:0.5em;}

post-113918-0-65130400-1356533904_thumb.png

Link to comment
Share on other sites
toxic345 Newbie

toxic345

Posted
  • Author
Posted (edited)

But i have moved them with margin here:}ul li a {display:block;margin-left:10px;text-decoration:none;color:#FFFFFF;border-top:1px solid #FF0000;border-left:1px solid #FF0000;border-bottom:1px solid #3B0303;border-right:1px solid #3B0303;padding: 5px 15px 5px 15px;background-color:#660000;white-space:nowrap;border-radius:10px;margin-right:5px;margin-top: 135px;} If this is not what you meant, could you explain what to do where more clearly please?

Edited by toxic345
Link to comment
Share on other sites
Ingolme w3schools Guru

Ingolme

Posted
Posted

These rules are causing the problem:

li:hover a {background:#CC0000;color:inherit;}li:hover li a:hover {background:#FF0000;color:inherit;}

You can just delete them and the code should work just the same except without the problem. When targeting li:hover, you're highlighting the <a> element as long as the mouse is over the entire <li> element.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...