当前位置: 动力学知识库 > 问答 > 编程问答 >

Horizontal Submenu needs to stretch 100%

问题描述:

So I'm trying to implement a nav with a horizontal submenu that I found on CodePen but I'm having trouble getting the submenu to stretch 100% of the nav-wrap. If I give it a width of 100% it inherits the width in the parent element unless I give it a width in pixels, which I obviously don't want to do.

My css is a bit bloated due to the fact that I'm trying to incorporate the codepen project within my current project. I've deleted all unnecessary code except for what's in the css in case I'm missing something.

This is roughly what I'm trying to achieve. It's important that the nav stays uniform.

Thanks in advance.

http://jsfiddle.net/9m6Kn/

body {

background-color:#FFF;

font-size: 62.5%; /* 67.5% or 65.7% */

}

#wrapper {

width:85%;

height:85%;

margin: 0 auto 0 auto;

}

#nav-wrap {

width:100%;

height:110px;

padding: 0;

margin: 0 0 0 0;

background-color:#CCC;

}

ul li {

display:inline-block;

margin:0;

float:left;

position:relative;

font-size:2.7em;

font-family: 'allgemeineregular', Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;

width:14%;

min-width:140px !important;

height:100%;

text-align:center;

color: #FFF;

line-height:1.1em;

}

.orange {

width:100%;

height:100%;

background-color:#f37028;

}

.orange p {

margin: 0 0 0 0;

padding: 0;

}

.orange a span /* added when link has more than one word */ {

display:block;

}

.orange a:link, .orange a:visited {

padding:0;

color: #FFF;

text-decoration:none;

text-transform:uppercase;

-webkit-transition: all 0.3s;

-moz-transition: all 0.3s;

-ms-transition: all 0.3s;

-o-transition: all 0.3s;

transition: all 0.3s;

}

.orange a:hover {

text-decoration:none;

color:#231f20;

-webkit-transition: all 0.3s;

-moz-transition: all 0.3s;

-ms-transition: all 0.3s;

-o-transition: all 0.3s;

transition: all 0.3s;

}

li .subnav-orange {

display: none;

position: absolute;

width: 800px;

clear: both;

margin-left: 0;

background-color:#f37028;

font-size:0.25em;

text-align:left !important;

}

.subnav-orange ul li a:link, a:active, a:visited {

text-decoration:none;

}

.subnav-orange ul li a:hover {

color:#000;

text-decoration:none;

}

li:hover > .subnav-orange {

display:inline-block;

left:0;}

.subnav-orange ul {

margin-left: 0;

float:left;

padding:10px 0;

width:100%;

}

.subnav-orange ul li {

width:14%;

margin: 0 10% 0 0 !important;

}

<div id="wrapper">

<ul id="nav-wrap">

<li id="link-one">

<div class="orange"><a href="#" class="parent-one-link"><span>Digital</span><span>Printing</span></a></div>

<div class="subnav-orange">

<ul>

<li><a href="#">Option1</a></li>

<li><a href="#">Option2</a></li>

<li><a href="#">Option3</a></li>

</ul>

</div><!-- /.subnav -->

</li>

</ul>

</div> <!-- wrapper -->

网友答案:

is this what you need?

http://jsfiddle.net/9m6Kn/1/

there is plenty of css adjustments

分享给朋友:
您可能感兴趣的文章:
随机阅读: