1. дома
  2. Вопрос и ответ
  3. Отображение subMenu on hover

Отображение subMenu on hover

2014-02-17 4 views
1

У меня есть меню, в котором все работает, кроме подменю. когда <li> с подменю - hover, предположим, что он отображает подменю, и он это делает. но проблема заключается в положении подменю, он не показывает его под <li>, он показывает его left: 0%.Отображение subMenu on hover

http://jsfiddle.net/2fDQz/1/ - Попробуйте навести указатель мыши на «admin» и «home».

вот CSS (хотя вы можете увидеть его в jsfiddle):

CSS

body { 
} 
/* Base Styles */ 
#personalbar ul, #personalbar li, #personalbar a { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
    border: 0; 
    line-height: 1; 
    font-family:'Lato', sans-serif; 
} 
#personalbar { 
    border: 1px solid #123e3f; 
    width: auto; 
} 
#personalbar ul { 
    zoom: 1; 
    background: #33b3b7; 
    background: -moz-linear-gradient(top, #33b3b7 0%, #288c8f 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #33b3b7), color-stop(100%, #288c8f)); 
    background: -webkit-linear-gradient(top, #33b3b7 0%, #288c8f 100%); 
    background: -o-linear-gradient(top, #33b3b7 0%, #288c8f 100%); 
    background: -ms-linear-gradient(top, #33b3b7 0%, #288c8f 100%); 
    background: linear-gradient(top, #33b3b7 0%, #288c8f 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@top-color', endColorstr='@bottom-color', GradientType=0); 
    padding: 5px 10px; 
} 
#personalbar ul:before { 
    content:''; 
    display: block; 
} 
#personalbar ul:after { 
    content:''; 
    display: table; 
    clear: both; 
} 
#personalbar li { 
    float: left; 
    margin: 0 5px 0 0; 
    border: 1px solid transparent; 
} 
#personalbar li a { 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    -ms-border-radius: 5px; 
    -o-border-radius: 5px; 
    border-radius: 5px; 
    padding: 8px 15px 9px 15px; 
    display: block; 
    text-decoration: none; 
    color: #ffffff; 
    border: 1px solid transparent; 
    font-size: 16px; 
} 
#personalbar li.active { 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    -ms-border-radius: 5px; 
    -o-border-radius: 5px; 
    border-radius: 5px; 
    border: 1px solid #33b3b7; 
} 
#personalbar li.active a { 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    -ms-border-radius: 5px; 
    -o-border-radius: 5px; 
    border-radius: 5px; 
    display: block; 
    background: #1d6567; 
    border: 1px solid #123e3f; 
    -moz-box-shadow: inset 0 5px 10px #123e3f; 
    -webkit-box-shadow: inset 0 5px 10px #123e3f; 
    box-shadow: inset 0 5px 10px #123e3f; 
} 
#personalbar li:hover { 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    -ms-border-radius: 5px; 
    -o-border-radius: 5px; 
    border-radius: 5px; 
    border: 1px solid #33b3b7; 
} 
#personalbar li:hover a { 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    -ms-border-radius: 5px; 
    -o-border-radius: 5px; 
    border-radius: 5px; 
    display: block; 
    background: #1d6567; 
    border: 1px solid #123e3f; 
    -moz-box-shadow: inset 0 5px 10px #123e3f; 
    -webkit-box-shadow: inset 0 5px 10px #123e3f; 
    box-shadow: inset 0 5px 10px #123e3f; 
} 
#personalbar ul ul li:hover a, #personalbar li:hover li a { 
    background: none; 
    border: none; 
    color: #666; 
    -webkit-box-shadow: none; 
    -moz-box-shadow: none; 
} 
#personalbar ul ul a:hover { 
    background: #7d7d7d; 
    color: #fff !important; 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); 
} 
#personalbar li:hover > ul { 
    display: block; 
} 
#personalbar ul ul { 
    position:absolute; 
    z-index: 1000; 
    display: none; 
    margin: 0; 
    padding: 0; 
    width: 185px; 
    top: 40px; 
    left: 0; 
    background: #ffffff; 
    border: solid 1px #b4b4b4; 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); 
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); 
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); 
} 
#personalbar ul ul li { 
    position: relative; 
    float: none; 
    margin: 0; 
    padding: 3px; 
}

HTML:

<div id='personalbar' style="position:absolute; top:0%;left:0%; width:100%;"> 
    <ul> 
     <li><a href='# '><span>Home</span></a> 

      <ul> 
       <li id="Li2" runat="server"><a id="A5" href="#" runat="server"><span>bla</span></a> 
       </li> 
       <li id="Li3" runat="server"><a id="A6" href="#" runat="server"><span>bli</span></a> 
       </li> 
      </ul> 
     </li> 
     <li id="L1" runat="server"><a id="A1" href="../ClientSide/newsFeed/allEr.aspx" runat="server"><span>My Wall</span></a> 
     </li> 
     <li id="L2" runat="server"><a id="A2" href="../ClientSide/employee/eeSettings.aspx" runat="server"><span>Setting</span></a> 
     </li> 
     <li id="Li1" runat="server"><a id="A4" href="../ClientSide/employee/eeSettings.aspx" runat="server"><span>Admin</span></a> 

      <ul> 
       <li runat="server"><a href="#" runat="server"><span>bla</span></a> 
       </li> 
       <li runat="server"><a href="#" runat="server"><span>bli</span></a> 
       </li> 
      </ul> 
     </li> 
     <li id="L3" runat="server" style="position:absolute; right:1%;"><a id="A3" href="../ClientSide/Registration/registration.aspx" runat="server"><span>Sign Up</span></a> 
     </li> 
    </ul> 
</div>

Я попытался изменить #personalbar ul ulposition - relative, и вот w Шляпа сделал: http://jsfiddle.net/2fDQz/2/

источник

2014-02-17 Omer

ответ

4

Вам нужно обернуть absolute расположенный элемент внутри контейнера position: relative; ...

Demo

#personalbar li { 
    float: left; 
    margin: 0 5px 0 0; 
    position: relative; 
    border: 1px solid transparent; 
}

Обратите внимание, как указано на @Amarnath, в приведенном выше демо, меню рухнет, как только вы наведете дочерние элементы, это потому, что вы используете top: 40px;, поэтому избавитесь от этого - Demo

#personalbar ul ul { 
    position:absolute; 
    z-index: 1000; 
    display: none; 
    margin: 0; 
    padding: 0; 
    width: 185px; 
    top: 40px; /* Take this out from here */ 
    left: 0; 
    background: #ffffff; 
    border: solid 1px #b4b4b4; 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); 
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); 
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); 
}

Кроме того, хотел бы предложить вам, что, когда вы имеете дело с такой разметкой, то лучше использовать > селектор, так что элементы, выбранные с помощью CSS являются точными .. Если вы не зная, что делает этот селектор, он выбирает прямой дочерний элемент. Например, используя что-то вроде

ul li ul { 
    /* Selects all ul element nested under li */ 
}

Принимая во внимание, используя что-то вроде

ul > li > ul { 
    /* Selects direct ul element nested under li - First Level */ 
}

источник

2014-02-17 07:18:36

+1

TNX он работал, он hasnt был 11 minuts, так что я не могу, кроме йор ответить еще – Omer

+1

@ Mr.Alien подменю не доступны в разы .. !! –

+1

@AmarnathBalasubramanian Ohh Спасибо за то, что указали это, исправит его –

0

Вы должны установить все позиции li «s в relative для его работы. Создание чего-то position: relative сбрасывает значения позиционирования для любых дочерних элементов. При использовании абсолютного позиционирования внутри относительно позиционированного родителя ребенок (если он установлен на left: 0; top: 0;, например) будет позиционировать себя в верхнем левом краю родителя, а не в документе. Следует также отметить, что свойство z-index также сбрасывается относительно родителя.

Попробуйте это:

body {} 
 
/* Base Styles */ 
 

 
#personalbar ul, 
 
#personalbar li, 
 
#personalbar a { 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    border: 0; 
 
    line-height: 1; 
 
    font-family: 'Lato', sans-serif; 
 
} 
 
#personalbar { 
 
    border: 1px solid #123e3f; 
 
    width: auto; 
 
} 
 
#personalbar ul { 
 
    zoom: 1; 
 
    background: #33b3b7; 
 
    background: -moz-linear-gradient(top, #33b3b7 0%, #288c8f 100%); 
 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #33b3b7), color-stop(100%, #288c8f)); 
 
    background: -webkit-linear-gradient(top, #33b3b7 0%, #288c8f 100%); 
 
    background: -o-linear-gradient(top, #33b3b7 0%, #288c8f 100%); 
 
    background: -ms-linear-gradient(top, #33b3b7 0%, #288c8f 100%); 
 
    background: linear-gradient(top, #33b3b7 0%, #288c8f 100%); 
 
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='@top-color', endColorstr='@bottom-color', GradientType=0); 
 
    padding: 5px 10px; 
 
} 
 
#personalbar ul:before { 
 
    content: ''; 
 
    display: block; 
 
} 
 
#personalbar ul:after { 
 
    content: ''; 
 
    display: table; 
 
    clear: both; 
 
} 
 
#personalbar li { 
 
    float: left; 
 
    margin: 0 5px 0 0; 
 
    border: 1px solid transparent; 
 
    position: relative;  /* This is the important bit */ 
 
} 
 
#personalbar li a { 
 
    -webkit-border-radius: 5px; 
 
    -moz-border-radius: 5px; 
 
    -ms-border-radius: 5px; 
 
    -o-border-radius: 5px; 
 
    border-radius: 5px; 
 
    padding: 8px 15px 9px 15px; 
 
    display: block; 
 
    text-decoration: none; 
 
    color: #ffffff; 
 
    border: 1px solid transparent; 
 
    font-size: 16px; 
 
} 
 
#personalbar li.active { 
 
    -webkit-border-radius: 5px; 
 
    -moz-border-radius: 5px; 
 
    -ms-border-radius: 5px; 
 
    -o-border-radius: 5px; 
 
    border-radius: 5px; 
 
    border: 1px solid #33b3b7; 
 
} 
 
#personalbar li.active a { 
 
    -webkit-border-radius: 5px; 
 
    -moz-border-radius: 5px; 
 
    -ms-border-radius: 5px; 
 
    -o-border-radius: 5px; 
 
    border-radius: 5px; 
 
    display: block; 
 
    background: #1d6567; 
 
    border: 1px solid #123e3f; 
 
    -moz-box-shadow: inset 0 5px 10px #123e3f; 
 
    -webkit-box-shadow: inset 0 5px 10px #123e3f; 
 
    box-shadow: inset 0 5px 10px #123e3f; 
 
} 
 
#personalbar li:hover { 
 
    -webkit-border-radius: 5px; 
 
    -moz-border-radius: 5px; 
 
    -ms-border-radius: 5px; 
 
    -o-border-radius: 5px; 
 
    border-radius: 5px; 
 
    border: 1px solid #33b3b7; 
 
} 
 
#personalbar li:hover a { 
 
    -webkit-border-radius: 5px; 
 
    -moz-border-radius: 5px; 
 
    -ms-border-radius: 5px; 
 
    -o-border-radius: 5px; 
 
    border-radius: 5px; 
 
    display: block; 
 
    background: #1d6567; 
 
    border: 1px solid #123e3f; 
 
    -moz-box-shadow: inset 0 5px 10px #123e3f; 
 
    -webkit-box-shadow: inset 0 5px 10px #123e3f; 
 
    box-shadow: inset 0 5px 10px #123e3f; 
 
} 
 
#personalbar ul ul li:hover a, 
 
#personalbar li:hover li a { 
 
    background: none; 
 
    border: none; 
 
    color: #666; 
 
    -webkit-box-shadow: none; 
 
    -moz-box-shadow: none; 
 
} 
 
#personalbar ul ul a:hover { 
 
    background: #7d7d7d; 
 
    color: #fff !important; 
 
    -webkit-border-radius: 5px; 
 
    -moz-border-radius: 5px; 
 
    border-radius: 5px; 
 
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); 
 
} 
 
#personalbar li:hover > ul { 
 
    display: block; 
 
} 
 
#personalbar ul ul { 
 
    position: absolute; 
 
    z-index: 1000; 
 
    display: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    top: 40px; 
 
    left: 0; 
 
    background: #ffffff; 
 
    border: solid 1px #b4b4b4; 
 
    -webkit-border-radius: 5px; 
 
    -moz-border-radius: 5px; 
 
    border-radius: 5px; 
 
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); 
 
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); 
 
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); 
 
} 
 
#personalbar ul ul li { 
 
    position: relative; 
 
    float: none; 
 
    margin: 0; 
 
    padding: 3px; 
 
}
<div id='personalbar' style="position:absolute; top:0%;left:0%; width:100%;"> 
 
    <ul> 
 
    <li><a href='# '><span>Home</span></a> 
 
     <ul> 
 
     <li id="Li2" runat="server"><a id="A5" href="#" runat="server"><span>bla</span></a> 
 
     </li> 
 
     <li id="Li3" runat="server"><a id="A6" href="#" runat="server"><span>bli</span></a> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    <li id="L1" runat="server"><a id="A1" href="../ClientSide/newsFeed/allEr.aspx" runat="server"><span>My Wall</span></a> 
 
    </li> 
 
    <li id="L2" runat="server"><a id="A2" href="../ClientSide/employee/eeSettings.aspx" runat="server"><span>Setting</span></a> 
 
    </li> 
 
    <li id="Li1" runat="server"><a id="A4" href="../ClientSide/employee/eeSettings.aspx" runat="server"><span>Admin</span></a> 
 
     <ul> 
 
     <li runat="server"><a href="#" runat="server"><span>bla</span></a> 
 
     </li> 
 
     <li runat="server"><a href="#" runat="server"><span>bli</span></a> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    <li id="L3" runat="server" style="position:absolute; right:1%;"><a id="A3" href="../ClientSide/Registration/registration.aspx" runat="server"><span>Sign Up</span></a> 
 
    </li> 
 
    </ul> 
 
</div>

источник

2014-02-17 07:34:09

Смежные вопросы

 Смежные вопросы