Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 482
  • Last Modified:

css in asp menu

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
JCWEBHOST
Asked:
JCWEBHOST
  • 5
  • 4
1 Solution
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
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
 
JCWEBHOSTAuthor Commented:
no i want to make it absoulte width
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
JCWEBHOSTAuthor Commented:
menu

i do not want to put 200px for the width
0
 
JCWEBHOSTAuthor Commented:
you see what if the li text more than 200px
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
how hard is it to post your rendered html?

Do you want the  long text to  wrap?  add padding
0
 
JCWEBHOSTAuthor Commented:
<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
 
JCWEBHOSTAuthor Commented:
sorry but i do not want to pad it, want width to be auto please
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Did you figure this out?
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

  • 5
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now