Question

我正在尝试将菜单添加到组合背景中。但是当我将背景与其中的菜单嵌套时，它们不合作并且不对齐。例如，当我将其中一个菜单向左移动时，其他菜单开始向另一个方向移动。现在我真的尝试解决这个问题，但现在看来唯一的方法是让我调整每一个直到所有对齐。那就是我今天的问题：

如何在不重复调整每个菜单的情况下完成这项工作？

这里有css和html代码

   .baked a:hover{text-decoration: none;
    color: white;
    text-shadow: 1px 1px 1px blue;
    }               

 .baked { list-style-type: none;
     float: left;
     margin-top: 15px;
     margin-left: -20px;

     }

   .baked li ul {position: absolute;
          display: none;}
.baked li{font-family:  Berlin Sans FB;
      }



.baked li:hover ul { background: silver;
                 display: block;
                 box-shadow: inset 0px 12px 15px -2px purple;
                 list-style-type: none;
                 width: 400px;
                 height: 100px;
                 }
.baked li>a{color: white;
        font-size: 12px}

<ul class="baked">
   <li>
    <a href="PointerIndex.html">PointerIndex</a>
    <ul>
    <li><a href="Reflections.html">Reflections</a></li>
    <li><a href="Practicing.html">Practicing</a></li>
    <li><a href="NewsFeed.html">NewsFeed</a></li>
    <li><a href="ExArt.html">Explanatory Art</a></li>
    <li><a href="TopAi.html">Top AI</a></li>
    </ul>
</li>
</ul>

请注意，我总共有9个菜单，所有菜单都包含在以下div中

div.Console{background: gray;
                 display: block;
                 box-shadow:  0px -20px 5px -10px #692, 0px 20px 5px -10px lightblue, 15px 0px 5px -2px #942, -15px 0px 5px -2px #249;
                 border-radius: 24pt;

                 list-style-type: none;
                 width: 300px;
                 margin-top: -100px;
                 margin-left: 30px;
                 height: 50px;
                 }

Answer 1

我对你提供的信息感到困惑。我修改了子菜单项右对齐的代码。试试吧。请详细说明。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title><br />
<style type="text/css">

  .baked a:hover{text-decoration: none;
    color: white;
    text-shadow: 1px 1px 1px blue;
    }               

 .baked { list-style-type: none;
     float: left;
     margin-top: 15px;
     margin-left: -20px;

     }

   .baked li ul {position: absolute;
          display: none;}
.baked li{font-family:  Berlin Sans FB;
      }



.baked li:hover ul { background: silver;
                 display: block;
text-align:right; padding-right:10px;
                 box-shadow: inset 0px 12px 15px -2px purple;
                 list-style-type: none;
                 width: 400px;
                 height: 100px;
                 }
.baked li a{color: white;
        font-size: 12px}

    /*  div.Console{background: gray;
                 display: block;
                 box-shadow:  0px -20px 5px -10px #692, 0px 20px 5px -10px lightblue, 15px 0px 5px -2px #942, -15px 0px 5px -2px #249;
                 border-radius: 24pt;

                 list-style-type: none;
                 width: 300px;
                 margin-top: -100px;
                 margin-left: 30px;
                 height: 50px;
                 }

                 */
</style>
</head>

<body bgcolor="#999999">

<ul class="baked">
   <li>
    <a href="PointerIndex.html">PointerIndex</a>
    <ul>
    <li><a href="Reflections.html">Reflections</a></li>
    <li><a href="Practicing.html">Practicing</a></li>
    <li><a href="NewsFeed.html">NewsFeed</a></li>
    <li><a href="ExArt.html">Explanatory Art</a></li>
    <li><a href="TopAi.html">Top AI</a></li>
    </ul>
</li>
</ul>


</body>
</html>

将文本放在bg容器中

1 个答案: