asked on

Centering top menu

Hi

Can i know whats the best way to center my two lines of top menu?

Website link

.music_box .menu {
 width: 100%;
 background: #ECA34A;
 float: left;
 box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
 border-top-left-radius:6px;
 border-top-right-radius:6px
}

.music_box .menu ul {
 list-style: none;
 float: left;
}

.music_box .menu ul li {
 color:#FFF;
 cursor: pointer;
 list-style: none;
 float: left;
 display: block;
 padding: 15px 17px;
 border-right: 0px solid #525252;
 position:relative;
}

.music_box .menu ul li a {
 color: #FFFFFF;
 text-decoration: none
}

.music_box .menu ul li:hover {
 background: #E67E00;
}

.music_box .menu ul li.on {
 background: #E67E00;
}

.menu .sub-nav{top:51px;left:0;padding: 10px 16px;background: #ECA34A;position:absolute;z-index:99999;display:none;width:auto;border-bottom-left-radius:4px;border-bottom-right-radius:4px;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both;}
.menu .sub-nav dd{float:none;background:none;padding:10px 0}
.menu .sub-nav dd a{color:#fff;}
.menu .sub-nav dd a:hover{color: #eeeeee  }

Open in new window

ASKER CERTIFIED SOLUTION

Ryan Chong

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Janet L

ASKER

Worked perfectly!
However, currently the top row has 8 items, while bottom row has 4 items.
Is it possible to make top row has e.g 5 items, then bottom row has 7 items. Visually should look better this way.
Thanks for your help!

<div class="menu" <?php if(isset($logid)):?><?php elseif(isset($author)):?>style="display:none"<?php else:?><?php endif;?>>

Open in new window

Ryan Chong

Is it possible to make top row has e.g 5 items, then bottom row has 7 items. Visually should look better this way.

try break it into 2 menus instead.

like:

<div class="menu"> <ul> <li class=""> <a href="fojiaogushi">佛教故事</a> </li> <li class=""> <a href="lingyanshiji">灵验事迹</a> </li> <li class=""> <a href="baihuafofa">白话佛法</a> </li> <li class=""> <a href="fojiaogushi">佛教故事</a> </li> <li class=""> <a href="lingyanshiji">灵验事迹</a> </li></ul></div>

<div class="menu"> <ul> <li class="">
<a href="baihuafofa">白话佛法</a> </li> <li class=""> <a href="fojiaogushi">佛教故事</a> </li> <li class=""> <a href="lingyanshiji">灵验事迹</a> </li> <li class=""> <a href="baihuafofa">白话佛法</a> </li> <li class=""> <a href="8">MenuA</a> </li> <li class=""> <a href="baihuafofa">白话佛法</a> </li> <li class=""> <a href="fojiaogushi">佛教故事</a> </li> <li class=""> <a href="lingyanshiji">灵验事迹</a> </li> <li id="searchmusic" style="border-right: 0px none;">搜索视频</li></ul></div>

Open in new window

Janet L

ASKER

<?php if(isset($logid)):?> extract from DB. So first one extract first 5 items, then second extract the remaining for second row?

Ryan Chong

<?php if(isset($logid)):?> extract from DB. So first one extract first 5 items, then second extract the remaining for second row?

what do you mean by "first one" and "second row"?

if the menu(s) is generated based on sequence of data, you should do a looping to your data and generate the menu(s) accordingly.

I would suggest you to explain this in your new question since it's not really related to your original question.

Janet L

ASKER

Extremely helpful, straight to the point