क्षैतिज सीएसएस मेनू <li> खिड़की पूर्ण स्क्रीन में नहीं है, तो खुद के नीचे repositioning आइटम

मुझे अपने सीएसएस के साथ कोई समस्या है। मेनू ठीक काम करता है लेकिन जब आप विंडो को पूर्ण स्क्रीन से किसी अन्य आकार में समायोजित करते हैं, तो मेनू दाएं छोर पर कट जाता है और मेनू के नीचे बाईं ओर फिर से शुरू होता है। मेरे पास एक अलग पृष्ठ के साथ एक ही समस्या थी और मैं इसे स्थिति के साथ ठीक करने में सक्षम था: पूर्ण लेकिन यह इसे हल करने के लिए प्रतीत नहीं होता है। मैं शुरुआत नहीं कर रहा हूं लेकिन मैं समर्थक नहीं हूं। अगर कोई मुझे यह समझने में मदद कर सकता है कि मेन्यू विकल्पों को नीचे ले जाने के बजाय खिड़की स्क्रॉल को दाएं से दाएं कैसे बनाया जाए, तो यह बहुत अच्छा होगा।

मेरे पास एक div टैग है जो मेरा सीएसएस मेनू इसमें जाता है:

<div id='cssmenu' align='justify' style="z-index: 1;">

Then I have multiple menu's that go across the top of the page


  • ~a href='index.html'>Home ~/a> ~/li>
  • ~a href='index.html'>General Info~/a> ~/li>
  • ~a href='index.html'>Downloads~/a> ~/li>
  • ~a href='index.html'> ~/a> ~/li>
  • ~a href='index.html'>Home ~/a> ~/li>
  • ~a href='index.html'>Home ~/a> ~/li>

Here is my CSS.

#cssmenu ul,
#cssmenu li,
#cssmenu span,
#cssmenu a {
    margin: auto;
    padding: 0;
    position: relative; 
    top: o;
    z-index: 1;
}

#cssmenu {
    height: 49px;
    border-radius: 5px 5px 0 0;
    -moz-border-radius: 5px 5px 0 0;
    -webkit-border-radius: 5px 5px 0 0;
    background: #fefefe;
    background: -moz-linear-gradient(top, #fefefe 0%, #eee9f0 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fefefe),            color-stop(100%, #eee9f0));
    background: -webkit-linear-gradient(top, #fefefe 0%, #eee9f0 100%);
    background: -o-linear-gradient(top, #fefefe 0%, #eee9f0 100%);
    background: -ms-linear-gradient(top, #fefefe 0%, #eee9f0 100%);
    background: linear-gradient(top, #fefefe 0%, #eee9f0 100%);
    border-bottom: 2px solid #a30813;
    width: auto;
    z-index: 1;
}

#cssmenu:after,
#cssmenu ul:after {
    content: '';
    display: block;
    clear: both;
    z-index: 1;
}

#cssmenu a {
    background: #fefefe;
    background: -moz-linear-gradient(top, #fefefe 0%, #ececec 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fefefe), color-stop(100%, #ececec));
    background: -webkit-linear-gradient(top, #fefefe 0%, #ececec 100%);
    background: -o-linear-gradient(top, #fefefe 0%, #ececec 100%);
    background: -ms-linear-gradient(top, #fefefe 0%, #ececec 100%);
    background: linear-gradient(top, #fefefe 0%, #ececec 100%);
    color: #000;
    display: inline-block;
    font-family: Helvetica, Arial, Verdana, sans-serif;
    font-size: 12px;
    line-height: 49px;
    padding: 0 20px;
    text-decoration: none;
    z-index: 1;
}

#cssmenu ul {
    list-style: none;
    z-index: 1;
}

#cssmenu > ul {
    float: left;
    z-index: 1;
} 

#cssmenu > ul > li {
    float: left;
    padding-left: 45px; /* This value moves the menu to the left*/
    z-index: 1;
    position: relative;
}

#cssmenu > ul > li > a {
color: #000;
    font-size: 12px;
    z-index: 1;
    position: relative;
    display:block;
}


#cssmenu > ul > li:hover:after {
    content: '';
    display: relative;
    width: 0;
    height: 0;
    position: absolute;
    left: 50%;
    bottom: 0;
    z-index: 0 !important;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #a30813;
    margin-left: -10px;
    float:left;
    margin-top:0px !important;
    z-index: 1;
}

#cssmenu > ul > li:first-child > a {
    border-radius: 5px 0 0 0;
    -moz-border-radius: 5px 0 0 0;
    -webkit-border-radius: 5px 0 0 0;
    float:left;
    margin-top:0px !important;
    z-index: 1;
}

#cssmenu > ul > li.active:after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    left: 50%;
    bottom: 0;
    z-index: 1;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #a30813;
    margin-left: -10px;
    float:left;
    margin-top:0px !important;
    z-index: 1;
} 

#cssmenu > ul > li.active > a {
    -moz-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);
    box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);
    background: #ececec;
    background: -moz-linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ececec),    color-stop(100%, #ffeeff ef));
    background: -webkit-linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
    background: -o-linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
    background: -ms-linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
    background: linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
    z-index: 1;
    margin-top:0px !important;
    z-index: 1;
}

#cssmenu > ul > li:hover > a {
    background: #ececec;
    background: -moz-linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ececec), color-stop(100%, #ffeeff ef));
    background: -webkit-linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
    background: -o-linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
    background: -ms-linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
    background: linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
    -moz-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);
    box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);
    z-index: 1;
    margin-top:0px !important;
    z-index: 1 !important;
}

#cssmenu .has-sub {
    z-index: 1;
    padding-left: 50px;
    z-index: 1;
}

#cssmenu .has-sub:hover > ul {
    display: block;
    z-index: 1;
    padding-left: 50px;/* this value is used to align the menu*/
    z-index: 1;
}

#cssmenu .has-sub ul {
    display: none;
    position: absolute;
    width: 200px;
    top: 100%;
    left: 0;
    z-index: 1;
}

 #cssmenu .has-sub ul li {
     *margin-bottom: -1px;
     z-index: 1;
     padding-left: 0px; 
     z-index: 1;
 }

#cssmenu .has-sub ul li a {
    background: #a30813;
    border-bottom: 1px dotted #d40a19;
    filter: none;
    font-size: 11px;
    display: block;
    line-height: 120%;
    padding: 10px;
    color: #ffffff;
    top:0;
    z-index: 1;
}

#cssmenu .has-sub ul li:hover a {
    background: #72060d;
    margin-top:0px !important;
    z-index: 1 !important;
    padding-left:55px;  /*this value moves the text to the left when highlighted*/
}

#cssmenu .has-sub .has-sub:hover > ul {
    display: block;
    margin-top:0px !important;
    z-index: 1 !important;
    padding-left:0; /* this keeps the sub-menu close to the drop down menu*/
} 

#cssmenu .has-sub .has-sub ul {
    display: none;
    position: absolute;
    left: 100%;
    top:0;
    z-index: 1;
}

#cssmenu .has-sub .has-sub ul li a {
    background: #72060d;
    border-bottom: 1px dotted #d40a19;
    padding-left:5px; /* this aligns the txt to the left for the sub-menu */
    z-index: 1;
} 

#cssmenu .has-sub .has-sub ul li a:hover {
    background: #5a040b;
    margin-top:0px !important;
    z-index: 1 !important;
    padding-left:50px; /* this moves the text on the sub-menu when hovered over*/
}
0
स्वरूपण सहायता के लिए। कृपया मार्डउन सहायता पृष्ठ देखें।
जोड़ा लेखक David Thomas, स्रोत

1 उत्तर

Basically, the

  • element is floating left-to-right. It breaks off and starts on a new row when the width of the combined list-elements exceeds that of the
      .

      What you can do is give the <div> a width:100% and overflow:hidden, so that you cannot see anything drop and start a new row.

      Then you can give the

        a width:1000px, so that the
      • would be able to fit across the screen and be cut-off, but still somewhat visible. Here is what it would look like.

        The problem after that is that you would need to resize the

      • items, either by font or padding; best to resize with media queries if working with multiple layouts. If you want them to resize dynamically, you can write a JavaScript function to handle the sizing/spacing.

  • 0
    जोड़ा
    ठीक है, जब मैंने "ओवरफ्लो: छुपा" जोड़ा तो अब यह उप ड्रॉप डाउन मेनू आइटम प्रदर्शित नहीं कर रहा है। ऐसा लगता है कि सब कुछ के ऊपर सबमेनस को ओवरले करना नहीं है, जो मैं चाहता हूं। उप मेन्यू मुद्दे के लिए यह
      होगा?
    जोड़ा लेखक user3033193, स्रोत
    उपरोक्त उल्लिखित मुद्दे के बारे में, यहां एक उदाहरण है जहां मैं सबमेनू देखना चाहता हूं, लेकिन यह काम नहीं कर रहा है jsfiddle.net/combizs/5Vr7U/1
    जोड़ा लेखक user3033193, स्रोत