CSS Выпадающее меню вниз

Question

CSS Выпадающее меню вниз

0

У меня не так много опыта в html + css, но у меня есть google, поэтому легко опираться, но иногда все идет не так. Я пытаюсь сделать свой собственный портфолио, где на первой странице отображается только мой логотип и выпадающее меню с двумя языками. Он находится на левом дне, и когда мышь над его дисплеями вверх, но я хотел, чтобы дисплей был бок о бок.

португальский
английский
язык

Но я хочу так.

Язык - английский - португальский

HTML:

<nav > 
<ul >
    <li><a href=""><img src="image/language.png" alt="English - UK" width="229" height="37" /></a>
         <ul>
            <li><a href="HTML.html"><img src="image/english.png" alt="English - UK" width="139" height="37" /></a></li>
            <li><a href="#"><img src="image/portugues.png" alt="Portugues - BR" width="139" height="37" /></a></li>             

        </ul>
     </li>
</ul>

CSS:

   nav ul ul {
   display: none;
}


 nav ul li:hover ul {
     display: block;
}

nav ul {
background-repeat: no-repeat;
background-position: center;
background-size: 300px 50px;        
    margin-left: -10px; 
padding: 10px;    
list-style: none;
position: relative;
display: inline-table; 
bottom: 100%;

}

nav ul:after {
    content: ""; clear: both; display: block;
}   

    nav ul li {
    float: left;

}

nav ul li:hover {


}

nav ul li:hover a {
/*color: #fff;*/
}

nav ul li a {
 padding: 0px;
}

nav ul ul {
background-repeat: no-repeat;
 background-size: 139px 37px;
position: absolute; left: 13%;
padding: 1px;   
}

nav ul ul li {
float: none;        
position: relative;     
}

nav ul ul li a {
padding: 15px 43px;
/*color: #fff;*/
}   

nav ul ul li a:hover {

}

nav ul ul ul {
position: absolute; left: 100%; top:50;
}

Я очень ценю любую помощь

большое спасибо

UPDATE: вот экран печати с тем, как я это сделал, и тем, как мне нужно! http://i395.photobucket.com/albums/pp32/jh4ck/imagen1.jpg

Hugo 20 фев. 2014, в 14:07

Источник

0

Пожалуйста, создайте JSfiddle. Это было бы очень легко отладить. JSfiddle.net
Ankur Aggarwal 20 фев. 2014, в 12:35
0

Пожалуйста, предоставьте нам полный URL-адрес изображения вместо изображения / *. Png
Daan 20 фев. 2014, в 12:43
0

@Daan Даан, я не поняла. Ты хочешь как C: \ wamp \ www \ h.toffanelo \ image Как это? сожалею
Hugo 20 фев. 2014, в 13:03
0

Ах, у вас есть это на локальном сервере, хорошо, вы должны попытаться загрузить его куда-нибудь, и дать нам ссылку на загруженное изображение.
Daan 20 фев. 2014, в 13:09
0

на самом деле я ищу место для его размещения. У меня есть распечатка, показывающая, как это работает, но, поскольку я новичок здесь, я не могу публиковать фотографии!
Hugo 20 фев. 2014, в 13:21
0

@Daan Даан Я получил отпечаток, чтобы посмотреть. i395.photobucket.com/albums/pp32/jh4ck/imagen1.jpg
Hugo 21 фев. 2014, в 14:44
0

Вы можете загрузить его в фотобакет, вместо того, чтобы загружать экран печати, вы можете загрузить туда фотографии. Затем отредактируйте свой код здесь, чтобы люди могли помочь вам лучше. ;)
Daan 21 фев. 2014, в 14:47

Показать ещё 5 комментариев

Теги:

html

css

3 ответа

Ещё вопросы

Пожалуйста, создайте JSfiddle. Это было бы очень легко отладить. JSfiddle.net
Пожалуйста, предоставьте нам полный URL-адрес изображения вместо изображения / *. Png
@Daan Даан, я не поняла. Ты хочешь как C: \ wamp \ www \ h.toffanelo \ image Как это? сожалею
Ах, у вас есть это на локальном сервере, хорошо, вы должны попытаться загрузить его куда-нибудь, и дать нам ссылку на загруженное изображение.
на самом деле я ищу место для его размещения. У меня есть распечатка, показывающая, как это работает, но, поскольку я новичок здесь, я не могу публиковать фотографии!
@Daan Даан Я получил отпечаток, чтобы посмотреть. i395.photobucket.com/albums/pp32/jh4ck/imagen1.jpg
Вы можете загрузить его в фотобакет, вместо того, чтобы загружать экран печати, вы можете загрузить туда фотографии. Затем отредактируйте свой код здесь, чтобы люди могли помочь вам лучше. ;)

Jez D · Answer 1 · 2014-02-20T11-33-00.000Z

0

Измените свой CSS на

ul ul li{display: inline-block}

или

ul ul li{display: inline}

Jez D 20 фев. 2014, в 11:33

0

Вы имеете в виду, где Nav Ul Ul {плавать: нет; позиция: относительная;}? Я сделал, но не работает
Hugo 20 фев. 2014, в 13:00
0

У вас также был какой-то лишний </ li>, который я удалил из вашего поста. Вы удалили их из своего HTML?
Jez D 20 фев. 2014, в 13:40
0

конечно, но я все еще не работал.
Hugo 20 фев. 2014, в 15:57

Показать ещё 1 комментарий

Daan · Answer 2 · 2014-02-20T10-42-00.000Z

Единственное, что я мог сделать с кодом, который вы предоставили, - это исправить HTML, это было не совсем так.

HTML:

<nav > 
<ul>
    <li><a href=""><img src="image/language.png" alt="English - UK" width="229" height="37" /></a>
        <ul>
            <li><a href="HTML.html"><img src="image/english.png" alt="English - UK" width="139" height="37" /></a></li>
            <li><a href="#"><img src="image/portugues.png" alt="Portugues - BR" width="139" height="37" /></a></li> 
        </ul>
    </li>
</ul>
</nav>

Демо-версия JSFiddle

Я думаю, ваша проблема заключается в том, как ваши позиции всего сайта, а не только выпадающее меню.

Изменение: вы просто изменили свой HTML точно так же, как и я, моя неудачная причина, по которой я его видел после того, как вы его обновили.

Bala · Answer 3 · 2014-02-20T09-52-00.000Z

попробуйте этот css

 nav ul ul {
   display: none;
}


 nav ul li:hover ul {
     display: inline;
}

nav ul {
background-repeat: no-repeat;
background-position: center;
background-size: 300px 50px;        
    margin-left: -10px; 
padding: 10px;    
list-style: none;
position: relative;
display: inline; 
bottom: 100%;

}

nav ul:after {
    content: "";
}   

    nav ul li {
    float: left;

}

nav ul li:hover {


}

nav ul li:hover a {
/*color: #fff;*/
}

nav ul li a {
 padding: 0px;
}

nav ul ul {
background-repeat: no-repeat;
 background-size: 139px 37px;

padding: 1px;   
}

nav ul ul li {
float: none;        
position: relative;   
    display:inline;
}

nav ul ul li a {
padding: 0 10px;
/*color: #fff;*/
}   

nav ul ul li a:hover {

}

nav ul ul ul {
position: absolute; left: 100%; top:50;
}

демонстрация

это работает в JSfiddle, но когда я изменяю свои коды, меню перемещается вниз и влево. Не знаю почему.