Замена вертикальных пунктов подменю на горизонтальные

@ivark · Регистрация: 01.11.2015

Author24 — интернет-сервис помощи студентам

Всем доброго времени суток.
Подскажите, пожалуйста, решение следующей задачи: необходимо поменять в меню вертикальные пункты подменю на горизонтальные так, чтобы сохранилась подсветка активного пункта в меню. Сам, к сожалению, с этой задачей справится пока не смог. Заранее всем спасибо!

Код HTML

HTML5

<ul id="nav">
<li><a href="#">Меню 1</a>
<ul>
<li><a href="#">Подменю 1</a></li>
<li><a href="#">Подменю 2</a></li>
<li><a href="#">Подменю 3</a></li>
</ul>
</li>
<li><a href="#">Меню 2</a>
<ul>
<li><a href="#">Подменю 1</a></li>
<li><a href="#">Подменю 2</a></li>
<li><a href="#">Подменю 3</a></li>
</ul>
</li>
<li><a href="#">Меню 3</a>
<ul>
<li><a href="#">Подменю 1</a></li>
<li><a href="#">Подменю 2</a></li>
<li><a href="#">Подменю 3</a></li>
</ul>
</li>
<li><a href="#">Меню 4</a></li>
<li><a href="#">Меню 5</a></li>
</ul>

Код CSS

CSS

* {
margin:0;
padding:0;
}
#nav {
font:13px verdana, arial, helvetica, sans-serif;
list-style-type:none;
width:100%;
height:25px;
display:inline-block;
background:#A39E92;
line-height:25px;
}
#nav li{
float:left;
width:120px;
margin-top:-10000px;
}
#nav li a {
width:120px;
text-decoration:none;
text-align:center;
color:#3A3732;
position:relative;
float:left;
margin-right:-119px;
margin-top:10000px;
}
#nav li a:hover, #nav li a:focus, #nav li a:active {
background:#797466;
margin-right:0;
color:#fff;
}
#nav li ul {
background:#A39E92;
float:left;
margin-top:-25px;
padding-top:25px;
margin-bottom:-10000px;
list-style-type:none;
}
#nav li ul li {
float:none;
margin:0;
width:auto;
}
#nav li ul li a {
float:none;
display:block;
margin:0;
margin-right:-1px;
background:#BFBCB5;
}

@gulliver · 01.11.2015, 14:02

HTML5

<ul id="nav">
    <li>
    <a href="#">Меню 1</a>
        <ul>
            <li><a href="#">Подменю 1</a></li>
            <li><a href="#">Подменю 2</a></li>
            <li><a href="#">Подменю 3</a></li>
        </ul>
    </li>
    <li>
    <a href="#">Меню 2</a>
        <ul>
            <li><a href="#">Подменю 1</a></li>
            <li><a href="#">Подменю 2</a></li>
            <li><a href="#">Подменю 3</a></li>
        </ul>
    </li>
    <li>
    <a href="#">Меню 3</a>
        <ul>
            <li><a href="#">Подменю 1</a></li>
            <li><a href="#">Подменю 2</a></li>
            <li><a href="#">Подменю 3</a></li>
        </ul>
    </li>
</ul>

CSS

#nav li{float:left; width:55px; margin-left:15px; list-style-type: none;}
#nav li ul {display:none; min-width: 300px;}
#nav li ul li {display:inline-block; width:auto; margin-left:20px;}
#nav li:hover ul {display:block;  margin-left: -60px; height: 20px;}

с оформление сами справитесь ?

@ivark · 01.11.2015, 14:44 **[ТС]**

gulliver спасибо, с оформлением я справлюсь (я так думаю…

), но проблема именно в том, что в Вашем варианте всё работает, но без подсветки активного пункта. В моем варианте подсветка есть как в пунктах меню, так и пунктах подменю (при наведении и при нажатии). Я хочу постараться добиться именно подсвети активного пункта средствами CSS и HTML (как у меня в примере) и поменять при этом только форму выпадающего подменю на горизонтальное. Вот с этой проблемой, я к сожалению пока справится не могу……..

@gulliver · 01.11.2015, 17:51

CSS

#nav li{float:left; width:55px; margin-left:15px; list-style-type: none;}
#nav li ul {display:none; min-width: 300px;}
#nav li ul li {display:inline-block; width:auto; margin-left:20px;}
#nav li:hover ul {display:block;  margin-left: -60px; height: 20px;}
#nav li a:hover, #nav li a:focus, #nav li a:active {
background:#797466;
margin-right:0;
color:#fff;
}

так?

@ivark · 01.11.2015, 20:51 **[ТС]**

gulliver спасибо ещё раз! Сейчас все отлично! Теперь пойду, с оформлением справляется

@ivark · 11.11.2015, 11:03 **[ТС]**

Добрый день, уважаемые ГУРУ форума!!!
Возникли ещё несколько вопросов по данному меню: возможно ли средствами CSS сделать такой вариант, что после нажатия на пункт меню или подменю, само подменю не пропадало??? (Во как загнул!

)
Если возможно это сделать, то и второй вопрос – КАК??? Заранее всем спасибо!

@ivark 0 / 0 / 0 Регистрация: 01.11.2015 Сообщений: 7
	01.11.2015, 14:44 [ТС]	3
	gulliver спасибо, с оформлением я справлюсь (я так думаю…), но проблема именно в том, что в Вашем варианте всё работает, но без подсветки активного пункта. В моем варианте подсветка есть как в пунктах меню, так и пунктах подменю (при наведении и при нажатии). Я хочу постараться добиться именно подсвети активного пункта средствами CSS и HTML (как у меня в примере) и поменять при этом только форму выпадающего подменю на горизонтальное. Вот с этой проблемой, я к сожалению пока справится не могу…….. 0

@ivark 0 / 0 / 0 Регистрация: 01.11.2015 Сообщений: 7
	01.11.2015, 20:51 [ТС]	5
	gulliver спасибо ещё раз! Сейчас все отлично! Теперь пойду, с оформлением справляется 0

@ivark 0 / 0 / 0 Регистрация: 01.11.2015 Сообщений: 7
	11.11.2015, 11:03 [ТС]	6
	Добрый день, уважаемые ГУРУ форума!!! Возникли ещё несколько вопросов по данному меню: возможно ли средствами CSS сделать такой вариант, что после нажатия на пункт меню или подменю, само подменю не пропадало??? (Во как загнул! ) Если возможно это сделать, то и второй вопрос – КАК??? Заранее всем спасибо! 0

Опции темы