Question

当我的鼠标悬停在我的第一个子菜单上并且在右边时，如何显示第二个子菜单？

我的代码。 My Fiddle

<head>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>My Menu</title>
<link href="estilos.css" rel="stylesheet" type="text/css" media="screen" />
</head>

<body>
<div id="corpo">
        <header>
            <div id="centeredmenu">
                <ul>
                    <li > <a href="#">Menu1</a>
                        <ul>
                            <li> <a href="##">Menu1Sub1</a></li>
                            <li> <a href="##">Menu1Sub1</a></li>
                            <li> <a href="##">Menu1Sub1</a></li>
                        </ul>
                    </li>

                    <li> <a href="#">Menu2</a></li> <!-- e preciso criar o ficheiro-->

                    <li> <a href="#">Menu3</a>
                        <ul>
                            <li> <a href="#">Menu3Sub1</a>
                                <ul>
                                    <li> <a href="#">Sub1Sub1</a></li>
                                    <li> <a href="#">Sub1Sub2</a></li>
                                    <li> <a href="#">Sub1Sub3</a></li>
                                </ul>
                            </li>

                            <li> <a href="#">Menu3Sub2</a>
                                <ul>
                                    <li> <a href="#">Sub2Sub1</a></li>
                                    <li> <a href="#">Sub2Sub2</a></li>
                                    <li> <a href="#">Sub2Sub3</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>

                    <li> <a href="#">Menu4</a>
                        <ul>
                            <li> <a href="#">Menu4Sub1</a></li>
                            <li> <a href="#">Menu4Sub2</a></li>
                            <li> <a href="#">Menu4Sub3</a></li>
                        </ul>
                    </li>

                    <li> <a href="#">Menu5</a>
                        <ul>
                            <li> <a href="#">Menu5Sub1</a>
                                <ul>
                                    <li> <a href="#">Sub1Sub1</a></li>
                                    <li> <a href="#">Sub1Sub2</a></li>
                                    <li> <a href="#">Sub1Sub3</a></li>
                                </ul>
                            </li>

                            <li> <a href="#">Menu5Sub2</a>
                                <ul>
                                    <li> <a href="#">Sub2Sub1</a></li>
                                    <li> <a href="#">Sub2Sub2</a></li>
                                    <li> <a href="#">Sub2Sub3</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>


                    <li> <a href="#">Menu6</a>
                        <ul>
                            <li> <a href="#">Menu6Sub1</a></li>
                            <li> <a href="#">Menu6Sub2</a></li>
                            <li> <a href="#">Menu6Sub3</a></li>
                        </ul>
                    </li>

                    <li> <a href="#">Menu7</a>
                        <ul>
                            <li> <a href="#">Menu7Sub1</a></li>
                            <li> <a href="#">Menu7Sub2</a></li>
                            <li> <a href="#">Menu7Sub3</a></li>
                        </ul>
                    </li>

                    <li> <a href="#">Menu8</a>
                        <ul>
                            <li> <a href="#">Menu8Sub1</a>
                                <ul>
                                    <li> <a href="#">Sub1Sub1</a></li>
                                    <li> <a href="#">Sub1Sub2</a></li>
                                    <li> <a href="#">Sub1Sub3</a></li>
                                </ul>
                            </li>

                            <li> <a href="#">Menu8Sub2</a>
                                <ul>
                                    <li> <a href="#">Sub2Sub1</a></li>
                                    <li> <a href="#">Sub2Sub2</a></li>
                                    <li> <a href="#">Sub2Sub3</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
             </div>
        </header>
</div>
</body>

body{
font-family: "Verdana", helvetica, Sans-serif;
font-size: 15px;
line-height: 20px;/*diferenca de alturas entre elementos dentro do mesmo              sitio*/
background-color: #82c193;
width: 100%;
margin: auto;
}

#corpo{
min-width: 630px;
max-width: 80%;
margin: auto;
}

/* Main menu settings */
#centeredmenu {
clear:both;
float:left;
margin:0;
padding:0;
width:100%;
font-family:Verdana, Geneva, sans-serif; /* Menu font */
font-size:80%; /* Menu text size */
z-index:1000; /* This makes the dropdown menus appear above the page content   below */
position:relative;
}

/* Top menu items */
#centeredmenu ul {
margin:0;
padding:0;
list-style:none;
float:right;
position:relative;
right:50%;
}

#centeredmenu ul li {
margin:0 0 0 0px;
padding:0;
float:left;
position:relative;
left:50%;
top:1px;
}

#centeredmenu ul li a {
display:block;
margin:0;
padding:10px 7px 10px 7px;
font-size:12px;
line-height:15px;
background:#eaeaea;
text-decoration:none;
color:#1f1f1f;
font-weight:bold;
border-bottom:1px solid #000;
}

#centeredmenu ul li.active a {
color:#fff;
background:#273b26;
}

#centeredmenu ul li a:hover {
background:#2b6a29; /* Top menu items background colour */
color:#fff;
border-bottom:1px solid #2b6a29;
}
#centeredmenu ul li:hover a,
#centeredmenu ul li.hover a { /* This line is required for IE 6 and below */
background:#2b6a29; /* Top menu items background colour */
color:#fff;
border-bottom:1px solid #2b6a29;
}

/*  Submenu items */
#centeredmenu ul ul {
display:none; /* Sub menus are hidden by default */
position:absolute;
top:35px;
left:0;
float:left;
right:auto; /*resets the right:50% on the parent ul */
width:100px; /* width of the drop-down menus */
}

#centeredmenu ul ul li {
left:auto;  /*resets the left:50% on the parent li */
margin:0; /* Reset the 1px margin from the top menu */
clear:left;
float:left;
width:100%;
}

#centeredmenu ul ul li a,
#centeredmenu ul li:hover ul li a,
#centeredmenu ul li.hover ul li a { /* This line is required for IE 6 and below */
font-size:10px;
font-weight:normal; /* resets the bold set for the top level menu items */
background:#597258;
color:#fff;
line-height:12px; /* overwrite line-height value from top menu */
border-bottom:1px solid #fff; /* sub menu item horizontal lines */
float:left;
width:100%;
}

#centeredmenu ul ul li a:hover,
#centeredmenu ul li:hover ul li a:hover,
#centeredmenu ul li.hover ul li a:hover { /* This line is required for IE 6     and below */
background:#eaeaea; /* Sub menu items background colour */
color:#273b26;
float:left;
}

/* Flip the last submenu so it stays within the page */
#centeredmenu ul ul.last {
left:auto; /* reset left:0; value */
right:0; /* Set right value instead */
}

#centeredmenu ul ul.last li {
float:right;
position:relative;
right:.8em;
}

#centeredmenu ul li:hover ul,
#centeredmenu ul li.hover ul {
display:block;
}

如果你们不介意，我会很感激你们的一些解释。

谢谢大家。

PS：抱歉，我的英语不好。

Answer 1

Here是您菜单的解决方案。

我修改了一点你的例子，对我来说是透明的。我为您的ul，li代码添加了新课程。

我没有将子子菜单安排到右边。

以下是菜单的修改后的css：

body{
    font-family: "Verdana", helvetica, Sans-serif;
    font-size: 15px;
    line-height: 20px;/*diferenca de alturas entre elementos dentro do mesmo sitio*/
    background-color: #82c193;
    width: 100%;
    margin: auto;
}

#corpo{
    min-width: 630px;
    max-width: 80%;
    margin: auto;
}

/* Main menu settings */
#centeredmenu {
    clear:both;
    float:left;
    margin:0;
    padding:0;
    width:100%;
    font-family:Verdana, Geneva, sans-serif; /* Menu font */
    font-size:80%; /* Menu text size */
    z-index:1000; /* This makes the dropdown menus appear above the page content below */
    position:relative;
}

/* Top menu items */
#centeredmenu ul {
    margin:0;
    padding:0;
    list-style:none;
    float:right;
    position:relative;
    right:50%;
}
#centeredmenu ul li {
    margin:0 0 0 0px;
    padding:0;
    float:left;
    position:relative;
    left:50%;
    top:1px;
}
#centeredmenu ul li a {
    display:block;
    margin:0;
    padding:10px 7px 10px 7px;
    font-size:12px;
    line-height:15px;
    background:#eaeaea;
    text-decoration:none;
    color:#1f1f1f;
    font-weight:bold;
    border-bottom:1px solid #000;
}
#centeredmenu ul li.active a {
    color:#fff;
    background:#273b26;
}
#centeredmenu ul li a:hover {
    background:#2b6a29; /* Top menu items background colour */
    color:#fff;
    border-bottom:1px solid #2b6a29;
}
#centeredmenu ul li:hover a,
#centeredmenu ul li.hover a { /* This line is required for IE 6 and below */
    background:#2b6a29; /* Top menu items background colour */
    color:#fff;
    border-bottom:1px solid #2b6a29;
}

/* Submenu items */
.main-menu {
    width: 100px;
}

.main-menu .sub-menu  {
    display:none; /* Sub menus are hidden by default */
    position:absolute;
    left:0;
    float:left;
    right:auto; /*resets the right:50% on the parent ul */
    width:100px; /* width of the drop-down menus */
}

.main-menu:hover .sub-menu {
    display:block;
}

.main-menu .sub-menu .sub-sub-menu {
    display: none;
}

.sub-menu li:hover .sub-sub-menu {
    display: block;
}

.sub-sub-menu {

}

#centeredmenu ul ul li {
    left:auto;  /*resets the left:50% on the parent li */
    margin:0; /* Reset the 1px margin from the top menu */
    clear:left;
    float:left;
    width:100%;
}

#centeredmenu ul ul li a,
#centeredmenu ul li:hover ul li a,
#centeredmenu ul li.hover ul li a { /* This line is required for IE 6 and below */
    font-size:10px;
    font-weight:normal; /* resets the bold set for the top level menu items */
    background:#597258;
    color:#fff;
    line-height:12px; /* overwrite line-height value from top menu */
    border-bottom:1px solid #fff; /* sub menu item horizontal lines */
    float:left;
    width:100%;
}

#centeredmenu ul ul li a:hover,
#centeredmenu ul li:hover ul li a:hover,
#centeredmenu ul li.hover ul li a:hover { /* This line is required for IE 6 and below */
    background:#eaeaea; /* Sub menu items background colour */
    color:#273b26;
    float:left;
}

/* Flip the last submenu so it stays within the page */
#centeredmenu ul ul.last {
    left:auto; /* reset left:0; value */
    right:0; /* Set right value instead */
}

#centeredmenu ul ul.last li {
    float:right;
    position:relative;
    right:.8em;
}

这是修改后的html：

<body>
<div id="corpo">
        <header>
            <div id="centeredmenu">
                <ul>
                    <li class="main-menu"> <a href="#">1</a>
                        <ul class="sub-menu">
                            <li> <a href="##">1.1</a></li>
                            <li> <a href="##">1.2</a></li>
                            <li> <a href="##">1.3</a></li>
                        </ul>
                    </li>

                    <li class="main-menu"> <a href="#">2</a></li> <!-- e preciso criar o ficheiro-->

                    <li class="main-menu"> <a href="#">3</a>
                        <ul class="sub-menu">
                            <li> <a href="#">3.1</a>
                                <ul class="sub-sub-menu">
                                    <li> <a href="#">3.1.1</a></li>
                                    <li> <a href="#">3.1.2</a></li>
                                </ul>
                            </li>

                            <li> <a href="#">3.2</a>
                                <ul class="sub-sub-menu">
                                    <li> <a href="#">3.2.1</a></li>
                                    <li> <a href="#">3.2.2</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
             </div>
        </header>
</div>
</body>

Here是将子子菜单定位到右侧的修复程序。但是还不是很完美。

如何使用css中的第二个子菜单显示在悬停和右侧

1 个答案: