Problema del ancho con el menú desplegable del sitio web -- javascript campo con jquery campo con html campo con css campo con drop-down-menu camp Relacionados El problema

Width issue with website dropdown menu


3
vote

problema

Español

Así que acaba de comenzar la página principal de mi nuevo sitio y coloco en un menú desplegable que probé la soltándola desde el botón Inicio. Imagen a continuación:

http://prntscr.com/28qnk2

Mi problema ocurre cuando intenté aplicar el mismo código a mi botón de complementos en el menú, todo el asunto salga. Imagen a continuación:

http://prntscr.com/28qpky

Esta es la primera vez que he intentado construir en un menú desplegable, por lo que mis intentos iniciales probablemente tengan algunos problemas con ellos, pero parece que no puedo hacer que esto funcione. Aquí está el código para el menú (HTML).

  <div id="menu">                     <table id="menu_table">                     <tr>                      <td id="home" class="menu_item" style="position:relative; z-index: 1000">                         <ul class="dropdown">                             <li><p>Home</p>                                 <ul>                                     <li>One</li>                                     <li>Two</li>                                 </ul>                             </li>                         </ul>                     </td>                      <td id="about_us" class="menu_item">About Us</td>                      <td id="plugins" class="menu_item">                         <ul class="dropdown">                             <li><p>Plugins</p>                                 <ul>                                     <li>One</li>                                     <li>Two</li>                                 </ul>                             </li>                         </ul>                     </td>                      <td id="tutorials" class="menu_item">Tutorials and Help</td>                      <td id="staff" class="menu_item">Staff</td>                      <td id="chat" class="menu_item">ChatRoom</td>                      </tr>                     </table>                 </div>   

y aquí está el CSS para el menú:

  #menu   {     position:relative;     float:right;     margin:2px;     margin-right:13%;     width:52%;     height:77px;     } #menu_table{     position:relative;     top:12%;     height:76%;     width:100%;     border-spacing:0px;     } .menu_item:first-child{     border-left:1px solid #40d7bc;     } .menu_item:hover{     background-color: black;     color:#40d7bc;     } .menu_item{     border-right:1px solid #40d7bc;     text-align:center;     } ul.dropdown li ul {      display:none;     position:absolute;     z-index:100;     padding-left:50%;     top:35px;     width:100%;     } ul.dropdown li ul li {     position:relative;     border-top:30px solid black;     left:-50%;     background-color: black;     } ul.dropdown li ul li:last-child {     border-bottom:15px solid black;     } .menu_item li {     list-style-type: none;     }   

y finalmente el pequeño bit de jQuery que usé.

  function() {      $('ul', this).stop(true, true).slideToggle(100); }, function() {      $('ul', this).stop(true, true).slideToggle(100); } );   

Gracias por cualquier ayuda sobre esto, estoy completamente perdido en lo que está mal.

La única idea que pueda tener con lo que es el problema, es cómo alineé el texto al centro. Lo hice al acollar el ul que contenía los submenús en un 50% de ancho, de esta manera, el lado izquierdo de la UL estaba en el medio y cuando cambié los elementos del submenú dejados por un 50% de ancho que estaban en el medio. Probablemente estés pensando por qué cambiarlos en absoluto, bueno por alguna razón, si los dejé en el medio, cubría parte de las fronteras en el menú, captura de pantalla: www.prntscr.com/28qwvv

Si estoy siendo un idiota y mi pregunta es estúpida, no dude en señalarlo siempre y cuando me dé una razón

Original en ingles

So ive just started the master page for my new site and i put in a dropdown menu which i tested out by dropping it from the home button. Image below:

http://prntscr.com/28qnk2

My problem occurs when i tried to apply the same code to my plugins button in the menu, the whole thing spaces out. Image below:

http://prntscr.com/28qpky

This is the first time ive tried to build in a dropdown menu so my initial attempts probably have some issues with them but i cant seem to get this to work. Here is the code for the menu (html).

<div id="menu">                     <table id="menu_table">                     <tr>                      <td id="home" class="menu_item" style="position:relative; z-index: 1000">                         <ul class="dropdown">                             <li><p>Home</p>                                 <ul>                                     <li>One</li>                                     <li>Two</li>                                 </ul>                             </li>                         </ul>                     </td>                      <td id="about_us" class="menu_item">About Us</td>                      <td id="plugins" class="menu_item">                         <ul class="dropdown">                             <li><p>Plugins</p>                                 <ul>                                     <li>One</li>                                     <li>Two</li>                                 </ul>                             </li>                         </ul>                     </td>                      <td id="tutorials" class="menu_item">Tutorials and Help</td>                      <td id="staff" class="menu_item">Staff</td>                      <td id="chat" class="menu_item">ChatRoom</td>                      </tr>                     </table>                 </div> 

and here is the CSS for the menu:

#menu   {     position:relative;     float:right;     margin:2px;     margin-right:13%;     width:52%;     height:77px;     } #menu_table{     position:relative;     top:12%;     height:76%;     width:100%;     border-spacing:0px;     } .menu_item:first-child{     border-left:1px solid #40d7bc;     } .menu_item:hover{     background-color: black;     color:#40d7bc;     } .menu_item{     border-right:1px solid #40d7bc;     text-align:center;     } ul.dropdown li ul {      display:none;     position:absolute;     z-index:100;     padding-left:50%;     top:35px;     width:100%;     } ul.dropdown li ul li {     position:relative;     border-top:30px solid black;     left:-50%;     background-color: black;     } ul.dropdown li ul li:last-child {     border-bottom:15px solid black;     } .menu_item li {     list-style-type: none;     } 

and finally the small bit of jQuery i used.

function() {      $('ul', this).stop(true, true).slideToggle(100); }, function() {      $('ul', this).stop(true, true).slideToggle(100); } ); 

Thanks for any help on this, im completely lost on whats wrong with it.

The only idea i may have with what the issue is, is how i aligned the text to the center. I did it by padding the ul containing the submenus by 50% width, this way the left side of the ul was down the middle and when i shifted the submenu items left by 50% width they were in the middle. You're probably thinking why shift them at all, well for some reason if i left them in the middle it covered up part of the borders on the menu, screenshot: www.prntscr.com/28qwvv

If I'm being an idiot and my question is stupid please feel free to point it out as long as you give me a reason

              
       
       

Lista de respuestas

1
 
vote
vote
La mejor respuesta
 

Noté que está aplicando una posición de estilo en línea con respecto a su teléfono TD .. Retire el estilo en línea y agregue esto a su CSS.

  .menu_item {    position: relative; }   

Esto debería hacer el truco. Los elementos relativos contendrán elementos absolutos, y parece que no lo está conteniendo al ancho del plugin. Vea mis comentarios arriba.

 

I noticed that you are applying an inline style position relative to your home TD.. Remove the inline style and add this to your css.

.menu_item {    position: relative; } 

This should do the trick. Relative elements will contain absolute elements, and it appears that you are not containing it to the plugin width. See my comments above.

 
 
 
 

Relacionados problema

0  Echo sin error pero no muestra datos de MySQL  ( Echo no error but not displaying data from mysql ) 
Echo 'Descripción:'. $ ROW ['Descripción']; En el código a continuación, no se muestra en absoluto ... ejecuta la primera declaración, pero la segunda no pare...

1  Cómo crear país -> Estado / Provincia ---> Código postal desplegable usando Geonames WebService + ASP.NET  ( How to create country state province zip code drop down using geonames webs ) 
Estoy planeando crear una lista desplegable en cascada de país - & GT; Estado / provincia --- & gt; código postal usando Geonames. ¿Tiene algún buen servicio ...

2  Añadiendo dinámicamente una lista cautela  ( Dynamically adding a dropdownlist ) 
Estoy tratando de agregar un desplegimiento dinámicamente. No hay errores, excepto que no veo el menú desplegable. Aquí está el código: protected void Page...

3  Menú desplegable CSS  ( Css drop down menu ) 
he estado tratando de obtener un abandono "CSS puro" ¿Ha estado tratando de que los días obtenga una "simple" CSS desplegable Navidad puede obtener el nivel s...

1  Controles desplegables en ASP.NET 2.0  ( Dropdown controls in asp net 2 0 ) 
Estoy usando una página de CodeBehind en ASP.NET para realizar una consulta de SQL. La consulta se carga en una cadena, se establece la conexión (a Oracle), y...

3  Selenio: ¿Cómo configurar la prueba en la caja desplegable?  ( Selenium how to set test on dropdown box ) 
en primavera He generado Forma create.jspx con algunos cuadros de edición y algunos cuadros de selección desplegable. La forma que se debe probar en Selen...

1  CSS Hover + Elemento se estrella en Webkit (Chrome, Safari)  ( Css hover element crashing in webkit chrome safari ) 
¿Encontré un insecto molesto hoy en que se estrelló Chrome y Safari (por lo que todos los navegadores webkit?) Con solo CSS. Es un menú flotante, flotando s...

0  ¿Por qué este menú desplegable no funciona en IE?  ( Why doesnt this drop down menu work in ie ) 
Tengo un menú desplegable que encontré un tutorial para. < / p> En Firefox y Opera, el menú desplegable funciona bien. Pero en Internet Explorer no funcion...

0  Magento: este archivo JavaScript no se fusiona correctamente  ( Magento this javascript file doesnt merge correctly ) 
Tengo una webshop magento 1.6.2. Me gustaría fusionar los archivos de JavaScript para optimizar mis posiciones de carga. Pero cuando selecciono Fusionar en ...

0  menú desplegable no conseguir mostrar ninguno  ( Drop down menu not getting display none ) 
Estoy tratando de crear un menú desplegable como Wistia.com . Pero no puedo obtener este efecto de flores. He puesto mi código en un fragmento de abajo. Cuan...




© 2022 respuesta.top Reservados todos los derechos. Centro de preguntas y respuestas reservados todos los derechos