Question

这很难解释。我有这个下拉菜单。您可以在此网站上查看：http://wpx.mirsoftware.de/

我还将代码的一部分放在jsfiddle中：http://jsfiddle.net/zst0o747/5/

问题是，ul设置为100％，但如果用firebug看，内部html的长度为ul。 ul没有正确包裹它。我不知道怎么解释。 css中的任何地方我都是一个错误，但我不知道在哪里。

我从firebug截取了一张截图，你可以看到ul不是100％。

enter image description here

问题是孩子ul / li无法正确定位。嗯......我认为它来自于......

所以也许有人有想法？

这也是我的代码：

HTML：

<nav id="twNav-s1" class="twNav twNav-vertical twNav-left">
   <ul class="dropdown" id="menu-header-menu">
      <li>
         <div class="nav-sep"></div>
         <a href="#">Blog</a>
      </li>
      <li>
         <div class="nav-sep"></div>
         <a href="#">About</a>
      </li>
      <li>
         <div class="nav-sep"></div>
         <a href="#">Media</a>
      </li>
      <li>
         <div class="nav-sep"></div>
         <a href="#">Contact</a>
         <ul class="sub-menu">
            <li style="width: 102px;">
               <div class="nav-sep"></div>
               <a href="#">sdfsdgf</a>
               <ul class="sub-menu" style="right: auto; left: 129%;">
                  <li style="width: 100%;">
                     <div class="nav-sep"></div>
                     <a href="#">Aboutdsgfdsgdsfg</a>
                  </li>
                  <li style="width: 100%;">
                     <div class="nav-sep"></div>
                     <a href="#">Contact</a>
                     <ul style="right: auto; left: 129%;">
                        <li style="width: 100%;">
                           <a href="#">sdgfsdagghgfdhfdghfdghfgh</a>
                           <ul id="lastUL" style="left: 129%; right: auto;">
                              <li style="width: 100%;">
                                 <div class="nav-sep"></div>
                                 <a href="#">Allgemein</a>
                              </li>
                              <li style="width: 100%;">
                                 <div class="nav-sep"></div>
                                 <a href="#">Contact</a>
                              </li>
                           </ul>
                        </li>
                     </ul>
                  </li>
                  <li style="width: 100%;">
                     <div class="nav-sep"></div>
                     <a href="#">sdagfdsfg</a>
                  </li>
               </ul>
            </li>
         </ul>
      </li>
      <li>
         <div class="nav-sep"></div>
         <a href="#">About</a>
      </li>
      <li>
         <div class="nav-sep"></div>
      </li>
   </ul>
</nav>

CSS：

/* General styles for all menus */
.twNav {
    background: rgb(86,107,132); /* Old browsers */
    background: -moz-linear-gradient(left,  rgba(86,107,132,1) 0%, rgba(62,86,117,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(86,107,132,1)), color-stop(100%,rgba(62,86,117,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left,  rgba(86,107,132,1) 0%,rgba(62,86,117,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left,  rgba(86,107,132,1) 0%,rgba(62,86,117,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left,  rgba(86,107,132,1) 0%,rgba(62,86,117,1) 100%); /* IE10+ */
    background: linear-gradient(to right,  rgba(86,107,132,1) 0%,rgba(62,86,117,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#566b84', endColorstr='#3e5675',GradientType=1 ); /* IE6-9 */
    -webkit-box-shadow: 13px 0px 51px -28px rgba(0,0,0,0.75), inset 13px 0px 51px -28px rgba(0,0,0,0.75);
    -moz-box-shadow: 13px 0px 51px -28px rgba(0,0,0,0.75), inset 13px 0px 51px -28px rgba(0,0,0,0.75);
    box-shadow: 13px 0px 51px -28px rgba(0,0,0,0.75), inset 13px 0px 51px -28px rgba(0,0,0,0.75);
    border-right: 1px solid #8aa5c7;
    position: fixed;
    opacity: 0.97;
}

.twNav a {
    display: block;
    color: #fff;
    font-size:13.5pt;
    font-weight: 300;
    text-decoration:none;
    text-shadow: 0px 1px 1px rgba(0, 0, 0, 1);
}

.twNav a:hover {
    background: #a8b4c4;
}

.twNav a:active {
    background: #a2bada;
    color: #e4a155;
}

.twNav ul {
    margin-top:32px;
    padding-right:3px;
    list-style: none;
    margin-left: 0;
    padding-left: 0;
}

.twNav ul li {
    margin-left:0px;
    padding-left: 1em;
    padding-right: 4em;
    text-indent: -1em;
}

.twNav ul li:last-child {
    display:none;
}

.twNav ul li ul li:last-child {
    display:block;
} 

.twNav ul ul {
    margin-top:0px;
    margin-bottom:0px;
}


.twNav ul li:before {
    content: "+";
    padding: 10px 21px 0 22px;
    float:left;
    color:#fff;
    text-shadow: 0px 1px 1px rgba(0, 0, 0, 1);
}

/* Orientation-dependent styles for the content of the menu */

.twNav-vertical {
    width: 240px;
    height: 100%;
    top: 0;
    z-index: 1000;
}

.twNav-vertical a {
    border-bottom: 1px solid #8aa5c7;
    padding: 0.3em;
}

/* Vertical menu that slides from the left */

.twNav-left {
    left: -300px;
}

.twNav-left.twNav-open {
    left: 0px;
}

.twNav-right.twNav-open {
    right: 0px;
}

/* Transitions */

.twNav,
.twNav-push {
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

/* ==============
    MOBILE: Menu
   ============== */

 .menu-icon {
    display:block;
    width: 30px;
    height: 30px;
    background: url(../img/menu-icon.png);
    position:absolute;
    right:20px;
    top: 95px;
    z-index:2;  
}

.menu-icon:hover {
    background-color: #444;
    border-radius: 6px 6px 0 0;
}

@media only screen and (min-width: 640px) {

/* ====================
    WIDE: Nav
   ==================== */

    .menu-icon {
        display: none;
    }

    .nav-sep {
        background-image: url('../img/nav-sep.png');
        width:7px;
        height:30px;
        float:left;
    }

    .twNav {
        background: transparent;
        position: absolute;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
        border-right: 0;
        opacity: 1;
    }

    .twNav-vertical {
        width: 100%;
        height: 50px;
        top: 100px;
        z-index: 1000;
    }

    .twNav-vertical a {
        border-bottom: 0;
    }

    .twNav-left {
        left:auto;
    }

    .twNav ul {
        position:absolute;
        right:10px;
        margin-top:auto;
        padding-left: 3px;
    }

    .twNav ul li {
        display:inline-block;
        position: relative;
        float: left;
        margin-left:0px;
        padding-right: 0em;
        padding-left: 0em;
        text-indent: 0em;
    }

    .twNav ul li:before {
        content: "";
        padding: 0px;
    }

    .twNav ul li:last-child {
        display:block;
    }

    .twNav a {  
        padding: 0 30px;
        -webkit-transition: all .25s ease;
           -moz-transition: all .25s ease;
            -ms-transition: all .25s ease;
             -o-transition: all .25s ease;
                transition: all .25s ease;
    }

    .twNav a:hover {
        background: transparent;
        color: #d48c3b;
    }

    .twNav ul ul {
        visibility: hidden;
        position: absolute;
        top: 100%;
        left: 0;
        opacity: 0;
        -webkit-transition: all .25s ease;
           -moz-transition: all .25s ease;
            -ms-transition: all .25s ease;
             -o-transition: all .25s ease;
                transition: all .25s ease;
    }

    .twNav ul li:hover > ul {
        visibility: visible;
        opacity: 1;
    }

    .twNav ul ul ul {
        border-top: 0 none;
        right: auto;
        left: 129%;
        top: 0;
        width:100%;
    }

    .twNav ul ul li {
        left:4px;
    }

    .twNav ul ul li:first-child > a {
        border-top: 1px solid #305179;
    }

    .twNav ul ul li:hover > a {
        background: #627b99;
        color: #d48c3b;
    }

    .twNav ul ul a{
        background: #305179;
        padding: 12px 20px 12px 15%;                  
        -webkit-box-shadow: 0 7px 23px -6px rgba(0, 0, 0, 0.75), 0 33px 24px -31px rgba(255, 255, 255, 0.15) inset;
        -moz-box-shadow: 0 7px 23px -6px rgba(0, 0, 0, 0.75), 0 33px 24px -31px rgba(255, 255, 255, 0.15) inset;
        box-shadow: 0 7px 23px -6px rgba(0, 0, 0, 0.75), 0 33px 24px -31px rgba(255, 255, 255, 0.15) inset;
        -moz-border-radius: 0 0 3px 3px;
        -webkit-border-radius: 0 0 3px 3px;
        width:100%;
        border-bottom: 1px solid #4c688b;
        border-top: 1px solid #395474;
        border-left: 1px solid #4c688b;
        border-right: 1px solid #395474;
        -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
        border-radius: 2px;
        text-align:center;
    }

    .twNav ul ul li  .nav-sep {
        display:none;
    }

JS：

//Check if User resize is ready
var waitForFinalEvent = (function () {
  var timers = {};
  return function (callback, ms, uniqueId) {
    if (!uniqueId) {
      uniqueId = "Don't call this twice without a uniqueId";
    }
    if (timers[uniqueId]) {
      clearTimeout (timers[uniqueId]);
    }
    timers[uniqueId] = setTimeout(callback, ms);
  };
})();

function setMenuWidth(){

    waitForFinalEvent(function(){       
        $("#menu-header-menu > li > ul").each(function() { // Loop through all the menu items that got submenu items

            var Widest=0; // We want to find the widest LI... start at zero
            var WidestMobile ='100%'; // For Mobile width
            var ThisWidth=0; // Initiate the temporary width variable (it will hold the width as an integer)
            var ParentWidth=0; // Width of Parent li
            var checkWidth = $(window).width();

                    ParentWidth=parseInt($(this).css('width')); // Grab the width of the Parent LI
                    $($(this).children()).each(function() { // Loop through all the children LIs in order to find the widest
                      ThisWidth=parseInt($(this).css('width')); // Grab the width of the current LI

                        if (ThisWidth>Widest) { // Is this LI the widest?
                            Widest=ThisWidth; // We got a new widest value
                            if (Widest<ParentWidth) {
                                Widest=ParentWidth;
                            }
                        }
                    });

                        // Set all Sub Sub Menus to parent width * Designed for 3 levels of submenu. If you want more just uncomment the last line of code. There you can derive the logic
                        $("#menu-header-menu > li > ul > li > ul").each(function() {
                            $(this).children().css('width',WidestMobile);
                        });
                        $("#menu-header-menu > li > ul > li > ul > li > ul").each(function() {
                            $(this).children().css('width',WidestMobile);
                        });
                        $("#menu-header-menu > li > ul > li > ul > li > ul > li > ul").each(function() {
                            $(this).children().css('width',WidestMobile);
                        });
                        // $("#menu-header-menu > li > ul > li > ul > li > ul > li > ul > li > ul").each(function() {
                            // $(this).children().css('width',WidestMobile);
                        // });

            var checkWidth = $(window).width();
            if (checkWidth>1024) {
                Widest+='px'; // Add the unit
                $(this).children().css('width',Widest);
            } else {
                $(this).children().css('width','100%');
            };
        });

    }, 500, "some unique string");
}

$(document).ready(function(){

    // Check if user resize the browser and if yes, which size(width) it has now
    $(window).resize(function () { setMenuWidth() });

    //Set direction of menu depending on browser size
    $("#menu-header-menu").on('mouseenter mouseleave', function (e) {

        $('#menu-header-menu ul').last().attr('id', 'lastUL');

            var elm = $('#lastUL').find("li:last");
            var off = elm .offset();
            var l = off.left;
            var w = elm.width();
            var docH = $(window).height();
            var docW = $(window).width();

            var isEntirelyVisible = (l+ w <= docW);

            if ( ! isEntirelyVisible ) {
                //Menu shows on right site
                $('.twNav ul ul ul').css({ left: 'auto', right: '100%' });
            } else {
                //Menu shows on left site
                $('.twNav ul ul ul').css({ left: '129%', right: 'auto' });
            }
    });

    //Set menu width once on doc ready
    setMenuWidth()  

});

感谢您的阅读。丹尼尔

编辑：如果菜单方向正确。然后稍微调整浏览器的大小。然后菜单方向开关zu离开。

子菜单宽度设置为100％不起作用

0 个答案: