rendono larghezza la stessa dimensione di un altro elemento html

Ciao Ho un pulsante a discesa che quando si passa il mouse su di esso, scende alcuni collegamenti alle pagine. Voglio che quei collegamenti abbiano le stesse dimensioni della larghezza del pulsante.rendono larghezza la stessa dimensione di un altro elemento html

La dimensione del pulsante è 100% della larghezza del contenuto, quindi varia. Come faccio a rendere le dimensioni degli elementi a discesa delle stesse dimensioni del pulsante con i CSS?

<style type="text/css"> 
     #button { /* Box in the button */ 
     display: block; 
     width: 190px; 
     } 

     #button a { 
     text-decoration: none; /* Remove the underline from the links. */ 
     } 
ul 
{ 
list-style-type:none; 
margin:0; 
padding:0; 
overflow:hidden; 
} 
li{ 
float:left; 
list-style-type: none; 
} 
     #button ul { 
     list-style-type: none; /* Remove the bullets from the list */ 
     } 

     #button .top { 
display:block; 
width:100%; 
font-weight:bold; 
color:#FFFFFF; 
background-color:#98bf21; 
text-align:center; 
padding:4px; 
text-decoration:none; 
text-transform:uppercase; /* The button background */ 
     } 

     #button ul li.item { 
     display: none; /* By default, do not display the items (which contains the links) */ 
     } 

     #button ul:hover .item { /* When the user hovers over the button (or any of the links) */ 
     display: block; 

     border: 1px solid black; 
     background-color: #6CC417; 
     } 
a:link,a:visited 
{ 
display:block; 
width:120px; 
font-weight:bold; 
color:#FFFFFF; 
background-color:#98bf21; 
text-align:center; 
padding:4px; 
text-decoration:none; 
text-transform:uppercase; 
} 
a:hover,a:active 
{ 
background-color:#7A991A; 


} 
.container 
{ 
text-align:center; 
} 

.center_div 
{ 
border:1px solid gray; 
margin-left:auto; 
margin-right:auto; 
width:90%; 
background-color:#d0f0f6; 
text-align:left; 
padding:8px; 
} 

    </style> 
</head> 
<body bgcolor="#FFFFFF"> 

<p><img src="Screen%20shot%202010-07-11%20at%204.07.59%20PM.png" width="211" height="86" alt="idc"> 

<ul> 
<li> 
    <div id="button"> 
     <ul> 
     <li class="top">OtherOverflow Sites</li> 
     <li class="item"><a href="http://serverfault.com/">Visit serverfault</a></li> 
     <li class="item"><a href="http://superuser.com/">Visit superuser</a></li> 
     <li class="item"><a href="http://doctype.com/">Visit doctype</a></li> 
     </ul> 
    </div> 
</li> 
<li> 
    <div id="button"> 
     <ul> 
     <li class="top">OtherOverflow Sites</li> 
     <li class="item"><a href="http://serverfault.com/">Visit serverfault</a></li> 
     <li class="item"><a href="http://superuser.com/">Visit superuser</a></li> 
     <li class="item"><a href="http://doctype.com/">Visit doctype</a></li> 
     </ul> 
    </div> 
</li> 
</ul></p> 
<div class="container"> 
<div class="center_div"> 
<h1>Hello World!</h1> 
<p>This example contains some advanced CSS methods you may not have learned yet. But, we will explain these methods in a later chapter in the tutorial.</p> 
</div> 
</div> 
</body>

fonte

2010-07-12 SuperString

tre cose:

#button ul:hover .item esigenze larghezza impostata al 100%.

#button ul:hover .item {any of the links) */ 
    display: block; 
    width:100%; 
    border: 1px solid black; 
    background-color: #6CC417; 
    }

Tutti i collegamenti sono impostati su 120px!

a:link,a:visited { 
    display:block; 
    width:120px; 
    ...

Eliminare il width:120px;

Come ha detto Meder, non utilizzare un id, utilizzare una classe. E il codice ha lo stesso id più volte - che è illegale.

Quindi: <div id="button"> diventa: <div class="DropDwnMenuBtn">.

fonte

2010-07-13 03:39:54

Brock Adams, il collegamento è morto, si prega di aggiornarlo. – Farside

si dispone di più ids pulsante. Utilizzare le classi per più elementi.
Non dovresti semplicemente aver bisogno di #button a {display: block; }? È difficile dire quando non hai un visual.

fonte

2010-07-12 00:27:38

rendono larghezza la stessa dimensione di un altro elemento html

risposta

Problemi correlati