2013-01-03 22 views
7

मेरे पास एक क्षैतिज अभिभावक सूची है। कुछ सूची आइटम क्लिक किए जाने पर एक नेस्टेड वर्टिकल सूची प्रदर्शित करते हैं। मैं अभिभावक उप सूची में आइटम को पैरेंट सूची आइटम के समान चौड़ाई के रूप में कैसे बल दूं?मैं नेस्टेड सूची आइटम को पैरेंट सूची आइटम के समान चौड़ाई के लिए कैसे मजबूर करूं?

jsFiddle देखें।

enter image description here

HTML:

<ul class="mainMenu horizontalMenu bulletless fullWidth bold"> 
    <li class="showSubMenu"> 
     <div>Resumes &amp; Cover Letters &#x25BE; </div> 
     <ul class="mainSubMenu bulletless"> 
      <li><a>Resumes</a></li> 
      <li><a>Cover Letters</a></li> 
      <li><a>Interviews</a></li> 
     </ul> 
    </li><li><a>Other Link</a> 
    </li><li><a>Other Link</a></li> 
</ul>​ 

सीएसएस:

.horizontalMenu li{  
    display: inline-block; 
} 
.mainMenu > li{ 
    border: 1px solid black; 
} 
.mainMenu a, .mainMenu div{ 
    display: block; 
    padding: 10px 20px; 

} 
.mainSubMenu{ 
    position: absolute; 
} 
+1

+1 - बढ़िया काम प्रश्न पूछ! –

उत्तर

7

मैं अपने बेला पर परिवर्तन किया था। http://jsfiddle.net/BXnxc/2/

माता पिता ली position:relative; की जरूरत है और एकत्रित सबमेनू युक्त संरचनाओं की चौड़ाई इनहेरिट द्वारा width:100%; और position:absolute;

2

आप के साथ रिश्तेदार और बच्चे UL के रूप में माता पिता LI निर्दिष्ट करके ऐसा कर सकते हैं width: 100%

डेमो:http://jsfiddle.net/BXnxc/3/

.horizontalMenu li {  
    position: relative; 
} 
.horizontalMenu li ul {  
    width: 100%; 
} 
2

तुम भी ऐसा कर सकते हैं होना चाहिए। मैंने अपना मुख्य मेनू div 200px की चौड़ाई तक सेट किया और फिर चौड़ाई: मुख्य SubMenu के लिए वारिस।

http://jsfiddle.net/BXnxc/4/

.mainMenu a, .mainMenu div{ 
    display: block; 
    padding: 10px 20px; 
    width:200px; 
} 
.mainSubMenu{ 
    position: absolute; 
    width:inherit; 
} 

.mainSubMenu li 
{ 
    display: block; 
    border: 1px solid grey; 
    width:inherit; 
} 
संबंधित मुद्दे