Solved

css in asp menu

Posted on 2013-01-27
9
478 Views
Last Modified: 2013-01-29
hey guy i have a menu which i populate dymanically, now i can not get the 3rd menu item to be set with making the .menu ul li ul li:hover ul left to 200px, but i do not want to set it to 200px, what if the the item is more.


please help

i will post my code

.menu
{
	font-family: 'ABeeZee' , sans-serif;
	margin: 0px;
	padding: 0px;
	font-size: 12px !important;
	line-height: 38px !important;
	width: 100%;
}

.menu ul
{
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: block;
}

.menu li
{
	font-size: 12px !important;
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	line-height: 38px !important;
	float: left;
	position: relative;
}

.menu ul li:hover
{
	background-color: #333333;
}

.menu li a
{
	padding: 0px 13px 0px 13px;
	color: #AAAAAA;
	text-align: left;
}

.menu li a:hover
{
	color: #FFFFFF;
	cursor: pointer;
}

.menu ul li ul
{
	height: auto;
	background-color: #333333;
	width: auto;
	z-index: 99;
}

.menu ul li:hover ul
{
	display: inline-block;
}

.menu ul li ul li
{
	width: 100%;
	white-space: nowrap;
}

.menu li li
{
	display: block;
	float: none;
}

.menu li ul a
{
	color: #AAAAAA;
	padding: 0px 18px 0px 18px !important;
	width: 100%;
	display: block;
}

.menu ul li ul
{
	background-color: #333333;
}

.menu ul li ul li:hover ul
{
	z-index: 99;
	width: 100%;
}

.menu li ul li ul a:hover
{
	color: #FFFFFF;
}

Open in new window



<asp:Menu ID="mnu" DataSourceID="xmlDataSource" runat="server" Orientation="Horizontal" CssSelectorClass="menu" RenderingMode="Table" OnMenuItemClick="mnu_MenuItemClick">
                                        <DataBindings>
                                            <asp:MenuItemBinding DataMember="MenuItem" TextField="Text" ValueField="Id" ToolTipField="Parent_Id" />
                                        </DataBindings>
                                    </asp:Menu>

Open in new window

0
Comment
Question by:JCWEBHOST
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 4
9 Comments
 
LVL 53

Expert Comment

by:Scott Fell, EE MVE
ID: 38825872
can you please post your rendered code.

It is probably line 48 in your code that needs to be changed from

.menu ul li ul
{
      height: auto;
      background-color: #333333;
      width: auto;
      z-index: 99;
}

to

.menu ul li ul
{
      height: auto;
      background-color: #333333;
      width: 200px;
      z-index: 99;
}
0
 

Author Comment

by:JCWEBHOST
ID: 38825879
no i want to make it absoulte width
0
 
LVL 53

Expert Comment

by:Scott Fell, EE MVE
ID: 38825905
Please post your rendered html.  What do you mean by absolute width?


.menu ul li ul li
{
      width: 200px;
      white-space: nowrap;
}
http://jsbin.com/iwuqiy/1/edit
  <div class="menu">
<ul>
<li><a  href="#">item</a></li>
<li><a  href="#">item</a>
<ul>
<li><a  href="#">sub</a></li>
<li><a  href="#">sub</a></li>
<li><a  href="#">sub</a></li>

</ul>
</li>
</ul>
</div>
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:JCWEBHOST
ID: 38825924
menu

i do not want to put 200px for the width
0
 

Author Comment

by:JCWEBHOST
ID: 38825949
you see what if the li text more than 200px
0
 
LVL 53

Accepted Solution

by:
Scott Fell,  EE MVE earned 500 total points
ID: 38825990
how hard is it to post your rendered html?

Do you want the  long text to  wrap?  add padding
0
 

Author Comment

by:JCWEBHOST
ID: 38826008
<div class="menu" id="ctl00_Contents_mnu">
		<div class="AspNet-Menu-Horizontal">
				<ul class="AspNet-Menu">
					<li class="AspNet-Menu-WithChildren">
						<a href="javascript:__doPostBack('ctl00$Contents$mnu','b1')" class="AspNet-Menu-Link" title="Products">
							Products</a>
						<ul>
							<li class="AspNet-Menu-Leaf">
								<a href="javascript:__doPostBack('ctl00$Contents$mnu','b1\\2')" class="AspNet-Menu-Link" title="The Real Thing">
									The Real Thing</a>
							</li>
							<li class="AspNet-Menu-Leaf">
								<a href="javascript:__doPostBack('ctl00$Contents$mnu','b1\\4')" class="AspNet-Menu-Link" title="Salt of the Earth">
									Salt of the Earth</a>
							</li>
							<li class="AspNet-Menu-Leaf">
								<a href="javascript:__doPostBack('ctl00$Contents$mnu','b1\\5')" class="AspNet-Menu-Link" title="Future Life">
									Future Life</a>
							</li>
							<li class="AspNet-Menu-Leaf">
								<a href="javascript:__doPostBack('ctl00$Contents$mnu','b1\\6')" class="AspNet-Menu-Link" title="QUANTUM Japanese Technology">
									QUANTUM Japanese Technology</a>
							</li>
							<li class="AspNet-Menu-Leaf">
								<a href="javascript:__doPostBack('ctl00$Contents$mnu','b1\\28')" class="AspNet-Menu-Link" title="ritesh">
									ritesh</a>
							</li>
						</ul>
					</li>
				</ul>

		</div>
	</div>

Open in new window

0
 

Author Comment

by:JCWEBHOST
ID: 38826010
sorry but i do not want to pad it, want width to be auto please
0
 
LVL 53

Expert Comment

by:Scott Fell, EE MVE
ID: 38831447
Did you figure this out?
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses four methods for overlaying images in a container on a web page
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

737 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question