toxic345 Posted December 26, 2012 Share Posted December 26, 2012 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;} Link to comment Share on other sites More sharing options...
Ingolme Posted December 26, 2012 Share Posted December 26, 2012 Setting margin instead of padding to position the link will prevent that from happening. Link to comment Share on other sites More sharing options...
toxic345 Posted December 26, 2012 Author Share Posted December 26, 2012 (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 December 26, 2012 by toxic345 Link to comment Share on other sites More sharing options...
Ingolme Posted December 27, 2012 Share Posted December 27, 2012 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now