改變下拉菜單寬度

我想改變一些下拉菜單的寬度來容納更長的文本，甚至當我改變這個樣式表中的寬度值時，什麼都不會發生。這是我一直試圖改變的樣式表的區域。也許，我應該找別的地方？改變下拉菜單寬度

/******************************************************************/ 
/* 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/查看菜單。我想擴大醫院服務菜單以容納菜單上的長標題。

謝謝！

來源

2013-08-06 Kristina Gaddy Mulpura

只是我還是沒有標籤爲「患者服務」的菜單？ – Halcyon

我沒有看到任何標題爲「患者服務」的菜單。你在談論「患者和訪問者」菜單嗎？ –

對不起，這是醫院服務菜單。 –

您發佈的密碼是正確的地方更改寬度。你可以找到寬度值在兩個改變：

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

如果這不工作，檢查右邊主題的style.css的文件權限。

來源

2013-08-06 15:48:55 Thundar

當我將這個新樣式表上傳到wordpress時，它表示該文件已成功加載，因此我假設我有權編輯此文件。我一直在改變寬度值，但無濟於事。 –

你確定它是正確的主題style.css？它應該是/site/wp-content/themes/DynamiX/style.css – Thundar

你有沒有調整

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

來源

2013-08-06 15:50:39 BenRacicot

是的，我一直在調整這些，但沒有看到任何變化。 –

你要只是改變你的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;}

改變，如果它是不工作然後請添加！重要的畢竟元素。

讓我知道有任何問題。

謝謝，

來源

2013-08-30 13:32:32

改變下拉菜單寬度

回答

相關問題