Im having some issues trying to adjust the Width of some of the items for this JQuery Menu that I downloaded from here: http://apycom.com/menus/6-midnight-blue.html
The CSS is very complex, but I was able to narrow down the Width for the entire Menu, but the other parts have been difficult to track down.
I would like to have the overall Menu width about the same size as the Red Div marked below it.
The slider itself- which moves as you hover over the main menu items is too wide, and Im not sure how to adjust that.
The last menu item "Request Estimate" appears to have no padding at all, and it looks cramped compared to the other menu items. It is the longest spelled word and thats why, but I would like to figure out a way to slightly reduce the size of the other Main Menu Item widths.
The Sub Menu Box is almost twice the width of the Main Menu Items, and I have no idea how to reduce the width for this.
With limmited CSS knowledge I seem to messing things up, more than fixing anything.
Any help on this would be greatly appreciated.
Here is the CSS which came with the JQuery download, and I have made adjustments to this:
/* menu::base */
div#menu {
height: 51px;
padding-left: 14px;
background: url(images/left.png) no-repeat;
_background: url(images/left.gif) no-repeat;
width:auto;
}
div#menu ul {
margin: 0;
padding: 0;
list-style: none;
float: left;
}
div#menu ul.menu {
padding-right: 14px;
background: url(images/right.png) no-repeat right 0;
_background: url(images/right.gif) no-repeat right 0;
}
div#menu li {
position: relative;
margin: 0;
padding: 0 0px 0 0;
/*background: green;*/
display: block;
float: left;
z-index: 9;
width: auto;
}
div#menu ul ul li {
z-index: 9;
}
div#menu li div {
list-style: none;
float: left;
position: absolute;
z-index: 11;
top: 51px;
left: -3px;
visibility: hidden;
width: 194px;
margin: 0px 0 0 -4px;
padding: 0;
background: url(images/subsubmenu-top.png) no-repeat 0px 0;
_background: url(images/subsubmenu-top.gif) no-repeat 0px 0;
}
div#menu ul ul {
z-index: 12;
padding: 0px 4px 10px 4px;
background: url(images/submenu-bottom.png) no-repeat 0px bottom;
_background: url(images/submenu-bottom.gif) no-repeat 0px bottom;
margin: 10px 0 0 0;
}
div#menu li:hover>div {
visibility: visible;
}
div#menu a {
position: relative;
z-index: 10;
height: 50px;
display: block;
float: left;
line-height: 50px;
text-decoration: none;
margin-top: 1px;
white-space: nowrap;
/*width: auto;*/
width: 90px; /*adjust overal menu width*/
padding-right:5px;
text-align:center;
}
div#menu span {
margin-top: 2px;
/*padding-left: 15px;*/
padding-left: 2px;
color: #A6C4D5;
font: bold 12px Arial,Helvetica;
background: none;
line-height: 50px;
display: block;
cursor: pointer;
background-repeat: no-repeat;
background-position: 95% 0;
text-align: center;
}
/* menu::level1 */
div#menu a {
padding: 0 10px 0 0;
line-height: 50px;
height: 51px;
margin-right: 5px;
_margin-right: 1px;
background: none;
}
div#menu a:hover {
background: url(images/selected.png) repeat-x right -1px;
color: #FFFFFF;
}
div#menu li.current a,
div#menu ul.menu>li:hover>a {
color: #FFFFFF;
background: url(images/selected.png) repeat-x right -1px;
}
div#menu ul.menu>li:hover>a span {
color: #FFFFFF;
}
div#menu li { }
div#menu li.last { background: none; }
/* menu::level2 */
div#menu ul ul li {
background: none;
padding: 0;
}
div#menu ul ul a {
padding: 0px;
height: auto;
float: none;
display: block;
line-height: 25px;
z-index: -1;
padding-left: 5px;
white-space: normal;
width: 164px;
margin: 0 8px;
text-transform: none;
border-top: 1px solid #3A5A8B;
border-bottom: 1px solid #162133;
}
div#menu ul ul a span {
font-weight:normal;
padding: 0 5px;
line-height: 25px;
font-size: 12px;
color: #C5D3E7;
}
div#menu li.current ul a,
div#menu li.current ul a span {
background:none;
}
div#menu ul ul a:hover {
background:none;
background-color: #21345A;
}
div#menu ul ul a:hover span {
background:none;
color: #FFFFFF;
}
div#menu ul ul a.parent {
background: url(images/submenu-pointer.png) no-repeat right bottom;
_background: url(images/submenu-pointer.gif) no-repeat right bottom;
}
div#menu ul ul a.parent span {
background:none;
}
div#menu ul ul a.parent:hover {
background: url(images/submenu-pointer.png) no-repeat right bottom;
_background: url(images/submenu-pointer-hover.gif) no-repeat right bottom;
background-color: #21345A;
color: #FFFFFF;
}
div#menu ul ul a.parent:hover span {
background:none;
}
div#menu ul ul span {
margin-top: 0;
text-align: left;
}
div#menu ul ul li.last { background: none; }
div#menu ul ul li {
width: 100%;
}
/* menu::level3 */
div#menu ul ul div {
/*width: 194px;*/
padding: 0;
margin: -51px 0 0 192px !important;
margin-left: 192px;
}
div#menu ul ul ul {
padding: 10px 4px 0 4px;
}
div#menu ul ul div li {
position:relative;
top:-10px;
}
/* lava lamp */
div#menu li.back {
background: url(images/selected.png) repeat-x 0 0;
width: 5px;
height: 51px;
z-index: 8;
position: absolute;
padding: 0;
margin: 0px 0 0 0;
}
div#menu li.back .left {
padding:0;
width:auto;
background: url(images/selected.png) repeat-x right 0;
height: 51px;
margin: 0 0 0 5px;
float: none;
position: relative;
top: 0;
left: 0;
visibility: visible;
}
Here is the HTML:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="DaVincisApp1.WebForm1" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="menu.css" rel="Stylesheet" type="text/css" />
<script type="text/javascript" src="Scripts/jquery.js"></script>
<script type="text/javascript" src="Scripts/menu.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div style="margin-left:1em; margin-top:5em;">
<div id="menu">
<ul class="menu">
<li><a href="#" class="parent"><span>Home</span></a>
<div><ul>
<li><a href="#" class="parent"><span>Sub Item 1</span></a>
<div><ul>
<li><a href="#" class="parent"><span>Sub Item 1.1</span></a>
<div><ul>
<li><a href="#"><span>Sub Item 1.1.1</span></a></li>
<li><a href="#"><span>Sub Item 1.1.2</span></a></li>
</ul></div>
</li>
<li><a href="#"><span>Sub Item 1.2</span></a></li>
<li><a href="#"><span>Sub Item 1.3</span></a></li>
<li><a href="#"><span>Sub Item 1.4</span></a></li>
<li><a href="#"><span>Sub Item 1.5</span></a></li>
<li><a href="#"><span>Sub Item 1.6</span></a></li>
<li><a href="#" class="parent"><span>Sub Item 1.7</span></a>
<div><ul>
<li><a href="#"><span>Sub Item 1.7.1</span></a></li>
<li><a href="#"><span>Sub Item 1.7.2</span></a></li>
</ul></div>
</li>
</ul></div>
</li>
<li><a href="#"><span>Sub Item 2</span></a></li>
<li><a href="#"><span>Sub Item 3</span></a></li>
</ul></div>
</li>
<li><a href="#"><span>About Us</span></a>
<div><ul>
<li><a href="#" class="parent"><span>Our Core Values</span></a>
<div><ul>
<li><a href="#"><span>Sub Item 1.1</span></a></li>
<li><a href="#"><span>Sub Item 1.2</span></a></li>
</ul></div>
</li>
<li><a href="#" class="parent"><span>Company History</span></a>
<div><ul>
<li><a href="#"><span>Sub Item 2.1</span></a></li>
<li><a href="#"><span>Sub Item 2.2</span></a></li>
</ul></div>
</li>
<li><a href="#"><span>Our Process</span></a></li>
<li><a href="#"><span>Our Credentials</span></a></li>
<li><a href="#"><span>Our Guarantee</span></a></li>
<li><a href="#"><span>Why DaVinci's</span></a></li>
</ul></div>
</li>
<li><a href="#"><span>Services</span></a>
<div><ul>
<li><a href="#"><span>Residential</span></a></li>
<li><a href="#"><span>Faux Painting</span></a></li>
<li><a href="#"><span>Wallpaper Services</span></a></li>
<li><a href="#"><span>Commercial</span></a></li>
<li><a href="#"><span>Drywall Services</span></a></li>
<li><a href="#"><span>Powerwashing</span><开发者_开发问答/a></li>
<li><a href="#"><span>Painter-For-A-Day</span></a></li>
<li><a href="#"><span>Priority Service</span></a></li>
</ul></div>
</li>
<li><a href="#"><span>Porfolio</span></a>
<div><ul>
<li><a href="#"><span>Interior Gallery</span></a></li>
<li><a href="#"><span>Exterior Gallery</span></a></li>
<li><a href="#"><span>Faux Gallery</span></a></li>
<li><a href="#"><span>Commercial Jobs</span></a></li>
</ul></div>
</li>
<li><a href="#"><span>Testimonials</span></a></li>
<li><a href="#"><span>Client Area</span></a>
<div><ul>
<li><a href="#"><span>Start-up Guide</span></a></li>
<li><a href="#"><span>Color Selector</span></a></li>
<li><a href="#"><span>Painting Facts</span></a></li>
<li><a href="#"><span>Paint Glossary</span></a></li>
<li><a href="#"><span>Jobsite Safety</span></a></li>
<li><a href="#"><span>Forms/ Checklists</span></a></li>
<li><a href="#"><span>Online Payment</span></a></li>
<li><a href="#"><span>Privacy Policy</span></a></li>
</ul></div>
</li>
<li class="last"><a href="#"><span>Request Estimate</span></a></li>
</ul>
</div>
</div>
<br /><br /><br />
<div style="width:44em; margin-left:1em; background-color:red">About this size</div>
<a href="http://apycom.com/"></a>
</form>
</body>
</html>
I would like to have the overall Menu width about the same size as the Red Div marked below it.
Just give your div#menu the same witdh as the red div. And set to div#menu ul.menu to 100%
The Sub Menu Box is almost twice the width of the Main Menu Items, and I have no idea how to reduce the width for this.
The width of the nested menu items are changeable in div#menu li div. Set width to your needs. Note that you also have to edit the width of div#menu ul ul a
An working solution based on your code can be viewed here: http://jsfiddle.net/xPkcZ/1/
Note: On some background properties i've added an background-color like #ddd for better view results because the background images are note available.
I figured out 1 width issue with the Menu's Main Level and with that the Slider that moves across each item.
div#menu li {
position: relative;
margin: 0;
padding: 0 0px 0 0;
/*background: green;*/
display: block;
float: left;
z-index: 9;
/*width: auto;*/
width: 100px; /*adjust width for each Level1 item*/
}
Now Im looking for a solution for the Sub-Menu below the Main Menu
![Interactive visualization of a graph in python [closed]](https://www.devze.com/res/2023/04-10/09/92d32fe8c0d22fb96bd6f6e8b7d1f457.gif)
加载中,请稍侯......
精彩评论