search

Home >Web Front-end >HTML Tutorial >css hover drop-down menu_html/css_WEB-ITnose

css hover drop-down menu_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 12:17:411192browse

This post was last edited by BaronZ on 2012-12-19 15:41:05

My code is now that when the mouse moves over the root, the drop-down menu appears under the root. I want to change it so that when the mouse moves over it, the drop-down menu appears on the right side of the root (on the same line as the root). Is it possible? How do I change the code? 
  ul.cssMenu, ul.cssMenu ul{	list-style:none;	margin:0; 	padding:-10;	position: relative;}ul.cssMenu ul 						{         display:none; /*initially menu item is hidden*/        position: absolute; /*absolute positioning is important for menu to float*/        }ul.cssMenu li:hover > ul 			{ 	display:block;	background-color:red;}

<html><link href="1.css" type="text/css" rel="stylesheet" /><ul class="cssMenu">	<li>		<font color="blue">root<font>           		<ul>			<li><a href=#>sub</a></li>		</ul>	</li></ul></html>

Reply to discussion (solution)

Thanks for sharing your experience

ul.cssMenu li:hover > ul            {     display:block;    background-color:red;    top:-150px;    left:50px;}

There seems to be a problem with positioning

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Why is the absolutely positioned div not centered in IE6? _html/css_WEB-ITnoseNext article：Why is the absolutely positioned div not centered in IE6? _html/css_WEB-ITnose

Related articles

See more