CSS. Как сделать так, чтобы выпадающее меню было под нужным пунктом?(подр.)

Question

4 года назад

0

CSS. Как сделать так, чтобы выпадающее меню было под нужным пунктом?(подр.)

Ради практики Js и jQuery решил сделать небольшой сайтик, и первым что я хотел сделать было выпадающее меню. С Js кодом все понятно, но тут настало время оформления. В CSS я очень слаб, да и не нужен он мне. Перекопав просторы интернета нашел нужные стили, но тут случилась проблема, лучшее к чему я пришел выглядит так:

То бишь меню выпадает сбоку, а не снизу. Как сделать так, чтобы див блоки остались горизонтальны, а меню выпадало вниз?

компьютеры и интернет

css

создание сайта

+3

1 ответ:

bykvaed [19.7K] · Answer 1 · 2020-03-22T09:17:38+03:00

Горизонтальное меню с выпадающим списком. Пример рабочий. Думаю понять концепцию и переделать под свои нужды труда вам не составит. И в строчка которые начинаются так (# уберите открывающею скобочку в начале. Это я вынужден поставить поскольку здесь на сайте никак по другому код не выложить всего в трех местах.

<html>

<head>

a { font-family: Verdana, Arial; color: white; text-decoration: none; font-weight:bold; }

a:hover { color: white; text-decoration: none; font-weight:bold; background-color:silver;}

(#box {position:absolute;visibility:hidden;layer-background-color:silver }

(#blackbox { font-family: Verdana, Arial; font-size:8pt; color: white; background-color:black; text-decoration: none }

(#mnubar { font-family: Verdana, Arial; font-size:10pt; color: white; font-weight:bold; text-decoration: none }

</style>

ns=window.navigator.appName == "Netscape"

ie=window.navigator.appName == "Microsoft Internet Explorer"

function openIt(x) {

if(ns) {

showbox= document.layers[x+1]

showbox.visibility = "show"

showbox.top=44

var items = 5

for (i=1; i<=items; i++) {

elopen=document.layers[i]

if (i != (x + 1)) {

elopen.visibility = "hide" }

}

if(ie) {

curEl = event.toElement

curEl.style.background = "silver"

showBox = document.all.box[x];

showBox.style.visibility = "visible";

showBox.style.top = 40;

var items = 5

for (i=0; i<items; i++) {

elOpen=document.all.box[i]

barEl=document.all.mnubar[i]

if (i != x){

elOpen.style.visibility = "hidden"

barEl.style.background = "#000000"

}

function closeIt() {

var items = 5

for (i=0; i<items; i++) {

if(ie){

document.all.box[i].style.visibility = "hidden"

barEl=document.all.mnubar[i]

barEl.style.background = "#000000"

}

if(ns){ document.layers[i+1].visibility = "hide"}

}

</script>

</head>

<tr>

</tr>

</table>

</layer>

</div>

<tr><td><a href='index.htm'>Ссылка 1</a></td></tr>

<tr><td><a href='index.htm'>Ссылка 2</a></td></tr>

</table>

</div>

<tr><td><a href='index.htm'>Ссылка 1</a></td></tr>

<tr><td><a href='index.htm'>Ссылка 2</a></td></tr>

</table>

</div>

<tr><td><a href='index.htm'>Ссылка 1</a></td></tr>

<tr><td><a href='index.htm' >Ссылка 2</a></td></tr>

<tr><td><a href='index.htm' >Ссылка 3</a></td></tr>

</table>

</div>

<tr><td><a href='index.htm' >Ссылка 1</a></td></tr>

<tr><td><a href='index.htm' >Ссылка 2</a></td></tr>

<tr><td><a href='index.htm' >Ссылка 3</a></td></tr>

<tr><td><a href='index.htm' >Ссылка 4</a></td></tr>

<tr><td><a href='index.htm' >Ссылка 5</a></td></tr>

</table>

</div>

<tr><td><a href='index.htm' >Ссылка 1</a></td></tr>

<tr><td><a href='index.htm' >Ссылка 2</a></td></tr>

<tr><td><a href='index.htm' >Ссылка 3</a></td></tr>

<tr><td><a href='index.htm' >Ссылка 4</a></td></tr>

</table>

</div>

<tr><td><a href='index.htm' >Ссылка 1</a></td></tr>

<tr><td><a href='index.htm' >Ссылка 2</a></td></tr>

<tr><td><a href='index.htm' >Ссылка 3</a></td></tr>

</table>

</div>

</body>

</html>