क्रोम सीएसएस गोलाकार सीमाएं प्राप्त नहीं कर रहा है

Question

मुझे क्रोम को एक गोलाकार कोनों पर प्रदर्शित करने में कोई समस्या है, जिसे मैंने स्क्रैच से बनाया है। गोलाकार कोनों फ़ायरफ़ॉक्स में बस ठीक दिख रहे हैं, लेकिन क्रोम और आईई 9 मेरे कोनों को प्रस्तुत करना नहीं चाहते हैं। मैंने अपने गोलाकार कोने कॉल को मेरे ड्रॉप डाउन में अंतिम <li> तत्व के साथ-साथ अंतिम <a> पर बदल दिया है जिसे मैंने चौड़ाई और ऊंचाई गुणों वाले ब्लॉक के रूप में प्रदर्शित किया है, लेकिन कुछ भी ऐसा नहीं लगता है!

तो मुझे लगा कि मैं यह देखने के लिए यहां पोस्ट करूंगा कि कोई मुझे सही दिशा में एक झुकाव दे सकता है या नहीं।

साइट अभी भी प्रारंभिक विकास में है, इसलिए अनावश्यक एंकर लिंक के बारे में चिंता न करें।

मेरे HTML:

<nav> 
     <ul id="mainNav"> 
      <li> 
       <a href="highlevel.html" class="autos"></a> 
       <ul> 
        <li><a href="subcategory.html">News</a></li> 
        <li><a href="subcategory.html">Reviews</a></li> 
        <li><a href="subcategory.html">Car Tech</a></li> 
        <li><a href="subcategory.html">Fuel Economy &amp; Safety</a></li> 
        <li><a href="subcategory.html">Buying &amp; Selling</a></li> 
        <li><a href="subcategory.html">Everything Else</a></li> 
       </ul> 
      </li> 
      <li> 
       <a href="highlevel.html" class="lifestyles"></a> 
       <ul> 
        <li><a href="subcategory.html">Music</a></li> 
        <li><a href="subcategory.html">Food</a></li> 
        <li><a href="subcategory.html">Travel</a></li> 
        <li><a href="subcategory.html">Shopping</a></li> 
        <li><a href="subcategory.html">Everything Else</a></li> 
       </ul> 
      </li> 
      <li> 
       <a href="highlevel.html" class="people"></a> 
       <ul> 
        <li><a href="subcategory.html">Who You Know</a></li> 
        <li><a href="subcategory.html">Who You Should Know</a></li> 
        <li><a href="subcategory.html">Everyone Else</a></li> 
       </ul> 
      </li> 
      <li> 
       <a href="highlevel.html" class="tech"></a> 
       <ul> 
        <li><a href="subcategory.html">Business</a></li> 
        <li><a href="subcategory.html">Pleasure</a></li> 
        <li><a href="subcategory.html">Everything Else</a></li> 
       </ul> 
      </li> 
      <li> 
       <a href="highlevel.html" class="trends"></a> 
       <ul> 
        <li><a href="subcategory.html">Online</a></li> 
        <li><a href="subcategory.html">Offline</a></li> 
        <li><a href="subcategory.html">Everything Else</a></li> 
       </ul> 
      </li> 
     </ul> 
    </nav><!-- /Main Nav --> 

मेरे सीएसएस:

सामग्री

nav { 
    display:block; 
    position:relative; 
    width:980px; 
    height:41px; 
    background:url(../../images/nav_bg.png) center top no-repeat; 
    margin:0 auto; 
    border-bottom:2px solid #777; 
    z-index:9998; 
} 

#mainNav { 
    display:block; 
    position:relative; 
    background:#fff; 
} 

#mainNav li { 
    float:left; 
} 

#mainNav li a { 
    display:block; 
    position:relative; 
    width:125px; 
    height:41px; 
    overflow:hidden; 
} 

#mainNav li a.autos { 
    display:block; 
    position:relative; 
    width:125px; 
    height:41px; 
    background:url(../../images/nav1.png) center top no-repeat; 
} 

#mainNav li a.autos:hover { 
    background:url(../../images/nav1.png) center -41px no-repeat; 
} 

#mainNav li a.lifestyles { 
    display:block; 
    position:relative; 
    width:125px; 
    height:41px; 
    background:url(../../images/nav2.jpg) center top no-repeat; 
} 

#mainNav li a.lifestyles:hover { 
    background:url(../../images/nav2.jpg) center -41px no-repeat; 
} 

#mainNav li a.people { 
    display:block; 
    position:relative; 
    width:125px; 
    height:41px; 
    background:url(../../images/nav3.jpg) center top no-repeat; 
} 

#mainNav li a.people:hover { 
    background:url(../../images/nav3.jpg) center -41px no-repeat; 
} 

#mainNav li a.tech { 
    display:block; 
    position:relative; 
    width:125px; 
    height:41px; 
    background:url(../../images/nav4.jpg) center top no-repeat; 
} 

#mainNav li a.tech:hover { 
    background:url(../../images/nav4.jpg) center -41px no-repeat; 
} 

#mainNav li a.trends { 
    display:block; 
    position:relative; 
    width:125px; 
    height:41px; 
    background:url(../../images/nav5.jpg) center top no-repeat; 
} 

#mainNav li a.trends:hover { 
    background:url(../../images/nav5.jpg) center -41px no-repeat; 
} 

/* === Dropdown Menu Styles === */ 

#mainNav ul { 
    display:none; 
    position:absolute; 
    z-index:9998; 
} 

#mainNav li:hover ul { 
    display:block; 
    position:absolute; 
    width:160px; 
    height:auto; 
    border-right:1px solid #999; 
    border-left:1px solid #999; 
    overflow:hidden; 

    -moz-border-radius-topleft: 0px; 
    -moz-border-radius-topright: 0px; 
    -moz-border-radius-bottomright: 7px; 
    -moz-border-radius-bottomleft: 7px; 
    -webkit-border-radius: 0px 0px 7px 7px; 
    border-radius: 0px 0px 7px 7px; 

    -webkit-box-shadow: 0px 5px 3px 0px rgba(0, 0, 0, .25); 
    -moz-box-shadow: 0px 5px 3px 0px rgba(0, 0, 0, .25); 
    box-shadow: 0px 5px 3px 0px rgba(0, 0, 0, .25); 
} 

#mainNav li:hover ul li a { 
    display:block; 
    width:160px; 
    height:auto; 
    background:#fff; 
    padding:5px 0; 
    border-bottom:1px solid #999; 

    font-family: 'Swiss721Light', Verdana, Arial; 
    text-indent:10px; 
    text-decoration:none; 
    font-size:14px; 
    line-height:16px; 
color:#555; 
} 

#mainNav li:hover ul li a:hover { 
    background:#eaeaea; 
} 

Answer 1

आप इस तरह यह कर सकता है:

#mainNav li:hover ul li:last-child a{ 
    border-radius: 0px 0px 7px 7px;  
} 

तुम भी 40px युक्त उल

नीचे करने के लिए गद्दी जोड़ा जा रहा है ठीक है पर padding-left से छुटकारा पाने की जरूरत है, लेकिन यह थोड़ा जटिल लग रही बनाता है विशेष रूप से यदि आप अलग-अलग लिंक

Answer 2

क्रोम और IE छिपा नहीं है कि बॉर्डर की त्रिज्या overflows। आपके ड्रॉपडाउन लिंक वर्तमान में background: white; पर सेट हैं और नीचे एक गोलाकार सीमा बहती है। इसलिए, लिंक की सफेद पृष्ठभूमि गोलाकार सीमा के किनारे पर दिखाई जाएगी। इसे ठीक करने के लिए, आप लिंक की पृष्ठभूमि को हटा सकते हैं या ड्रॉपडाउन के नीचे पैडिंग जोड़ सकते हैं। एक और विकल्प प्रत्येक ड्रॉपडाउन में अंतिम a की सीमा त्रिज्या सेट करना होगा।

Change background:

#mainNav li:hover ul li a { 
    background: #fff; /* remove this line */ 
    border-bottom: ... /* change to border-top */ 
} 

Padding:

#mainNav li:hover ul { 
    ... 
    padding-bottom: 7px; 
} 

Answer 3

यह एक अतिप्रवाह समस्या .. गोल बॉक्स के अंदर सभी तत्वों को एक ही बॉर्डर की त्रिज्या की जरूरत है

http://jsfiddle.net/pixelass/KZXnT/

#mainNavli > ul > li.last, 
#mainNav > li ul > li.last a { 
    -moz-border-radius-topleft: 0px; 
    -moz-border-radius-topright: 0px; 
    -moz-border-radius-bottomright: 7px; 
    -moz-border-radius-bottomleft: 7px; 
    -webkit-border-radius: 0px 0px 7px 7px; 
    border-radius: 0px 0px 7px 7px; 
}