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

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

html css menu

Html 如何使css中的第二个子菜单显示在鼠标悬停和右侧,html,css,menu,Html,Css,Menu,当我的鼠标悬停在我的第一个子菜单右侧时，如何使我的第二个子菜单出现我的密码。如果你们不介意的话，我希望你们能解释一下谢谢大家抱歉我的英语不好。是您菜单的解决方案我对你的例子做了一点修改，使之对我来说是透明的。我为您的ul，li标签添加了新类我没有将子菜单安排到右侧以下是菜单的修改后的css： body{ font-family: "Verdana", helvetica, Sans-serif; font-size: 15px; line-height:

当我的鼠标悬停在我的第一个子菜单右侧时，如何使我的第二个子菜单出现

我的密码。

如果你们不介意的话，我希望你们能解释一下

谢谢大家

抱歉我的英语不好。

是您菜单的解决方案

我对你的例子做了一点修改，使之对我来说是透明的。我为您的

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>

是子菜单向右定位的修正。但它还没有完全发挥作用

小提琴的链接不起作用..Contrate嗯desenvolvedor.谢谢你，菜单底部的子菜单看起来不错，再次感谢你。顺便说一句，如果我的答案有用，你可以接受我的答案作为解决方案。

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;
}

<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>