как сделать такое меню

oleg29331 · May 6, 2015

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

http://s017.radikal.ru/i429/1505/e1/04f7b023183b.png

Подскажите плиз кто знает , как сделать такое выпадающее меню как в макете , у меня что то оно не скрывается , хотя пробовал ставить visible hidden

добавлю код который я уже написал:

html

<DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="css/bootstrap.css" rel="stylesheet" type="text/css"><link href="css/bootstrap-theme.css" rel="stylesheet" type="text/css"><link href="css/custom.css" rel="stylesheet" type="text/css"></head><body><header><div class="container-fluid" id="topmenulogo"><div class="col-sm-4" id="logo"><a href=""><img src="images/logo.png"></a></div><div class="col-sm-8" id="navigation"><nav><ul><li><a href="">home</a></li><li><a href="">about</a></li><li><a href="">cervices</a></li><li><a href="">portfolio</a><ul class="inside"><li><a href="">cervices</a></li><li><a href="">cervices</a></li><li><a href="">cervices</a></li></ul></li><li><a href="">blog</a></li><li><a href="">featured</a></li><li><a href="">contact</a></li></ul></nav></div></div><div class="container-fluid"><div class="col-sm-12">caroucel</div></div><div class="container-fluid">breadcrumbs</div></header><div  class="col-sm-8">content</div><div  class="col-sm-4">right</div><footer><div  class="container-fluid"><div  class="col-sm-5">modus versus</div><div  class="col-sm-3">footer menu</div><div  class="col-sm-4">blog</div></div></footer></body></html>

css

@charset "utf-8";#topmenulogo{height:80px;background-image:url(../images/headerbackground.png);}#logo img{padding-top:22px;margin-left:20%;}nav{float:right;padding-top:27px;width:100%;}nav ul li{float:left;list-style-type:none;margin-left:2%;height:30px;padding:0 2%;}nav ul li:hover{background-color:#E5655D;border-bottom:4px solid #E2534B;border-radius:4px;}nav ul li a{color:#fff;height:30px;display:block;text-transform:uppercase;font-weight:600;font-size:90%;margin-top:6px;}nav ul li a:hover{color:#fff;text-decoration:none;}.inside{ position: absolute;}

Edited May 6, 2015 by rus
Код заключайте в теги форума!

satantx · May 6, 2015

Покажите код, разместите его тут: http://jsfiddle.net/

Тогда и поможем

oleg29331 · May 6, 2015

Покажите код, разместите его тут: http://jsfiddle.net/
Тогда и поможем

код указал выше , на http://jsfiddle.net/не хочет хавать почему то

rus · May 6, 2015

ну примерно так:

nav ul li {float:left;list-style-type:none;margin-left:2%;height:30px;padding:0 2%;position: relative;}nav ul li .inside {display:none;}nav ul li a:hover{ // я бы сделал ховер на тег abackground-color:#E5655D;border-bottom:4px solid #E2534B;border-radius:4px;}nav ul li:hover .inside {display: block;position: absolute;top: по вкусу;left: по вкусу;}

Sign In

как сделать такое меню

Question

oleg29331

Link to comment

Share on other sites

3 answers to this question

Recommended Posts

satantx

Link to comment

Share on other sites

oleg29331

Link to comment

Share on other sites

rus

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information