HTML - Agregarar una imagen a un menú

   
Vista:

Agregarar una imagen a un menú

Publicado por CARLOS estudio@carloscampanella.com.ar (2 intervenciones) el 19/06/2017 17:15:25
Hola a todos, estoy en la etapa de aprendizaje y hay algo que me pidieron que no puedo lograr: Agregar una imagen de flechita tipo "v" al lado del item "Productos" del menú, para indicar que hay un sub-menú desplegable. Describo abajo el menú.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<ul id="navigation">
    <li><a href="index.php">Home</a></li>
    <li><a href="gafas-lectura.php">Productos</a>
        <ul>
			<li><a href="gafas-lectura.php">Gafas de Lectura</a></li>
			<li><a href="anteojos-sol.php">Anteojos para sol</a></li>
			<li><a href="armazones.php">Armazones</a></li>
			<li><a href="accesorios.php">Accesorios</a></li>
			<li><a href="exhibidores.php">Exhibidores</a></li>
			<li><a href="bufandas.php">Bufandas</a></li>
			<li><a href="paraguas.php">Paraguas</a></li>
			<li><a href="manicuria.php">Set de Manicur&iacute;a</a></li>
        </ul>
    </li>
    <li><a href="novedades.php" class="destaque">Novedades</a></li>
    <li><a href="empresa.php">Quienes somos</a></li>
    <li><a href="legales.php">Legales</a></li>
    <li><a href="contacto.php">Contacto</a></li>
    <li><a href="https://www.facebook.com/pages/Loveli/569014829776656?ref=hl" class="zocial facebook"></a></li>
</ul>

El sitio fue diseñado hace mucho por otro colega y me cuesta comprender todo el código css asociado, como para agregar esta pequeña imagen que me piden. La parte del css en cuestión es:

1
2
3
4
5
6
7
8
9
10
11
12
13
#navigation{display:inline-block;float:right;margin-top:60px}
#navigation li{position:relative;float:left}
#navigation a{position:relative;display:block;margin:0 0 0 30px;color:#959595;font-weight:500;font-size:14px}
#navigation>li>a{height:30px}
#navigation a:hover,#navigation .hover>a,#navigation .current>a{color:#A32335}
#navigation ul{position:absolute;top:30px;left:0;z-index:9999;display:none;margin:0 0 0 30px;padding:0;width:200px;border-radius:3px;background:#333;-webkit-box-shadow:0 2px 8px rgba(0,0,0,.35);box-shadow:0 2px 8px rgba(0,0,0,.35)}
#navigation ul li{float:none;border-bottom:1px solid #3d3d3d}
#navigation ul li:last-child{border-bottom:none}
#navigation ul li i{position:absolute;right:10px}
#navigation ul li i:before{margin-top:5px;color:#c2c2c2;content:"\f054";font-size:9px;font-family:'FontAwesome'}
#navigation ul a{display:block;margin:0;padding:7px 20px;color:#c2c2c2;font-size:12px}
#navigation ul a:hover,#navigation ul .hover>a,#navigation ul .current>a,#navigation ul .current>a:hover{color:#fff}
#navigation ul ul{top:0;left:200px;margin:0}

Desde ya muchas gracias!
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de [abZeroX]

Agregarar una imagen a un menú

Publicado por [abZeroX] (12 intervenciones) el 20/06/2017 05:06:03
Hola, te comparto una simple solución usando puro css sin imágenes para hacer esa pequeña flecha que buscabas:

HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<ul id="navigation">
    <li><a href="index.php">Home</a></li>
   <li class="submenu">
        <a href="gafas-lectura.php">Productos <span class="arrow"></span></a>
        <ul>
            <li><a href="gafas-lectura.php">Gafas de Lectura</a></li>
            <li><a href="anteojos-sol.php">Anteojos para sol</a></li>
            <li><a href="armazones.php">Armazones</a></li>
            <li><a href="accesorios.php">Accesorios</a></li>
            <li><a href="exhibidores.php">Exhibidores</a></li>
            <li><a href="bufandas.php">Bufandas</a></li>
            <li><a href="paraguas.php">Paraguas</a></li>
            <li><a href="manicuria.php">Set de Manicur&iacute;a</a></li>
        </ul>
    </li>
    <li><a href="novedades.php" class="destaque">Novedades</a></li>
    <li><a href="empresa.php">Quienes somos</a></li>
    <li><a href="legales.php">Legales</a></li>
    <li><a href="contacto.php">Contacto</a></li>
    <li><a href="https://www.facebook.com/pages/Loveli/569014829776656?ref=hl" class="zocial facebook"></a></li>
</ul>

CSS (Agrega esto al css anterior)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
ul {
    list-style-type: none;
}
 
ul li a {
    text-decoration: none;
}
 
 
.submenu {
    position: relative;
}
 
.arrow {
    background-color: transparent;
    border: 6px solid transparent;
    border-top-color: #000;
    width: 0;
    height: 0;
    position: absolute;
    top: 5px;
    right: -15px;
    cursor: pointer;
}
 
#navigation li:hover span {
    border-top-color: #A32335;
}
 
#navigation li:hover > ul {
    display: block;
}

Nos comentas si te sirve.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
2
Comentar

Agregarar una imagen a un menú

Publicado por CARLOS (2 intervenciones) el 20/06/2017 20:42:36
Genial abZeroX ! solo tuve que ajustar la altura y el color nada más.
Si querés ver como quedó: www.loveli.com.ar
Muchas gracias !
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar