Меню DropDown с двумя частями с помощью css

Это фрагмент двойной части выпадающего меню с двойной частью, поэтому проблема заключается в том, что я не могу сделать два div в стороне друг от друга, если я не использую ширину div для любого рациона.Меню DropDown с двумя частями с помощью css

код CSS, который я хочу, представляет собой метод отображения двух div ниже друг друга без использования свойства width в коде html.

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

источник

2015-10-22 mody

где CSS код ?? – tabassum

Можете ли вы добавить код css inline вместо ссылки на него на картинке? – Eric

Пожалуйста, напишите скрипку или stacksnippet –

Я надеюсь, что этот пример поможет вам !!!!

* { 
 
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; 
 
} 
 
\t \t

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

источник

2015-10-22 08:51:26 tabassum

, что мне нужно, чтобы сделать двойной столбец link2 влево и вправо, но я не знаю, как это сделать. и спасибо за ответ. – mody

Меню DropDown с двумя частями с помощью css

ответ

Смежные вопросы