Question

我正在尝试使用css构建导航菜单栏但出现了问题，但无法确定它是什么.. ??
html代码是： -

<!DOCTYPE html>

<html>
<head>
    <title>CSS3 drop down</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <ul class="menu">
        <li><a href="#">Home</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">About</a></li>

            <ul> <!--sub_menu of About to be build-->
                <li><a href="#">Sub 1</a></li>
                <li><a href="#">Sub 2</a></li>
                <li><a href="#">Sub 3</a></li>
            </ul>

        <li><a href="#">Cases</a></li>
            <ul> <!--sub_menu of Cases to be build-->
                <li><a href="#">Sub 4</a></li>
                <li><a href="#">Sub 5</a></li>
                <li><a href="#">Sub 6</a></li>
            </ul>
        <li><a href="#">Policy</a></li>
        <li><a href="#">History</a></li>
    </ul>


</body>
</html>

CSS代码如下： -

.menu,
.menu ul,
.menu li,
.menu a {
     margin: 0;
     padding: 0;
     border: none;
     outline: none;
}

/*Determing the margin ,,centering the drop down menu on the page*/

ul.menu {
     margin : 150px auto 0 auto;
}

/* menu */
.menu {
     height : 60px;
     width : 550px;
     background: #e3e3e3;
     border-radius: 10px;
}

.menu li {
     display: block;
     height: 60px;
     float: left;
     list-style: none;
     position: relative;
}

/*All the links to be displayed*/
.menu li a {
     display: block;
     text-decoration: none;
     font-weight: bold;
     color: black;
     font-size: 17px;
     padding: 0 18px;
     margin: 10px 0;
     line-height: 50px;
     border-left: 1px groove #d6d6d6;
     border-right: 1px groove #d6d6d6;
     transition: color.8s;
}

.menu li:first-child a { border-left:none; }
.menu li:last-child a { border-right:none; }

/*changing color on hover*/
.menu li:hover > a {
     color: red;
}

/*Sub menu*/
.menu ul {
     /*opacity: 0;*/
     position: absolute;
     top: 60px;
     background-color: red;
     }

pLz明确解释了主要问题是什么.. !!!!!

Answer 1

基本问题在于您的HTML代码..

制作菜单或子菜单时使用<ul>

下的<li>

<html>
<head>
    <title>CSS3 drop down</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <ul class="menu">
        <li><a href="#">Home</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">About</a>
           <ul class="submenu"> <!--sub_menu of About to be build-->
                <li><a href="#">Sub 1</a></li>
                <li><a href="#">Sub 2</a></li>
                <li><a href="#">Sub 3</a></li>
            </ul>
       </li>
        <li><a href="#">Policy</a></li>
        <li><a href="#">History</a></li>
        <li><a href="#">Cases</a>
            <ul class="submenu"> <!--sub_menu of Cases to be build-->
                <li><a href="#">Sub 4</a></li>
                <li><a href="#">Sub 5</a></li>
                <li><a href="#">Sub 6</a></li>
            </ul>
      </li>

    </ul>
</body>
</html>

我希望你能安心休息。这是演示链接。

http://jsbin.com/zokiboce/1/edit

设计下拉菜单栏时，下面的CSS代码出错？

1 个答案: