Question

这是下拉菜单的双部分片段，其中包含双重部分，问题是我不能将两个div放在一边，除非我使用div宽度来表示任何比例。

CSS代码我想要的是一种方法，可以在不使用html代码中的div属性的情况下将下面的两个width显示在一起。

.navbar ul li a{
    text-decoration: none;
    color: black;
    padding: 16.2px;
    display: block;
}
.navbar{
    width: 100%;
    height: 50px;
    position: relative;
    margin: 0;
    padding: 0;
    background-color: #c7ffff;
    border:1px solid black;
}
.dropnavbar{
    position: absolute;
    margin: 0;
    padding: 0;
    height: 60px;/*can be negliacted if the default is auto*/
}
.active{
    float: left;
    text-align: center;
    list-style: none;
    width: 100px;
    font-size: 15px;
}
.subnavbar{
    display:none;
    padding: 0;/*if forgotten the size of the dropdown nav will be greater than it's parrent*/
    margin: 0;
}
.navbar li:hover .subnavbar{
    display: block;
}
.navbar li:hover li,.navbar li:hover{
    background-color:#e0ffff;
}
.subnavbar>li>a:hover{
    background-color: aqua;
}
.subnavbar>li:nth-child(n+2){
    border-top: 1px solid black;
}

<!DOCTYPE html>
<html>
    
    <head>
        <link href="navbar.css" rel="stylesheet">
        <title>DropDown NavBar Trial 3</title>
    </head>
    
    <body>
        <header>
            <div class="navbar">
                <ul class="dropnavbar">
                    <li class="active"><a href="#">About</a>
                    </li>
                    <li class="active"><a href="#">Branches</a>

                        <ul class="subnavbar">
                            <li class="active"><a href="#">Egypt</a>
                            </li>
                            <li class="active"><a href="#">USA</a>
                            </li>
                            <li class="active"><a href="#">UAE</a>
                            </li>
                            <li class="active"><a href="#">France</a>
                            </li>
                        </ul>
                    </li>
                    <li class="active"><a href="#">Categories</a>

                        <div style="width:auto;">
                            <div style="float:left; width:10%;">
                                <ul class="subnavbar">
                                    <li class="active"><a href="#">Books</a>
                                    </li>
                                    <li class="active"><a href="#">Electronic Devices</a>
                                    </li>
                                    <li class="active"><a href="#">House Gadgets</a>
                                    </li>
                                    <li class="active"><a href="#">Sport Equipments</a>
                                    </li>
                                </ul>
                            </div>
                            <div style="float:right;width:10%;">
                                <ul class="subnavbar">
                                    <li class="active"><a href="#">Books</a>
                                    </li>
                                    <li class="active"><a href="#">Electronic Devices</a>
                                    </li>
                                    <li class="active"><a href="#">House Gadgets</a>
                                    </li>
                                    <li class="active"><a href="#">Sport Equipments</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </li>
                    <li class="active"><a href="#">Paying</a>
                    </li>
                </ul>
            </div>
        </header>
    </body>

</html>

Answer 1

我希望这个例子可以帮助你!!!!

* {
margin:0;
padding:0;
}
#nav {
list-style:none;
height:2em;
}
#nav li {
position:relative;
float:left;
width:192px;
background:#999;
text-align:center;
}
#nav li:hover {
background:#777;
}
#nav a {
display:block;
color:#000;
text-decoration:none;
line-height:2em;
}
/* --------- Drop Down -------- */
#nav ul {
position:absolute;
left:-999em;
top:2em;
list-style:none;
}
#nav li:hover ul {
left:0;
top:auto;
}

<ul id="nav">
  <li><a href="#">Link1</a></li>
  <li><a href="#">Link2</a> 
    <ul>
      <li><a href="#">Drop1</a></li>
      <li><a href="#">Drop2</a></li>
      <li><a href="#">Drop3</a></li>
    </ul>
  </li>
  <li><a href="#">Link3</a></li>
</ul>

DropDown菜单有两部分，使用css

1 个答案: