在动态水平菜单下居中静态宽度垂直子菜单 [英] Center a static width vertical submenu under a dynamic horizontal menu

问题描述

我已经在这儿呆了几个小时。我可以找到我想要的单个组件，但我不能把它们扔在一起。

I've been at this for hours. I can find individual components of what I want, but I can't seem to throw them together.

我遇到的问题是，我无法获得静态宽度子菜单以它们派生的li项为中心。这应该很容易，如果这些父项目有静态宽度，但我想根据页面的宽度动态改变它们的宽度。我不知道这是否在视觉上令人愉快，但它是我想做的，不想做静态。我会把宽度设为100％，但是当页面变得非常宽时，它们往往看起来很蠢。（我选择它们是静态的原因）

The issue I am having is that I can't get the static width submenus to center on the li items they are derived from. This should be easy if those parent li items had static widths, but I would like to dynamically changed their widths based on how wide the page is. I don't know if this is visually pleasing, but it is something I would like to do and don't want to make static. I would make the widths 100%, but they tend to look dumb when the page gets really wide (the reason why I chose them to be static)

还有其他改变我应该对css结构，以使它更好，所以如果你有任何提示，请把他们给我！

I'm sure there are other changes I should make to the css structure as well to make it nicer, so if you have any tips please throw them to me!

这是我有。

JSFiddle： http://jsfiddle.net/ede2gsc6/

JSFiddle: http://jsfiddle.net/ede2gsc6/

html：

<ul id="top-menu">
    <li>ITEM1</li>
    <li>ITEM2
        <ul>
            <li>SUBITEM1</li>
            <li>SUBITEM2</li>
        </ul>
    </li>
    <li>ITEM3
        <ul >
            <li>SUBITEM1</li>
            <li>SUBITEM2</li>
            <li>SUBITEM3</li>
        </ul>
    </li>
    <li>ITEM4</li>
    <li>ITEM5
        <ul>
            <li>SUBITEM1</li>
            <li>SUBITEM2</li>
            <li>SUBITEM3</li>
            <li>SUBITEM4</li>
            <li>SUBITEM5</li>
        </ul>
    </li>
</ul>

和css：

body, ul {
    margin: 0;
    padding: 0;
}


#top-menu{
    float: left;
    width:100%;
    background-color: rgba(0,240,255,.5);
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    text-align: center; 
    padding: 0px;   
    margin: 0px;
    min-width: 620px;
    list-style: none;   
}
        #top-menu li {
            float: left;
            position: relative;
            width: 20%;
            list-style: none;
        }
        #top-menu a:hover {
            color: #00F0FF;
        }
            #top-menu li ul {
                padding-top: 1px;       
                position: absolute;
                background: rgba(0,240,255,.5);
                border-bottom: 1px solid black;
                border-left: 1px solid black;
                border-right: 1px solid black;
                visibility: hidden;
                width: 170px;
            }
            #top-menu li:hover ul {
                visibility: visible;
                display: block;
            }   
                #top-menu li ul li {
                    float: left;
                    padding: 0px;
                    width: 100%;
                    text-align: left;
                }

推荐答案

>

You could use

left: 50%;
margin-left: -85px;

您 #nav li ul 该中心定位。工作示例： http://jsfiddle.net/ede2gsc6/3/

on you #nav li ul to generate that center positioning. Working example: http://jsfiddle.net/ede2gsc6/3/

这篇关于在动态水平菜单下居中静态宽度垂直子菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！