Question

我正在尝试更改某些下拉菜单的宽度以容纳更长的文本，即使我更改此样式表中的宽度值，也没有任何反应。这是我一直试图改变的样式表的区域。也许，我应该在其他地方寻找？

/******************************************************************/
/* Menu Naviation    */
/******************************************************************/

/** Main Menu *********************************/ 
#tabs {
 position:absolute;
 top:3px;
 margin-left:190px;
}

#tabs ul {list-style:none;margin-left:30px;}

#tabs li {position: relative;list-style:none;}

#tabs ul li.current_page_item, #tabs ul li:hover {background:url(images/gradient-f.png) repeat-x top;}

#tabs li.menubreak,#tabs li.menubreak:hover {
 background:url(images/break-c.png) left center repeat-y;
 padding: 0 0 10px 2px;
 margin-left:0;
 margin-top:42px;
}

#tabs #dyndropmenu ul,#tabs #dropmenu ul {
 display:none;
}

#tabs ul li{
 float:left;
 position:relative;
 padding: 40px 14px 20px 14px;
 height:37px;
 margin-right:1px; 
}

#tabs li li{background:none;}

#tabs a {
 padding:0;
 text-decoration:none;
 cursor: pointer; /* IE 7 bug-fix */
 color:#5f5f5f;
 display:block;
 background:none;
 line-height: 40px; 
 z-index:100;
 position:relative;

}


#tabs ul li a:hover{color:#6C6C6C;}

#tabs ul li.current_page_item ul li a { color:#333;}
/** / Main Menu *********************************/ 




/** Dropdown Menu *********************************/ 
#tabs #dropmenu, #dyndropmenu {z-index:999;}

#tabs ul ul {
 position: absolute;
 display: none;
 top: 89px;
 *top:90px;
 left: -3px;
 margin: 0;
 background:#fbfbfb;
 opacity:0.95;
 -moz-border-radius: 0 6px 6px 6px;
 -webkit-border-radius: 6px;
 -webkit-border-top-left-radius: 0; 
 border-radius: 0 6px 6px 6px;
 -moz-box-shadow: 0 1px 4px rgba(0,0,0,0.2);
 -webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.2);
 box-shadow: 0 1px 4px rgba(0,0,0,0.2);
 border:1px solid #dfdfdf;
 width:250px;
 z-index:500;
}


#tabs ul ul ul {
 -moz-border-radius: 6px;
 -webkit-border-radius: 6px; 
 border-radius:6px;
} 

#tabs ul li ul {
 height:auto;
 margin: 0;
 padding:0;
 padding-top:2px;
 padding-bottom:2px; 
 clear:both;
}

#tabs ul li ul li a { 
 padding: 0 30px 0 12px;
 white-space:nowrap;
 display:block;
}

.menudesc { font-size:0.8em;top:-12px;position:relative;z-index:0;}

#tabs ul li ul li .menudesc {padding: 0 10px 4px 12px;top:0;}

#tabs .menudesc {color:#b5b5b5;}

#tabs ul li ul li a {padding-top:4px;padding-bottom:4px;}

#tabs ul li ul li {
 padding:2px 0 2px 0;
 margin:0 2px 0 2px;
 background:none;
 width:250px;
 height:auto;
}

#tabs ul li ul li a {display:block;}

#tabs ul li ul a {
 height:auto;
 margin: 0;
 display:block;
 line-height:20px;
}

#tabs ul li ul a span, #tabs ul li ul a span span{ margin: 0; padding: 0; height: auto; float: none;}

#tabs ul ul ul{top:auto;}

#tabs ul li ul ul {left:250px; top: 6px; *top: 0;}

#tabs ul li:hover ul ul, #tabs ul li:hover ul ul ul, #tabs ul li:hover ul ul ul ul{display:none;}
#tabs ul li:hover ul, #tabs ul li li:hover ul, #tabs ul li li li:hover ul, #tabs ul li li li li:hover ul{ display:block;}
/** / Dropdown Menu *********************************/ 





/** Breadcrumbs *********************************/ 
#sub-tabs ul li a, #sub-tabs ul li {font-size:10px !important;}

#sub-tabs {
 position:relative;
 width:940px;
 margin:0 auto;
 line-height:20px;
}

#sub-tabs ul li {
 list-style:none;
 display:inline;
 line-height:60px;
 padding: 0 5px 0 20px;
 background:url(images/break-b.png) left center no-repeat;
}

#sub-tabs ul li.home {background:none;padding-left:0;}
/** / Breadcrumbs *********************************/ 


/******************************************************************/
/* Menu Naviation *END*   */
/******************************************************************/

有没有人有任何想法？您可以在http://larkinhospital.com/site/查看菜单。我想扩大医院服务菜单，以适应菜单上的长标题。

谢谢！

Answer 1

您发布的代码是更改 width 的正确位置。您可以在以下两个位置找到要更改的 width 值：

#tabs ul ul {}
#tabs ul li ul li {}

如果这不起作用，请检查右侧主题的style.css上的文件权限。

Answer 2

你有没有调整

#tabs ul li { padding: 40px, 20px, 20px, 20px }

Answer 3

你必须改变你的style.css中的这个css变化

请找到此行并更改

   Add this line in your css -> #tabs ul#dyndropmenu li ul.sub-menu { width:164px; border-radius:0 6px 6px 6px; box-shadow:0 1px 4px rgba(0, 0, 0, 0.2); left:-3px; opacity:0.95; position:absolute; top:89px; z-index:500;}

   Add this line also in css -> #tabs ul#dyndropmenu li ul.sub-menu li { width:auto;}

   Remove white-space:nowrap; element in this line -> #tabs ul li ul li a { white-space:nowrap;}

如果它不起作用，请在所有元素之后添加！important。

让我知道有任何问题。

谢谢，

更改下拉菜单宽度

3 个答案: