Member Avatar for apollokid

Hi All I can't figure out the selector name for the li item freshperspective.
See I am trying to roll over the list item fresh perspective and have the list show underneath it. I can get it with the following css styling but It is visible when you roll over anything in the ul #menu. Does anyone know the selector i would use just for fresh perspective? Hope I am using the right terminology :)

#menu .level2{
position:absolute;
visibility:hidden;
margin:0px;
padding:0px;
}
#menu:hover a.level2  {
visibility:visible;

}
#menu a.level2 {
height:15px;
margin-top: 22px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 20px;
padding-top: 5px;
padding-right: 0px;
padding-bottom: 3px;
padding-left: 3px;
border-top-width: thin;
border-top-style: solid;
border-top-color: #b42915;
border-bottom-width: thin;
border-bottom-style: solid;
border-bottom-color: #b42915;
line-height: 15px;
font-size: 14px;
color: #ffffff;
text-transform: uppercase;
width:135px;
position:absolute;
}
<ul id="menu">
<li class="level1">
<a class="level1 item1 first" href="/index.php/fresh-perspective">
<span class="bg">Fresh Perspective</span></a>
</li>
<ul class="level2">
<li class="level2 item1 first last">
<a class="level2 item1 first last" href="#" style="background-color: rgb(65, 64, 63);">
<span class="bg">Weekly Specials</span></a>
</li></ul>
<li class="level1">
<a class="level1 item2 last" href="/index.php/fresh-perspective">
<span class="bg">test</span></a>
</li>
</li>
</ul>
Edited by apollokid because: n/a
  • 4 Contributors
  • 4 Replies
  • 99 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by ko ko
Member Avatar for kidwon

If you mean the first li item then the selector is

#menu .level1
Member Avatar for apollokid

thanks but didn't work for me

Member Avatar for Kraai

Hi apollokid, I think it is because your <li> for level2 is inside the <ul> tag, that may be the reason why the list hovers over all the <ul> items. But, I may be wrong. See what happens if you take it out from inside the <ul> tag.

Member Avatar for ko ko

Here is example for CSS pop-up menu.
Horizontal

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<style type="text/css">
<!--
#menu {
	background: #f0f0f0;
	border: 1px solid #ddd;
	height: 33px;
	margin: 0;
	padding: 0;
}
#menu li {
	border-right: 1px solid #f8f8f8;
	display: block;
	float: left;
	height: 33px;
	line-height: 33px;
	margin: 0;
	position: relative;
}
#menu li a {
	border-right: 1px solid #d7d7d7;
	display: block;
	padding: 0 1.4em;
}
#menu li .sub {
	background: #f0f0f0;
	border: 1px solid #ddd;
	border-top: 1px solid #f0f0f0;
	display: none;
	left: -0.1em;
	margin: 0;
	min-width: 176px;
	padding: 0;
	position: absolute;
	top: 34px;
	width: 176px;
}
#menu .sub li {
	border: none;
	border-bottom: 1px solid #d7d7d7;
	display: block;
	float: none;
}
#menu li:hover ul a {
	background: none;
	border: none;
}
#menu li:hover a, #menu li a:hover, #menu li .sub li:hover a, #menu li .sub li a:hover {
	background: #f7f7f7;
}
#menu li:hover .sub {
	display: block;
}
-->
</style>
</head>
<body>
<ul id="menu">
	<li><a href="#">Item 1</a>
		<ul class="sub">
			<li><a href="#">Item 1-1</a></li>
			<li><a href="#">Item 1-2</a></li>
			<li><a href="#">Item 1-3</a></li>
		</ul>
	</li>
	<li><a href="#">Item 2</a>
		<ul class="sub">
			<li><a href="#">Item 2-1</a></li>
			<li><a href="#">Item 2-2</a></li>
			<li><a href="#">Item 2-3</a></li>
		</ul>
	</li>
	<li><a href="#">Item 3</a>
		<ul class="sub">
			<li><a href="#">Item 3-1</a></li>
			<li><a href="#">Item 3-2</a></li>
			<li><a href="#">Item 3-3</a></li>
		</ul>
	</li>
	<li><a href="#">Item 4</a>
		<ul class="sub">
			<li><a href="#">Item 4-1</a></li>
			<li><a href="#">Item 4-2</a></li>
			<li><a href="#">Item 4-3</a></li>
		</ul>
	</li>
	<li><a href="#">Item 5</a>
		<ul class="sub">
			<li><a href="#">Item 5-1</a></li>
			<li><a href="#">Item 5-2</a></li>
			<li><a href="#">Item 5-3</a></li>
		</ul>
	</li>
</ul>
</body>
</html>

Vertical

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<style type="text/css">
<!--
#menu {
	background: #f0f0f0;
	border: 1px solid #ddd;
	margin: 0;
	padding: 0;
	width: 176px;
}
#menu li {
	border-bottom: 1px solid #d7d7d7;
	display: block;
	position: relative;
}
#menu li a {
	display: block;
	padding: 0.3em 0.5em;
}
#menu li .sub {
	background: #f0f0f0;
	border: 1px solid #ddd;
	border-left: 1px solid #f0f0f0;
	display: none;
	left: 177px;
	margin: 0;
	min-width: 176px;
	padding: 0;
	position: absolute;
	top: 0;
	width: 176px;
}
#menu li:hover ul a {
	background: none;
}
#menu li:hover a, #menu li a:hover, #menu li .sub li:hover a, #menu li .sub li a:hover {
	background: #f7f7f7;
}
#menu li:hover .sub {
	display: block;
}
-->
</style>
</head>
<body>
<ul id="menu">
	<li><a href="#">Item 1</a>
		<ul class="sub">
			<li><a href="#">Item 1-1</a></li>
			<li><a href="#">Item 1-2</a></li>
			<li><a href="#">Item 1-3</a></li>
		</ul>
	</li>
	<li><a href="#">Item 2</a>
		<ul class="sub">
			<li><a href="#">Item 2-1</a></li>
			<li><a href="#">Item 2-2</a></li>
			<li><a href="#">Item 2-3</a></li>
		</ul>
	</li>
	<li><a href="#">Item 3</a>
		<ul class="sub">
			<li><a href="#">Item 3-1</a></li>
			<li><a href="#">Item 3-2</a></li>
			<li><a href="#">Item 3-3</a></li>
		</ul>
	</li>
	<li><a href="#">Item 4</a>
		<ul class="sub">
			<li><a href="#">Item 4-1</a></li>
			<li><a href="#">Item 4-2</a></li>
			<li><a href="#">Item 4-3</a></li>
		</ul>
	</li>
	<li><a href="#">Item 5</a>
		<ul class="sub">
			<li><a href="#">Item 5-1</a></li>
			<li><a href="#">Item 5-2</a></li>
			<li><a href="#">Item 5-3</a></li>
		</ul>
	</li>
</ul>
</body>
</html>

You can learn here for more CSS menus. http://www.free-css.com/free-css-menus/page1.php Stu Nicholls has the greatest CSS techniques like menu, tab, toggle element, etc.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.