如何从页面扩展导航栏？

我有一个css导航栏，我想扩展我的网页的两侧。现在它有一个非常小的宽度，似乎不管我玩多少比例没有什么变化。任何人都可以帮助我吗？我对网页设计颇为陌生。我会后我的两个CSS和HTML如何从页面扩展导航栏？

CSS：

/* Links */ 

.menu li a { 
    display: block; 
    padding: 0 14px; 
    margin: 6px 0; 
    line-height: 28px; 
    text-decoration: none; 

    border-left: 1px solid #4075a6; 
    border-right: 1px solid #4075a6; 

    font-family: Archer,Helvetica, Arial, sans-serif; 
    font-weight: light; 
    font-size: 13px; 

    color: white; 
    text-shadow: 0px 0px 0px rgba(0,0,0,.6); 

    -webkit-transition: color .2s ease-in-out; 
    -moz-transition: color .2s ease-in-out; 
    -o-transition: color .2s ease-in-out; 
    -ms-transition: color .2s ease-in-out; 
    transition: color .2s ease-in-out; 
} 

.menu li:first-child a { border-left: none; } 
.menu li:last-child a{ border-right: none; } 

.menu li:hover > a { color: #b8ccdc; } 

/* Sub Menu */ 

.menu ul { 
    position: absolute; 
    top: 40px; 
    left: 0; 
    opacity: 0; 
    background: #195892; 
    -webkit-border-radius: 0 0 5px 5px; 
    -moz-border-radius: 0 0 5px 5px; 
    border-radius: 0 0 5px 5px; 

    -webkit-transition: opacity .25s ease .1s; 
    -moz-transition: opacity .25s ease .1s; 
    -o-transition: opacity .25s ease .1s; 
    -ms-transition: opacity .25s ease .1s; 
    transition: opacity .25s ease .1s; 
    width: 101px; 
} 

.menu li:hover > ul { opacity: 1; } 

.menu ul li { 
    height: 0; 
    overflow: hidden; 
    padding: 0; 

    -webkit-transition: height .25s ease .1s; 
    -moz-transition: height .25s ease .1s; 
    -o-transition: height .25s ease .1s; 
    -ms-transition: height .25s ease .1s; 
    transition: height .25s ease .1s; 
} 

.menu li:hover > ul li { 
    height: 36px; 
    overflow: visible; 
    padding: 0; 
} 

.menu ul li a { 
    width: 100px; 
    padding: 0px 0px 0px 0px; 
    margin: 0; 

    border: none; 
    border-bottom: 1px solid #353539; 
} 

.menu ul li:last-child a { 
    border: none; 
    color: #195892; 
}

HTML：

<ul class="menu"> 
    <li><a href="#">Home</a></li> 
    <li><a href="#">Developements</a></li> 
    <li><a href="#">Condominiums</a> 
    <ul> 
     <li><a href="#" class="documents">Documents</a></li> 
     <li><a href="#" class="messages">Messages</a></li> 
     <li><a href="#" class="signout">Sign Out</a></li> 
    </ul> 
    </li> 
    <li><a href="#">Video Tours</a></li> 
    <li><a href="#">Contact </a></li> 
</ul> 
<!-- end .menu -->

来源

2012-08-01 BiancaI

不确定你想要什么。添加一些例子或尝试在jsFiddle上重新创建问题，例如，同样查看100行css有点困难。只放置你认为必须工作的CSS，比如菜单容器的CSS。 – devundef 2012-08-01 17:12:17

我不太确定要发布哪个CSS部分，因为我不知道需要更改哪部分来扩展框的宽度。 – BiancaI 2012-08-01 17:15:03

我还是不明白。什么盒子？当我把你的代码放在jsFiddle上时，我几乎看不到任何东西，但是我看到的是外部菜单框具有完整宽度：http://jsfiddle.net/jSdv3/ – devundef 2012-08-01 17:22:21

您需要在UL的宽度设置为您所需的宽度。我认为100％适合你，因为它会从容器的边缘到边缘。

我建议在UL和LIs上放置背景颜色，以便您可以轻松地看到它们的开始和结束位置，然后一旦你将它们定位在你想要的位置，就移除它。

来源

2012-08-01 17:16:51 Sean

谢谢！我实际上已经掌握了它的工作原理，但是它不会从页面的边缘流失，是否有快速解决方案？ – BiancaI 2012-08-01 17:19:58

你有链接吗？除非可以滚动，否则任何人都不知道它是否超出页面范围？你可以放大一个宽度而不是100％来扩展你想要的许多像素。 – Sean 2012-08-01 17:40:35

我需要将我的.menu更改为100％宽度并添加position：absolute;正确：0;左：0;并且完美地工作。

来源

2012-08-01 17:33:58 BiancaI

如何从页面扩展导航栏？

回答

相关问题