8
मुझे वर्तमान में एक सीएसएस <ul><li> ड्रॉपडाउन मेनू है जो निम्न कोड का उपयोग करता है। दुर्भाग्यवश मैं उप मेन्यू को 2 कॉलम में प्रदर्शित करना चाहता हूं क्योंकि उस सबमेनू में लगभग 16 आइटम हैं। क्या किसी को यह ड्रॉप डाउन मेनू 2 कॉलम बनाने के लिए निम्न कोड का उपयोग करने का तरीका पता है?सीएसएस ड्रॉप डाउन मेनू 2 कॉलम
.menu{
border:none;
border:0px;
margin:0px;
padding:0px;
font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
font-size:18px;
font-weight:bold;
}
.menu ul{
background:#006633;
height:35px;
list-style:none;
margin:0;
padding:0;
}
.menu li{
float:left;
padding:0px;
}
.menu li a{
background:#006633 url("../images/seperator.gif") bottom right no-repeat;
color:#ffffff;
display:block;
font-weight:normal;
line-height:35px;
margin:0px;
padding:0px 25px;
text-align:center;
text-decoration:none;
}
.menu li a:hover, .menu ul li:hover a{
background: #003f20 url("../images/hover.gif") bottom center no-repeat;
color:#FFFFFF;
text-decoration:none;
}
.menu li ul{
background:#006633;
display:none;
height:auto;
padding:0px;
margin:0px;
border:0px;
position:absolute;
width:225px;
z-index:200;
/*top:1em;
/*left:0;*/
}
.menu li:hover ul{
display:block;
}
.menu li li {
background:url('../images/sub_sep.gif') bottom left no-repeat;
display:block;
float:none;
margin:0px;
padding:0px;
width:225px;
}
.menu li:hover li a{
background:none;
}
.menu li ul a{
display:block;
height:30px;
font-size:12px;
font-style:normal;
margin:0px;
padding:0px 10px 0px 15px;
text-align:left;
}
.menu li ul a:hover, .menu li ul li:hover a{
background:#003f20 url('../images/hover_sub.gif') center left no-repeat;
border:0px;
color:#ffffff;
text-decoration:none;
}
.menu p{
clear:left;
}
एक jsfiddle अच्छा होगा, लेकिन मेरे सिर के ऊपर से मुझे लगता है कि आप नहीं चाहते हैं कि आपकी LI को ब्लॉक के रूप में दिखाया जाए, लेकिन इसके बजाय उन्हें इनलाइन छोड़ दें। उन्हें 50% की चौड़ाई दें। अनिवार्य रूप से क्या होगा आपको दो ली प्रति पंक्ति मिल जाएगी। जब वे कमरे से बाहर निकलते हैं तो वे अगली पंक्ति में लपेट जाएंगे। – mrtsherman
कृपया एचटीएमएल पोस्ट करें। – Midas
यहां एचटीएमएल कोड के साथ एक jsfiddle है ... http://jsfiddle.net/PrinceofVegas/Dg3yQ/ –