Проблема настройки JQuery меню Width с CSS

Question

Im возникли некоторые проблемы, пытаясь отрегулировать ширину некоторых элементов для этого меню JQuery, что я скачал отсюда: http://apycom.com/menus/6-midnight-blue.html

CSS-очень сложный, но я был в состоянии сузить ширину для всего меню, но другие части были трудно отследить.

Я хотел бы иметь общую ширину меню примерно того же размера, что и красное поле, обозначенное под ним.

Сам слайдер, который перемещается при наведении указателя мыши на элементы главного меню, слишком широк, и я не уверен, как его отрегулировать.

Последний элемент меню «Оценка запроса», по-видимому, не имеет прописных букв, и он выглядит суровым по сравнению с другими пунктами меню. Это самое длинное записанное слово, и поэтому, но я хотел бы выяснить способ немного уменьшить размер другой ширины элемента главного меню.

Блок подменю почти в два раза больше ширины элементов главного меню, и я понятия не имею, как уменьшить ширину для этого.

С ограниченным знанием CSS я, кажется, занимаюсь вещами, больше чем что-либо исправляю.

Любая помощь в этом была бы принята с благодарностью.

Вот CSS, который пришел со скачиванием JQuery, и я внес коррективы в это:

/* 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; 
} 

Вот 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> 

Answer 1

Я хотел бы иметь общее меню ширина около того же размера, что и красный Под ним надпись.

Просто укажите div#menu тот же самый witdh, что и красный div. И установить на div#menu ul.menu в 100%

The Box Sub Menu почти в два раз ширины основных пунктов меню, и я не имеет ни малейшего представления о том, как уменьшить ширину для этого.

Ширина вложенных пунктов меню может быть изменена в div#menu li div. Установите ширину в соответствии с вашими потребностями. Обратите внимание, что вы также должны изменить ширину div#menu ul ul a

Рабочим раствором на основе кода можно посмотреть здесь: http://jsfiddle.net/xPkcZ/1/

Примечание: На некоторых свойств фона я добавил цвет фона, как #ddd для лучшего просмотра результатов, поскольку фоновые изображения доступны для заметок.

Answer 2

Я выяснил 1 проблему с шириной основного меню и с помощью этого ползунка, который перемещается по каждому элементу.

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*/ 
} 

Теперь Im ищет решение для подменю ниже главного меню